css

1、盒模型

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

content-box(W3C标准盒模型)
border-box(IE盒模型 width包含padding和border)
padding-box (padding计算入width内)

ie8+浏览器支持content-box和border-box；
ff则支持全部三个值。
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other

2、BFC

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

IE下为Layout,可通过zoom:1触发

功能

使 BFC 内部浮动元素不会到处乱跑；
和浮动元素产生边界。
方法:
- overflow: auto 让浮动的内容和周围的内容登高
- overflow: hidden 外边距塌陷
- display: flow-root 它可以创建无副作用的BFC

`给  display: flow-root 属性后， 中的所有内容都会参与BFC，浮动的内容不会从底部溢出。`

触发条件:

根元素()
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-
footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

html
float!=none
position = absolute || fixed
display = inline-block || flow-root || table、table-row、 table-row-group、table-header-group、table-

应用场景

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

层叠上下文

层叠上下文
层叠等级
层叠顺序
z-index

普通元素的层叠等级优先由其所在的层叠上下文决定。
层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。

如何产生层叠上下文

HTML中的根元素本身j就具有层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
CSS3中的新属性也可以产生层叠上下文。
- 父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
- 元素的opacity属性值不是1；
- 元素的transform属性值不是none；
- 元素mix-blend-mode属性值不是normal`；
- 元素的filter属性值不是none；
- 元素的isolation属性值是isolate；
- will-change指定的属性值为上面任意一个；
- 元素的-webkit-overflow-scrolling属性值设置为touch。

4、居中布局

水平居中
- 行内元素：text-align: center
- 块儿级元素：margin:0 auto
- absolute + transform
  - (1) 绝对定位元素的定位基准点是其有定位元素的祖先元素;
  - (2) translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度。
- flex + justify-cennter:cennter
垂直居中
- ling-heigth:height
- absolute + transform
- flex + align-item:center

.center {
          position:absolute;
           top:50%;
           left:50%;
           width:200px;
           height:200px;
           margin-top:-200/2px;
           margin-left:-200/2px;
}
.center {
           position:relative;
            top:50%;
            left:50%;
            width:200px;
            height:200px;
            background:red;
            transform:translate(-50%,-50%); /* 可以做很多动画效果，不兼容 */
            transform-origin:50% 50%; /* 设置旋转元素的基点位置 不兼容*/
}

flex布局解决的一些问题

将内容块垂直居中于其父级内部。
无论有多少宽度/高度，使容器的所有子容器占用相同数量的可用宽度/高度。
使多列布局中的所有列采用相同的高度，即使它们包含不同的内容量。

section {
  display: flex; /* 子元素在section 中水平平均分布*/
}

布局方向

flex-direction: row(默认) || column排布方向
flex-wrap: wrap; 自动换行子元素添加高度 flex: 200px;

flex-direction: row;
flex-wrap: wrap;

等价于
flex-flow: row wrap;

还有好多。。。

5、选择器优先级

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

6、清浮动，防止父级塌陷

通过增加尾元素清除浮动
- :after/
  :clear:both
创建父级BFC 如：display: flow-root
父级设置高度

link与@import的区别

link是XHTML标签
link标签除了可以加载css外，还可以做很多其他的事情，如定义RSS，定义rel连接属性等，@import只能加载CSS。
加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。
使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
@import可以在css中再次引入其他样式表

8、css预处理器（sass/less/postcss）

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

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

css动画

transition:过渡动画
- transition-property:属性
- transition-duration:间隔
- transition-timing-function:曲线
- transition-delay:延迟
animation/keyframes
- animation-name:动画名称，对应@keyframes
- animation-timing-function:曲线
- animation-delay:延迟
- animation-iteration-count:次数
  - infinite:循环动画
- animation-direction:方向
  - alternate:反向播放
- animation-fill-mode:静止模式
  - forwards:停止时保留最后一帧
  - backwards:停止时回到第一帧
  - both:同时运用
- 常用钩子：animationend
动画属性:尽可能的使用动画属性进行动画，能拥有较好的性能表现
- translate
- scale
- rotate
- skew
- opacity
- color

css基础

css