一、IE 盒模型和W3C盒模型有什么区别?
W3C盒模型中padding,border所占的空间不在width,height范围内。content-box:width == 内容区宽度
IE 盒模型width包括content尺寸+padding+border
border-box:width == 内容区宽度 + padding宽度 + border宽度
二、line-height: 2和line-height: 200%的区别
都是表示行高是字体大小的两倍，但是当他们放在父级元素上时，有区别：
-
line-height: 2是表示子元素的行高是自身高度的2倍，是相对大小。
若子元素的字体大小不同，行高也会不同 -
line-height: 200%浏览器会立即算出行高的具体值，假如父元素的默认字体大小是16px，那么计算的行高就是2*16=32px，子元素的行高都会 继承这个行高，是固定大小。
若子元素的字体大小不同，行高都是固定的某个值
三、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
-
即呈现inline特性（不占据一整行，宽度由内容宽度决定）。又呈现block特性（可设置宽度，内外边距）。
-
①将标签之间的空格去掉不转行。如
<span class="box">hello</span><span class="box">hello</span>
②使用font-size:0。如
.wrap{
font-size:0;
}
.box {
display:inline-block;
border: 1px solid;
width: 100px;
font-size: 14px;
}
- vertical-align: top
四、让一个元素"看不见"有几种方式？有什么区别?
- display: none;元素在页面上将彻底消失
- visibility: hidden;元素在页面消失后，其占据的空间依旧会保留着
- opacity: 0;将元素的透明度设置为0,依旧占据着空间
- 将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0
- 设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
- 设置元素的position与z-index，将z-index设置成尽量小的负数
五、CSS sprite （雪碧图/精灵图）是什么?
是一种网页图片应用处理方式。允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
网友评论