css tricks

margin：auto

margin:auto，一般只设置给水平方向的margin

  • 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中水平居中
  • 如果只指定左外边距或右外边距的margin为auto，则会将外边距设置为最大值

margin重叠

网页中相邻的块在垂直方向的外边距会发生重叠
兄弟元素：兄弟元素间的垂直外边距相邻，外边距会取最大值而不是取和
父子元素：父子元素间的垂直外边距相邻，子元素的外边距会设置给父元素(又称为 margin塌陷)
为什么会发生margin重叠？

BFC布局规则规定：内部Box垂直方向距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
意义：流式布局中，一组块级列表设置同样的上下margin，相邻的列表之间不会有双倍margin的间隔

计算规则：正正取大值，正负值相加，负负最负值
解决方法：最好的解决margin重叠问题的方法就是了解它，避免它。垂直方向只设置一个方向的margin

  • 兄弟元素
  1. 只给一个元素设置外边距
  2. 将其中一个兄弟元素放入BFC中
  • 父子元素
  1. 用父元素padding代替子层元素margin
  2. 父元素设置BFC
  3. 给父元素加边框

margin负值

内联元素
  1.内联元素不能设置 margin-top 和 margin-bottom 属性
  2.内联元素可以设置 margin-left 和 margin-right
    margin-left 为负值，产生向左的位移
    margin-right 为负值，自身位置不变，后面的内联元素产生向左的位移
块级元素
  1.margin-top 为负值，不管是否设置高度，是否脱离文档流，都不会增加高度，而是会产生向上的位移，其后元素受影响产生向上的位移
  2.margin-bottom 为负值，自身无偏移（大小位置不会改变），其后元素受影响产生向上的位移
  3.margin-left, margin-right为负值
    1）元素本身没有宽度，会增加元素宽度
    2）元素本身有宽度，会产生位移

块/行内元素特点

  • 块级元素特点
1、独占一行
2、可以直接控制 宽/高 以及盒子模型的相关css属性(width/height/border/margin/padding)
3、在不设置宽度的情况下，宽度自动填满父元素宽度，高度由自身内容决定的
  • 内联元素特点
1、在一行从左到右排列，达到父元素最大宽度时，自动折行；
2、不能直接控制 宽/高，宽/高由自身内容决定
3、可以设置CSS盒子模型的其他属性（margin/padding/border）

padding
  内联元素可以设置水平方向的内边距，可以影响布局
  内联元素可以设置垂直方向内边距，但是不会影响页面的布局
border
  内联元素可以设置边框，但是垂直的边框不会影响到页面的布局，同内边距
外边距：
    内联元素支持水平方向的外边距，而且水平方向的相邻外边距不会重叠，而是求和
    内联元素不支持垂直外边距，设置了也无用
  • 行内块元素
可以设置CSS盒子模型的所有属性(width/height/margin/padding/border)
在默认不设置宽度和高度的时候，宽高才是由本身内容决定的

行内元素和块状元素，区别？

  1. 块级元素设置padding、border改变布局，可以改变嵌套内容的框占据文档流中的范围（同样也影响背景的区域）
  2. 行内元素设置padding、border会影响背景区域，但不会改变垂直方向上的布局。结果会出现设置padding、border的背景覆盖上面的元素的元素内容，底部被当做背景，被下级元素覆盖。

伪类选择器

伪类用来表示元素的一种特殊状态，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

没访问过的链接 a:link
访问过的链接 a:visited(只能定义字体颜色)
鼠标滑过的链接 a:hover
正在点击的链接 a:active
hover和:active也可以为其他元素设置
p:hover{
  background-color: yellow;
}
文本框获取焦点以后，修改背景颜色为黄色
input:focus{
  background-color: yellow;
}
为p标签中选中的内容使用样式，可以使用:selection伪类，但只能定义被选择时的background-color，color及text-shadow
p:selection{
  background-color: orange;
}

/*坑：nth-of-type以元素为中心*/，如果前面是类，则会选中所有带这个类名的元素 
否定伪类：为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
p:not(.hello){
  background-color: yellow;
}

