.clearfix:after{content:".";显示：块；高度：0；明确：两者；可见性：隐藏；}.clearfix{显示：内联块；}/*对于IE/Mac*/CSS内联元素可以设置padding和margin吗？设置内联元素的宽高无效。但是设置margin和padding是有效的。行中非替换元素的外边距不会改变一个元素的行高div,form,table,header,aside,section,article,figure,figcaption,h1~h6,nav,p,pre,blockqoute,canvas,ol,ul,dlspan,a,img,label,input,select,textarea,br,i,em,strong,small,button,sub,sup,codeCSSbox-sizing的取值有哪些？允许您定义以特定方式匹配区域的特定元素。框大小：内容框|边框框|继承；一般在做自适应网页设计时使用，使用该属性不会破坏网页的结构。常用值：content-box、border和padding不计入widthpadding-box，padding计入border-box的width，border和padding计入width，这其实是一种奇怪的模式~compatibility-webkit-box-sizing:100px;//对于ios-safari，android-moz-box-sizing:100px;//对于ffbox-sizing:100px;//对于其他CSSBFC原理？BFC（blockformattingcontext）块级格式化上下文。它是一个html框，里面的元素是左对齐的。float的值不是none，position的值不是static或者relativedisplay的值是table-cell，table-caption，inline-block，flex，inline-flex之一overflow的值不可见vertical只有当它们在同一个BFC中时，才会发生相邻块框的边距折叠。如果它们属于不同的BFC，则它们之间的边距不会塌陷。BFCs的作用1.清除内部浮动我们在布局时经常会遇到这样的问题：在子元素上设置浮动后，父元素的高度会塌陷，即父元素的高度变为0。解决这个问题，只需将父元素变成BFC。一种常见的方法是将overflow:hidden设置为父元素。2.合并垂直外边距在CSS中，两个相邻框的外边距可以合并为一个外边距。这种组合边距的方式称为折叠，因此组合边距称为折叠边距。collapsedresult：当两个相邻的margin都是正数时，collapsedresult是它们之间的较大值。当相邻两个边距均为负值时，折叠结果为两个绝对值中较大的值。当两个边距分别为正负时，折叠结果为两者之和。这也可以使用BFC来解决。原理上面已经说了。3、创建自适应的两栏布局在很多网站中，我们经常会看到这样的结构，左图+右文字的两栏结构。将overflow:hidden添加到图像和文本样式会将其变成块级格式化上下文。（我对BFC的理解）[https://www.jianshu.com/p/764...]HTML5和CSS3的新特性？html5：语义标签；增强形式；视频和音频；帆布;svg绘图；地理位置；拖放api；网络工作者；存储（sessionStorage和localStorage）；网络套接字；HTML5十大新特性圆角（border-radius）、阴影（box-shadow）、边框图片border-image（二）给文字添加特效（text-shadow）、强制文字换行（word-wrap）、线性渐变（linear-gradient）（3）旋转、缩放、定位、倾斜：transform:rotate(90deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);(4)添加更多CSS选择器、多背景、rgba()；(5)CSS3中唯一引入的伪元素是::selection；（6）媒体查询（@media）、多栏布局（flex）CSS清除浮动的方法？即防止元素高度塌陷1.父元素变成BFC块级格式化上下文overflow:hidden;缺点：元素溢出无法控制显示，不要使用2.clear:{clear:both;}3.伪元素after和before，clear:bothIE6-7不支持:after，使用zoom:1触发hasLayout.clearfix:after{content:".";显示：块；高度：0；明确：两者；可见性：隐藏；}.clearfix{显示：内联块；}/*对于IE/Mac*/鉴于IE/Mac市场占有率极低，我们直接忽略，最终精简代码如下：.clearfix:after{content:".";显示：块；高度：0；可见性：隐藏；清除：两者；}.clearfix{*缩放：1;}1)display:block使生成的元素块化2)height:0防止生成的内容破坏原有布局的高度3)visibility:hidden使生成的内容不可见，允许可点击和交互的内容可能被覆盖生成的内容；4）使用内容：“.”生成内容作为最后一个元素。至于内容，可以使用点或其他内容。某些版本可能包含空内容。不推荐这样做，firefox直到7.0content:""仍然创建额外的空间；after在元素之后插入content的内容。5)zoom:1触发IEhasLayout。通过分析发现，除了clear:both是用来关闭float的，其他代码无非就是隐藏content生成的内容，这也是为什么其他版本的关闭float都是font-size:0,line-height:0CSS如何实现垂直居中？CSS水平垂直居中常用方法总结1、元素在文档流中排列紧密，不能直接使用topleft直接移动元素，容易造成混乱。使用位置：相对；元素在文档流中的位置不浮动改变元素的居中。content{margin-top:-50%ofheight;<--伪代码-->position:relative;top:50%;<--或者使用transform:translateY(50%);-->}2.弹性布局flexbody{display:flex;对齐项目：居中；/*定义主体元素的垂直居中*/justify-content:center;/*定义主体元素的水平居中*/}.content{width:300px;高度：300px；背景：橙色；}3.设置父容器为display:table，然后设置子元素，也就是要居中竖直显示的元素，设置为display:table-cell。但是不推荐这样做，因为会破坏整体布局有哪位CSS预处理器用过，简单介绍一下？谈谈CSS预处理器目前最主流的CSS预处理器有LESS、SASS和Stylus。引入了多少CSS伪类？添加一些选择器特效。格式为：选择器：伪类after元素插入内容afterbefore元素插入内容before空元素空子元素6.CSS选择器优先级？CSS选择器优先级的精髓总结id>类选择器>标签选择器>用过的CSS布局方式？圣杯布局、双飞翼布局、Flex布局、绝对定位布局的CSSdisplay属性的值和作用？display属性指定元素应生成的框类型。常用的有none、inline、block、inline-block。各自的含义是：1)none：不显示该元素，不保留被改变元素的实际空间。但是还有一个可见性：hidden，它预留了元素的空间。2）inline：显示的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素不能设置宽高，所以一旦元素的display属性设置为inline，再设置属性height和width就没有用了。这时候影响它的高度一般就是内部元素的高度（font-size）和padding。3)block：元素将显示为块级元素，元素前后有换行符。设置为块后，元素可以设置宽度和高度。单行上的元素。4)inline-block：行内块元素。这个属性值结合了inline和block的特点，即它不仅是一个内联元素，还可以设置宽高。CSS单位rem和em有什么区别？px是一个固定像素，一旦设置就不能更改以适应页面大小。Em和rem比px更灵活。它们是相对长度单位，也就是说长度不固定，更适合响应式布局。em和rem的区别用一句话总结就是：em是相对于父元素的，rem是相对于根元素的。标准盒模型和css盒模型的区别。(1)有IE盒子模型和W3C盒子模型两种；(2)盒子模型：content、padding、margin、border；(3)区别：IE的content部分的border和padding是计算出来的；
