介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
css盒子模型由4部分构成，margin、border、padding、content。标准盒子模型和IE盒子模型的主要区别是在于width的计算，标准盒子模型中，width = content的宽度，IE盒子模型中width包括content、padding、border。
CSS选择符有哪些？哪些属性可以继承？ ID选择器、类选择器、标签选择器、属性选择器、后代选择器等。优先级：ID > 类 = 伪类 = 属性 > 元素 = 伪元素。内联样式优先级比ID高，！important优先级最高。 可继承的属性：visibility. cursorCSS3新增伪类有那些？ 之前整理过h5、css3新增的一些属性。如何居中div？如何居中div中的内容？ 居中div //适用于宽高已知的元素。 .item{ width: 100px; height: 100px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } <div class="item"></div> //利用flex布局，不限制宽高 .parent{ display: flex; justify-content: center; align-items: center; height: 500px; width: 500px; background:red; } .item{ width: 100px; height: 100px; border: 1px solid #000; } <div class="parent"> <div class="item"></div> </div> // .item{ width: 100px; height: 100px; border: 1px solid #000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } <div class="item"></div>居中div中的内容
//缺点是如果div宽度设置不够，内容会自动换行超出容器。只有当div的宽度足够容纳文字时，才会达到想要的效果，适用于单行文字居中。 .item{ width: 200px; height: 100px; border: 1px solid #000; line-height: 100px; //行高与div等高，实现垂直居中 text-align: center; //实现水平居中 } <div class="item">垂直水平我都居中了。</div> //利用table布局。适用于多行居中。 .parent{ display: table; } .item{ display: table-cell; width: 200px; height: 200px; border: 1px solid #000; text-align: center; vertical-align: middle; } <div class="parent"> <div class="item">垂直水平我都居中了。</div> </div> 用纯CSS创建一个三角形的原理是什么？满屏 品 字布局 ?非满屏品字布局？三列布局，左右定宽，中间自适应？ <div class="content"> <div class="top">p1</div> <div class="left">p2</div> <div class="right">p3</div> </div> //满屏品字布局 *{ margin: 0; padding: 0; } .top{ width: 100%; height: 100px; background: pink; } .left,.right{ float: left; width: 50%; height: 100px; background: yellow; } .right{ background:blue; } //非满屏品字布局 *{ margin: 0; padding: 0; } .top{ width: 100px; height: 100px; margin: 0 auto; background: pink; } .left,.right{ float: left; width: 100px; height: 100px; } .left{ margin-left: 50%; background:red; } .right{ background:blue; margin-left: -200px; } //三列布局，左右定宽中间自适应。本文采用的方法注意center放在最后面一个div <div class="content"> <div class="left">p1</div> <div class="right">p3</div> <div class="center">p2</div> </div> *{ margin: 0; padding: 0; } .center{ width: auto; background:pink; height: 100%; margin-left: 150px; margin-right: 200px; } .left{ background: #E79F6D; width:150px; float:left; } .right{ background: #77BBDD; width:200px; float:right; } //三列布局，利用flex布局 <div class="content"> <div class="left">p1</div> <div class="center">p2</div> <div class="right">p3</div> </div> *{ margin: 0; padding: 0; height: 100% } .content{ display: flex; } .left,.right{ width: 120px; height: 100%; background: green; } .center{ height: 100%; background: pink; width: 100%; }常见兼容性问题？
1.不同浏览器的标签默认的margin和padding不同：*{margin：0；padding：0} 2.块级元素float后，又存在margin-left/right时，IE6中显示margin比设置的大：只要在float的标签样式中加入 display:inline;将其转化为行内属性即可 3.设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度：设置overflow：hidden或者是将line-height设置为更小的高度。 4.图片默认有间距：使用float属性为img布局。
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
li标签之间的空白间隔是由于换行符导致的。所以最简单的办法是写li标签的时候不换行，但是不美观。
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？ 当在表格元素中使用时，设置visibility：collapse可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ 1.首先看display、position、float之间的关系。 display：none，则positon/float不起作用。 display不为none，看position是否是absolute/fixed，如果是的话，float不起作用，display按照block/table展示；如果不是的话，再看float的值，如果float为none，display同设置值。如果float不是none或者元素为根元素的时候，调整diaplay的值。 2.再看margin-collapse：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠对BFC规范(块级格式化上下文：block formatting context)的理解？ * BFC主要有这样3个特性：* 1.属于不同BFC的元素不会发生margin-collapse 2.BFC相当于一个隔离的盒子，不影响外部元素的布局，外部元素也不会影响内部盒子的布局。 3.块级格式化上下文不会重叠浮动元素， 触发BFC的条件： 1.float不为none 2.position为absolute/fixed的元素 3.display为table/table-cell/table-caption/inline-block 4.overflow不为visible清除浮动的方式 1.在浮动元素末尾添加一个空的标签，设置 clear:both 2.父元素设置overflow：hidden/auto 3.利用after伪元素：这里我们使用::after。添加一个类clear，在需要清除浮动时，只需要给父元素追加clear类即可 .clear::after { content:""; display:table; clear:both; }::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 双冒号表示伪元素，单冒号表示伪类。 ：:before将会在内容之前“添加”一个元素，而:：after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性
如果需要手动写动画，你认为最小时间间隔是多久，为什么？ **多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms **
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。 <div class="content"> <div class="top"></div> <div class="bottom"></div> </div> //绝对布局 *{ margin: 0; padding: 0; } .content{ width: auto; height: 200px;//演示方便，所以设置了一个高度 border: 5px solid #000; position: relative; } .top{ height: 100px; background: red; } .bottom{ position: absolute; top: 100px; right: 0px; left: 0px; bottom: 0px; background: green; } //flex .content{ display: flex; flex-flow: column wrap; border: 1px solid blue; } .top{ height: 100px; background: red; } .bottom{ background: green; } 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做） 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据style标签写在body后与body前有什么区别？ 写在body后面会重新渲染