.内容框{框大小：内容框；-moz-box-sizing：内容框；宽度：100px；高度：100px；填充：20px；边框：5px实心#E6A43F；背景：蓝色；box{box-sizing:padding-box;-moz-box-sizing:padding-box;宽度：100px；高度：100px；填充：20px；边框：5px实心#186645；背景：红色；}.border-box{box-sizing:border-box;-moz-box-sizing：边框框；宽度：100px；高度：100px；填充：20px；边框：5px实心#3DA3EF；背景：黄色；}css1、盒模型页面渲染时，只有dom元素的布局模型可用。可以通过box-sizing设置。根据计算出的宽高区域，可以分为：content-box（W3C标准盒模型）border-box（IE盒模型宽度包括padding和border）padding-box（padding算入width）ie8+浏览器支持内容框和边框框；ff支持所有三个值。-webkit-box-sizing:100px;//对于ios-safari，android-moz-box-sizing:100px;//对于ffbox-sizing:100px;//对于其他.内容框{框大小：内容框；-moz-box-sizing：内容框；宽度：100px；高度：100px；填充：20px；边框：5px实心#E6A43F；背景：蓝色；box{box-sizing:padding-box;-moz-box-sizing:padding-box;宽度：100px；高度：100px；填充：20px；边框：5px实心#186645；背景：红色；}.border-box{box-sizing:border-box;-moz-box-sizing：边框框；宽度：100px；高度：100px；填充：20px；边框：5px实心#3DA3EF；背景：黄色；}2、BFC块级格式化上下文是一个独立的渲染区域，将BFC内部元素与外部元素隔离开来，使得内部元素和外部元素的定位不会相互影响。IE下是Layout，可以通过zoom来触发BFC：1内部浮动元素不跑来跑去；浮动元素产生边框。方法:overflow:auto让浮动内容和周围的内容上升overflow:hidden外边距折叠display:flow-root可以创建无副作用的BFC给display:flow-root属性后，
所有内容都会参与BFC，浮动内容不会从底部溢出。`触发条件：根元素（）浮动元素（元素的float不是none），绝对定位元素（元素的position是absolute或fixed），inlineblock元素（元素的显示是inline-block），表格单元格（元素显示为table-cell，HTML表格单元格默认为该值）表格标题（元素显示为table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素显示为table，table-row、table-row-group、table-header-group、table-footer-group（分别为HTMLtable、row、tbody、thead、tfoot的默认属性）或inline-table）溢出值不可见的块元素显示valueFlow-root元素包含值为layout,content或paint的元素Elastic元素（display是flex或inline-flex元素的直接子元素）Grid元素（display是grid或inline-grid元素的直接子元素)多列容器（元素的列-count或column-width不是自动的，包括column-countof1)和column-spanofall总是创建一个新的BFC，即使元素没有包装在多列容器中（标准更改，Chrome错误）。htmlfloat!=noneposition=absolute||fixeddisplay=内联块||流根||——清除内部浮动（清除浮动的原则是两个div都在同一个BFC区域）自适应双列布局可以防止元素被浮动元素覆盖层级优先级由其所在的级联上下文决定。堆叠级别的比较仅在当前堆叠上下文元素内有意义。比较不同堆叠上下文中的堆叠级别是没有意义的。如何生成级联上下文HTML中的根元素本身就有一个级联上下文，称为“根级联上下文”。普通元素将position属性设置为非静态值，并将z-index属性设置为特定值以生成堆叠上下文。CSS3中的新属性也可以生成级联上下文。当父元素的display属性值为flex|inline-flex，且子元素的z-index属性值不为auto时，该子元素为堆叠上下文元素；元素的opacity属性值不为1；元素的transform属性值不是none；该元素的mix-blend-mode属性值不正常`；元素的filter属性的值不是none；元素的隔离属性值为isolate；will-change指定的属性值为以上任意一个；元素的-webkit-overflow-scrolling属性的值设置为触摸。4.居中布局水平居中内联元素：text-align:center块级元素：margin:0autoabsolute+transform(1)绝对定位元素的定位参考点是其具有定位元素的祖先元素；(2)translate需要做offset是相对于自身的中心点。如果单位是百分比，则参考值为元素本身的宽度。flex+justify-center:center垂直居中ling-heigth:heightabsolute+transformflex+align-item:center.center{position:absolute;顶部：50%；左：50%；宽度：200px；高度：200px；边距顶部：-200/2px；margin-left:-200/2px;}.center{position:relative;顶部：50%；左：50%；宽度：200px；高度：200px；背景：红色；变换：翻译（-50%，-50%）；/*可以做很多动画效果，不兼容*/transform-origin:50%50%;/*设置旋转元素的基点位置不兼容*/}flex布局解决的一些问题会将content块在其parent内部垂直居中。使容器的所有子容器占用相同数量的可用宽度/高度，无论有多少个宽度/高度。使多列布局中的所有列具有相同的高度，即使它们包含不同数量的内容。节{显示：flex;/*子元素水平均匀分布在section*/}layoutdirectionflex-direction:row(default)||;flex-direction:row;flex-wrap:wrap;相当于flex-flow:rowwrap;还有很多。..5.选择器优先级！重要>内联样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性选择器是从右往左解析的6.清除浮动防止父元素折叠通过添加尾部元素清除浮动：after/
:clear:both创建一个父BFC如：display:flow-rootparentsetheightlink和@importlink的区别是一个XHTML标签link标签除了加载css还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。加载顺序的区别：页面加载时，链接引用的CSS会同时加载，而@import引用的CSS会等到页面完全下载后再加载。所以有时候在浏览通过@import加载CSS的页面时会出现没有样式（也就是闪烁）的情况，在网速较慢的情况下比较明显。使用dom控制样式时的区别。使用JavaScript控制dom改变样式时，只能使用link标签，因为@import不受dom控制。@import可以重新引入css8中的其他样式表，css预处理器（sass/less/postcss）css预处理器的原理：是通过webpack编译，将css-like语言转换成浏览器可读的真正css。在这一层编译之上，可以赋予css更强大的功能。常用函数：嵌套定义变量循环语句条件语句自动前缀单位转换minxin复用css动画transition:transitionanimationtransition-property:属性transition-duration:intervaltransition-timing-function:curvetransition-delay:delayanimation/keyframesanimation-name:动画名称，对应@keyframesanimation-timing-function:curveanimation-delay:delayanimation-iteration-count:次数infinite:loopanimationanimation-direction:directionalternate:reverseplaybackanimation-fill-mode:staticmodeforwards:向后停止时保持最后一帧：stop回到第一帧两者：同时使用公共钩子：animationend动画属性：动画尽量使用动画属性，可以有更好的性能translatescalerotateskewopacitycolor