伪元素选择器

伪元素用来表示元素的一些特殊位置，当我们需要为元素的特殊位置设置样式时，就可以使用伪元素

为p中第一个字符来设置一个特殊的样式：
p::first-letter {
  color: red;
  font-size: 20px;
}

为p中的第一行设置一个背景颜色为黄色：
p::first-line {
  background-color: yellow;
}
::before / ::before
  一般这两者都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容
::placeholder 用于控制表单输入框占位符的外观

省略号

  • 单行文本省略号
p{
  white-space: nowrap;  /*禁止文字内容折行*/
  overflow: hidden;  /*超出部分溢出隐 藏*/
  text-overflow: ellipsis;   /*文字以省略号的方式隐藏*/
}
  • 多行文本省略号
p{
  display: -webkit-box; /* 弹性盒模型*/
  -webkit-box-orient: vertical; /*文字垂直排列 */
  -webkit-line-clamp:2; /*文字显示的行数*/
  overflow: hidden; /*超出部分溢出隐藏*/
}
/* 只支持基于webkit内核的浏览器 */

背景

  • background-color
  • background-image

如果设置了 background-image，同时也建议设置 background-color(顺序无所谓)。当背景图像还没有请求到时可以显示背景颜色。
如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。

  • 如果背景图片大于元素，默认会显示图片的左上角
  • 如果背景图片和元素一样大，则会将背景图片全部显示
  • 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
  • background-repeat
  • background-position
    背景图片默认从元素的左上角显示
    可选值：

该属性可以使用关键字（9种组合）来指定一个背景图片的位置（水平方向：left center right； 垂直方向：top center bottom）
如果只给出一个值，则第二个值默认是center，

  • background-attachment
    用来设置背景图片是否随页面一起滚动，必须先指定background-image
    可选值：

scroll，默认值，背景图片随着窗口滚动
fixed，背景图片的定位永远相对于浏览器的窗口，不随页面滚动。一般都是设置给body

  • background 复合属性

没有顺序的要求，也没有数量的要求

  • background-size
    可选值：

auto：默认值 , 即图像真实大小。
长度值 或 百分比 ：一个值, 则用于定义宽度, 高度为默认值 auto, 根据宽度进行等比例缩放; 两个值, 分别作用于图像的宽和高。
cover：等比缩放背景图片以完全覆盖背景区，背景图像可能超出容器。
contain：等比缩放背景图片以完全装入背景区，背景图像始终被包含在容器中

  • background-origin：设置 background-position 参考的原点

padding-box 默认值
border-box
content-box

  • background-clip：设置 背景图片或颜色填充的范围

border-box 默认
padding-box
content-box

transition

transition在元素首次渲染还没有结束的情况下是不会被触发的

REM布局

html{
  font-size: 100px;
}

#root{
  margin: 0 auto;
  max-width:750px;
}

html中添加脚本

//写在 body 标签的最上方
;(function() {
    function computed () {
        //获取当前设备宽度 和 设计稿宽度
        let HTML = document.documentElement,
            windowWidth = HTML.clientWidth,
            designWidth = 750;
        if(windowWidth > designWidth){
            HTML.style.fontSize = '100px';
            return ;
        }
        HTML.style.fontSize = (windowWidth / designWidth) * 100 + 'px'
    }
    computed()
    window.addEventListener('resize',computed,false)
})()

继承

1、css中只有 color 或以 text-、font-、line-开头的属性才可以继承。
2、特殊标签
    a标签的字体颜色和下划线是不能被继承，必须对a标签本身进行设置。
    h标签的字体大小不能修改，必须对h标签本身进行修改。

CSS中可以和不可以继承的属性 https://www.cnblogs.com/thislbq/p/5882105.html

长度单位

  • 像素px：一个px就相当于屏幕中的一个小点。
    不同显示器一个像素的大小也不相同，显示效果越好，像素就越小。
  • 百分比%：浏览器将会根据其父元素的样式来计算该值，在创建一个自适应的页面时，经常使用百分比作为单位
  • em：它是相对于当前元素的字体大小来计算的

