5分钟掌握CSS - CSS技术总结

CSS

1.盒模型

页面渲染时，dom元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

contetn-box （W3C 标准盒模型）

border-box (IE 盒模型) width（content + border + padding） + margin

padding-box (FireFox 曾经支持)
margin-box (浏览器未实现)

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

W3C与mdn 规范中均只支持 contetn-box 与 border-box。

BFC

(Block formatting context)块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

如何创建BFC

• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者* inline-flex
• overflow的值不是visible

规则

• 属于同一个 BFC 的两个相邻 Box 垂直排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 * (子元素 absolute 除外)
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，环绕于周围

应用

阻止margin重叠

• 可以包含浮动元素–清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖

层叠上下文

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。

触发条件

根层叠上下文(html)

• position
  css3属性
• flex
• transform
• opacity
• filter
• will-change
• -webkit-overflow-scrolling

层叠等级：层叠上下文在Z轴上的排序

• 在同一层叠上下文中，层叠等级才有意义
• z-index的优先级最高

居中布局

水平居中

• 行内元素：text-align: center
• 块级元素：margin: 0 auto、absolute + transform、flex + * justify-content: center

垂直居中

• line-height: height
• absolute + transform
• flex + align-items: center
• table

水平垂直居中

• absolute + transform
• flex + justify-content + align-items

选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
选择器 从右往左 解析

浮动 float

可以把多个块级元素放到想要的一行上

清除浮动

• 浮动会影响标准流，比如浮动造成的父级高度塌陷问题
• 通过增加尾元素清除浮动:after / <br> : clear: both
• 创建父级 BFC
• 父级设置高度

.clearfix:after{
    content:"";  /*设置内容为空*/
    height:0;  /*高度为0*/
    line-height:0;  /*行高为0*/
    display:block;  /*将文本转为块级元素*/
    visibility:hidden;  /*将元素隐藏*/
    clear:both;  /*清除浮动*/
}
.clearfix{
    zoom:1;  /*为了兼容IE*/
}

定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

static 静态定位（默认）

默认值，元素出现在正常的流中。位置设置为static的元素，它始终处于正常文档流给予的位置，不影响其他元素的偏移。（static 元素会忽略任何 top、bottom、left 、 right 或者 z-index 声明）。

relative 相对定位

位置设置为 relative 的元素，相对于其正常位置进行定位，该元素会在正常文档流中会占据位置，从而不影响其他元素的偏移。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。因此 “left:20px” 会将元素移至元素正常位置左边 20 个像素的位置。

absolute 绝对定位

位置设置为 absolute 的元素，相对于非static定位以外的第一个父元素进行绝对定位，脱离了正常文档流，该元素不占据正常文档流空间，因此会影响其他元素的偏移。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。

fixed 固定定位

位置被设置为 fixed 的元素，可相对于浏览器视口(viewport)进行定位。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式），低版本的IE不支持。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。fixed属性会创建新的层叠上下文。当元素祖先的transform属性非none时，容器由视口改为该祖先。

sticky 粘性定位

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

重绘 回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。

Display

display的几个常用的属性值，inline ， block， inline-block

inline（行内元素）:

• 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
• 不能更改元素的height，width的值，大小由内容撑开.
• 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:

• 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
• 能够改变元素的height，width的值.
• 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block（融合行内于块级）:

结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点 。
用通俗的话讲，就是不独占一行的块级元素。

CSS隐藏元素

display: none 和 visibility: hidden 的区别

• 占据页面空间( display: none 将元素隐藏后，在页面是是不占有空间位置的，而visibility: hidden 将元素隐藏后，还保留着元素大小的空间位置 );
• display: none 影响了 reflow和repaint(回流与重绘)，而visibility: hidden并没有影响;
• 某个模块添加了display: none; 它下面的任何子级都会被隐藏，而添加了visibility: hidden，子级一旦有添加visibility: visible的css，该子级将不会被隐藏;
  display: none 和 opacity: 0的区别
• 占据页面空间( display: none 将元素隐藏后，在页面是是不占有空间位置的，而opacity: 0 只是改变了元素的透明度将其隐藏，还保留着元素大小的空间位置 ) ；
• display: none 不会被子类继承，但是子类一样不会显示。 opacity: 0 会被子类继承，但不能像visibility的属性一样，给子类添加opacity:1，并不能将子类显示。
• css3 transition 属性对display：none 并无效果，但对opacity 则有效果。（附加一句，对visibility: hidden也无效果）

link 与 @import 的区别

• link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
  当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
• @import需要 IE5 以上才能使用
• link可以使用 js 动态引入，@import不行

CSS预处理器(Sass/Less/Postcss)

CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。在这层编译之上，便可以赋予 CSS 更多更强大的功能，常用功能:

• 嵌套
• 变量
• 循环语句
• 条件语句
• 自动前缀
• 单位转换
• mixin复用

CSS动画

transition: 过渡动画
  transition-property: 属性
  transition-duration: 间隔
  transition-timing-function: 曲线
  transition-delay: 延迟
  常用钩子: transitionend

animation / keyframes
   animation-name: /*动画名称，对应@keyframes */
  animation-duration: 间隔
  animation-timing-function: 曲线
  animation-delay: 延迟
  animation-iteration-count: 次数
    infinite: 循环动画
  animation-direction: 方向
    alternate: 反向播放
  animation-fill-mode: 静止模式
    forwards: 停止时，保留最后一帧
    backwards: 停止时，回到第一帧
    both: 同时运用 forwards / backwards
  常用钩子: animationend

动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现
  translate
  scale
  rotate
  skew
  opacity
  color