css清除浮动的方法
<h4>清除浮动有哪几种方法</h4>
<ul>
<li>父集定义height</li>
<li>结尾处加空div标签clear:both</li>
<li>结尾处加br标签clear:both</li>
<li>父级div定义overflow:hidden</li>
<li>父级div也浮动，需要定义宽度</li>
<li>父级div定义伪类：:after 和 zoom
<pre><code class="language-javascript">.mainBox:after{
display: "block";
clear:both;
height:0;
content: "";
visibility: hidden;
overflow:hidden;
}</code></pre>
<h4>display有哪些值？说明他们的作用？</h4></li>
<li>block 块类型元素展示</li>
<li>none 缺省值，像行内元素一样显示</li>
<li>inline-block 像行内元素一样显示</li>
<li>table 此元素会做块级表格来显示</li>
<li>inherit 规定应该从父元素继承display的值</li>
</ul>
<h4>介绍一下标准的CSS盒模型？</h4>
<ul>
<li>有两种：IE盒子模型、W3C盒子模型</li>
<li>盒模型：内容（content）、padding、margin、border</li>
<li>区别： IE的content部分把border和padding计算进去了</li>
</ul>
<h4>position的值</h4>
<ul>
<li>absolute生成绝对定位，相对于static定位以外的第一个父元素进行定位</li>
<li>fixed:生成绝对定位的元素，相对于浏览器窗口进行定位</li>
<li>relative:生成相对定位的元素，相对于其正常位置进行定位</li>
<li>static 默认值。没有定位，元素出想在正常流中</li>
<li>inherit 规定父元素继承position属性的值。</li>
</ul>
<h4>::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用</h4>
<ul>
<li>单冒号（:）用于css3伪类，双冒号（：：）用于CSS3微元素</li>
<li>主要是区别：伪类和伪元素</li>
</ul>
<h4>如果需要手写动画，你认为最小时间？</h4>
<ul>
<li>多数显示器默认频率 是60HZ即1秒刷新60次，所以理论上的最小间隔1/60*1000ms = 16.7ms</li>
</ul>
<h4>CSS在优化性能方面的实践</h4>
<ul>
<li>css压缩与合并、Gzip压缩</li>
<li>css文件放在head里、不要用@import</li>
<li>尽量用缩写、避免用滤镜、合理使用选择器</li>
</ul>
<h4>base64的原理及优点</h4>
<ul>
<li>优点：可以加密、减少http请求</li>
<li>缺点： 消耗CPU进行编解码</li>
</ul>