<style>
div{
float:left;
width:80px;
height:80px;
background:#FFCC00;
}
p{
clear:both;
margin-top:15px;
}
</style>
<section>
<div></div>
<p>已设置上外边距</p>
</section> 1.执行上面代码·，虽然给p元素定义了15px的上外边距，为什么失效了？
答：浮动元素会脱离正常流，clear属性会让元素增加上外边距，使其在浮动元素的下面。在上面代码中，浮动元素的高是80px,所以clear属性会给p元素增加80px的上外边距，比定义的15px要大，因此最终的上外边距是80px，正好在浮动元素的下面。
2.绝对定位和浮动有什么异同？
答：都会脱离正常流，改变元素盒类型，将元素变为块级元素，同时都能创建BFC。
| 不同点 | 绝对定位 | 浮动 |
| 包含块 | 离它最近的position属性不为static的祖先元素的内容区域 | 离它最近的块级祖先元素的内容区域 |
| 兄弟元素的影响 | 原先所占的空间会被删除，不影响兄弟元素 | 影响兄弟元素的位置和样式 |
| 摆放位置 | 可摆放在任意位置 | 不能超出包含块的内容区域，并且向上浮动也会受限制 |
| z-index | 可设置任意整数或auto | 无法设置，默认为0 |
A.当border为none的时候，边框无外观
B.当border为0的时候，边框宽度为0
C.当border为none的时候，边框宽度为0
D.只要定义了边框宽度，就能显示边框
答案：CD
4.如何用纯CSS的方式让超出容器宽度的文本自动替换为省略号？
答：可以使用text-overflow属性，这个属性用于显示内容溢出时的省略标记，但是使用之前，得满足三个条件，容器要有明确的宽度，强制在一行显示以及隐藏溢出内容。可设置为clip;ellipsis,“;”。
5.字体风格（font-style）有两个关键字，分别是italic和oblique，他们有啥区别？
答：italic会对文字的结构做些改动，得到一种斜体字体，而oblique不会修改文字结构，仅仅倾斜字体。
6.在css中，可以将line-height设置为纯数字或百分数，这两种赋值方式有什么区别？
p{
font-size:20px;
line-height:1.2;
line-height:120%;
} 答：数字和百分数都需要与字体大小相乘才能得到真实的行高，在上面的CSS规则中，p元素的真实行高是24px，他们主要的区别在继承方面，如果父元素的行高是数字，那么子元素继承的也是这个数字，如果父元素的行高是百分数，那么子元素继承的是经过计算后的真实行高。 7.背景图像可以用Data URI描述，什么是Data URI？
答：Data URI可以将外部资源（例如图像）经过Base64编码后，嵌入到其他文档中，可减少额外的HTTP请求。Data URI由协议，MIME类型（可选），Base64编码设定（可选）和内容组成，格式如下
data:[<mime type>][:base64],<data>
虽然使用Data URI减少了一次HTTP请求，但它会让嵌入的文档体积膨胀，影响浏览器渲染，并且还会降低Gzip的压缩效率，破坏资源的缓存，所以在使用它的时候需要权衡利弊。
8.什么是CSS Sprite，有何利弊？
答：CSS sprite是一种图像处理技术，将零散的小图标整合在一起，形成一张大图，这张图可称为雪碧图或精灵图。当用这张大图做背景图像时，可以利用background-position属性进行背景定位，找到想要的小图标。这么处理图像，不但可以解决命名困扰，还能减少HTTP请求数和图像字节数，提升网页性能，但制作和维护这张图比较繁琐，当加一个小图标的时候，必须修改原图，还不能破坏原先图标的位置。
9.过渡与动画的区别是什么？
答：
1.过度只能指定元素的初始状态和结束状态，而动画需要通过关键帧，可以控制变化过程中的更多状态（即更多阶段）
2.动画不需要触发条件，当HTML文档和相关样式载入完成后，就能立即执行。
3.动画的子属性比过渡多，可以控制动画的循环次数，播放次数以及动画状态。
10.如果用js中的setTimeout()函数来实现动画，那么执行函数的事件间隔设置成多久比较合理？
答：一般情况下屏幕频率为60Hz,也就是每秒刷新60次，合理的时间间隔就是16.7ms， 1000/60=16.7ms.
11.什么是响应式设计？
答：响应式设计，可根据不同设备的可视区域改变网页布局，展现不同的设计风格，力求在当前设备中达到最完美的效果，减少用户浏览网页的额外操作（例如缩放、平移或滚动等）
京公网安备 11010502036488号