1。什么是BFC机制BFC（BlockFormattingContext），块级格式化上下文，是一个独立的渲染区域，将BFC内部元素与外部元素隔离开来，使得内部元素和外部元素的定位不会相互冲突独家影响力。触发条件（以下任意一项）float的值不是noneoverflow的值是不可见的display的值是table-cell、tabble-caption和inline-block的其中之一position的值不是static或anyreleative之一IE下Layout可以通过zoom触发BFC布局和普通文档流布局：1.区别：BFC布局规则：1.浮动元素的高度会由parent计算（父元素触发BFC）2.非-浮动元素不会覆盖浮动元素的位置（非浮动元素触发BFC）3.margin不会传递给父级（父级触发BFC）4.相邻两个元素的上下边距属于同一BFC会重叠1.普通文档流布局：浮动元素的高度不会被父级计算。2、非浮动元素会覆盖浮动元素的位置。3.margin会传递给父元素。4.两个相邻元素上方和下方的外边距会重叠。开发中的应用防止marginOverlap可以包含浮动元素——clearinternalfloating（清除浮动的原理是两个div都在同一个BFC区域）自适应双列布局可以防止元素被浮动元素覆盖2.NewCSS3中的选择器和属性只是在这里列出。具体用法可以看我这篇关于css3新选择器和属性的文章。属性选择器属性选择器含义描述E[att^="val"]属性att的值以"val"元素开头E[att$="val"]属性att的值以"val"元素结尾E[att*="val"]属性att的值包含元素结构"val"字符串伪类选择器选择器含义说明E:root匹配文档的根元素，对于HTML文档，是HTML元素E:nth-child(n)匹配其父元素的第n个子元素，第一个数为1E:nth-last-child(n)匹配其父元素的最后第n个子元素，第一个数为1E:nth-of-type(n)类似于:nth-child()，但只匹配标签相同的元素E:nth-last-of-type(n)类似于:nth-last-child()，但只匹配相同类型标签元素E:last-child匹配父元素的最后一个子元素，相当于:nth-last-child(1)E:first-of-type匹配下同一标签的第一个子元素父元素，等价于:nth-of-type(1)E:last-of-type匹配父元素下使用相同标签的最后一个子元素，等价于:nth-last-of-type(1)E:only-child匹配only父元素下的子元素，相当于:first-child:last-child或:nth-child(1):nth-last-child(1)E:only-of-type匹配父元素下唯一使用相同标签的子元素，相当于：first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)E:empty匹配不包含任何子元素的元素。请注意，文本节点也被视为子元素。CSS3新属性属性说明兼容transition设置transition效果transform变换效果（移动、缩放、旋转、拉长或拉伸）animation动画box-shadow阴影效果FF3.5、Safari4、Chrome3text-shadow文字阴影FF3.5、Opera10,Safari4,Chrome3border-colors为边框设置多种颜色FF3+boder-image图片边框FF3.5,Safari4,Chrome3text-overflow文本截断IE6+,Safari4,Chrome3,Opera10word-wrap自动换行IE6+,FF3.5,Safari4,Chrome3border-radius圆角边框FF3+??,Safari4,Chrome3opacityopacityallbox-sizing控制框模型合成模式FF3+,Opera10,Safari4、Chrome3outlineFF3+、safari4、chrome3、opera10background-size没有指定背景图片的大小safari4、chrome3、opera10background-origin指定背景图片从哪里开始显示safari4、chrome3、FF3+??background-clip指定从哪里开始切割背景图片safari4、chrome3rgba根据r、g、b三个颜色通道设置颜色值，通过asafari设置透明度4、chrome3、FF3、opera103.居中布局水平居中内联元素：text-align:center块级元素：margin:0auto绝对定位和移动：absolute+transform绝对定位和负边距：absolute+margin弹性布局：flex+justify-content:center垂直居中子元素为单行文本：line-height:heightabsolute+transformflex+align-items:centertable:display:table-cell;vertical-align:middle使用position和top和negativemargin水平和垂直居中1.已知元素宽高：绝对定位+margin:auto:div{width:200px;height:200px;background:green;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;}2.已知元素宽高：绝对定位+负margindiv{width:200px;height:200px;background:green;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;}3.absolute+transformdiv{width:200px;height:200px;background:green;position:absolute;left:50%;/*Position50%ofparent*/top:50%;transform:translate(-50%,-50%);/*Own50%*/}4.flex+justify-content+align-items.box{height:600px;display:flex;justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中/*aa只需要三句即可实现水平垂直居中带变量宽度和高度*/}.box>div{background:green;width:200px;height:200px;}4.清除浮动的方法有哪些，它们的优缺点是什么？Usetheemptyelementwithclearattribute在浮动元素后使用一个空元素，如