文本样式

  • text-transform 设置文本的大小写
    可选值：
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
  • text-decoration 设置文本的修饰
    可选值：
underline 为文本添加下划线
line-through 为文本添加删除线
  • letter-spacing 指定字符间距
  • word-spacing 指定单词之间的距离
  • text-align 设置文本的对齐方式
left ，默认值，文本靠左对齐
right ， 文本靠右对齐
center ， 文本居中对齐
justify ， 两端对齐
  • text-indent 用来设置首行缩进

这个值一般都会使用em作为单位，比如 text-indent:2em
为它指定一个负值，可以将一些不想显示的文字隐藏起来

overflow

通过overflow可以设置父元素如何处理溢出内容：
* 可选值：
*   visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
*   hidden, 溢出的内容，会被修剪，不会显示
*   scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
*     - 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
*   auto，会根据需求自动添加滚动条，
*       需要水平就添加水平
*       需要垂直就添加垂直
*       都不需要就都不加

百分比参照于谁

子元素 width left margin padding 属性值的百分比是相对于：父级元素的width
子元素 height top 属性值的百分比是相对于: 父级元素的height

禁止系统默认滚动条

html{
  overflow: hidden;
}

浮动

1. 脱离文档流
2. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
3. 浮动元素会生成一 个块级框，而不论它本身是何种元素。
4. 浮动元素支持设置宽高，如果不设置宽高，将由内容决定
缺点
会导致父元素的高度失效，值为0，后面的元素识别不了它的高度，就会往前占领它的位置

让元素消失在视野中

display: none 让元素消失
font­size:0 字体大小为0
width:0; overflow:hidden; 宽度为0 而且溢出隐藏 
height:0; overflow:hidden 高度为0 而且溢出隐藏 
line­height:0; overflow:hidden 行高为0 而且溢出隐 藏
visibility: hidden; 可见性的元素隐藏消失
opacity: 0; 透明度为0
color / background: transparent 字体颜色或者背景 颜色为透明
text­-indent: ­9999px; 首段缩进足够大的负值 
position: absolute; left/top/bottom/right :­9999px; 定位 + 方位的足够大的负值 
margin­top/bottom/left/right: ­9999px; 的四个方位的 足够大的负值
transform: translateX(­9999px) / translateY(­9999px); 位移坐标值足够大的负值 
transform: scale(0); 缩放比为0

backface-visibility

backface-visibility 属性定义当元素背面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。

backface-visibility: visible | hidden;

rotateY()

rotateY(45deg): 直观上顺时针45deg（右手定则：四个手指直线Y轴原点）

object-fit 和 object-position

object-position 和 object-fit 只对替换元素生效
object-fit 属性指定替换元素的内容如何适应到具有宽高的元素框中

object-fit 类似于背景中的 background-size 属性
可选值
  contain
  cover
  fill  默认值，如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
  none  被替换的内容将保持其原有的尺寸。
  scale-down  与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

object-position属性指定替换元素的内容在元素框内的对齐方式

类似 background-position

scroll-snap-type 和 scroll-snap-align

作用：优化滚动
一个横向可滚动容器，每次滚动之后，如果希望子元素最终的停留位置不是尴尬的被分割，而是完整的呈现在容器内，可以这样写：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
    scroll-snap-type: x mandatory;
}
li {
    scroll-snap-align: center;
}　　

详情可以看张鑫旭的这篇博客：CSS Scroll Snap简介
或者这篇：使用 sroll-snap-type 优化滚动

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • css
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    前端陈陈陈阅读 293评论 0赞 1
  • css基础
    # CSS样式规则overflow 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 1,041评论 0赞 1
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,368评论 2赞 66
  • CSS
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    从小就好看阅读 253评论 0赞 0
  • CSS 资料一（内容来自黑马培训机构）
    CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果...
    郑莫轩阅读 1,059评论 0赞 2