1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?
text-align:center;作用是让文本的对齐方式为居中,作用在行内元素上,能设置文本和img等行内元素居
中,也对inline-block元素有作用。
2.IE 盒模型和W3C盒模型有什么区别?
IE 盒模型中设定的 width 宽度包括 content、padding、border 三部分的宽度;
W3C 盒模型中设定的 width 宽度仅包括 content 自身,不包括 padding 和 border 部分的宽度
3.*{ box-sizing: border-box;}的作用是什么?
设置所有 CSS 的盒模型遵从 IE 盒模型的标准,此时在 CSS 设置的属性中,width 将包括内容宽度 + 内边距宽度 + 边框宽度,不再遵循 W3C 盒模型的标准。
4.line-height: 2和line-height: 200%有什么区别?
line-height: 2 :设置行高为本身文字高度的两倍
line-height: 200% :设置行高为父元素文字高度的两倍
5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- inline-block 可以使得元素拥有行内元素“不占据一整行,宽度由内容宽度决定”特性的同时,又呈现出块级元素“可设置宽高内外边距”的特性。
- 为解决缝隙问题,可以让两个行内元素紧邻到一起,如:
`<span class="box"></span><span class="box"></span>`
也可以设置两个行内元素所占块的字体大小为零,如:
``` <div style="font-size: 0">
<span class="box b1"></span>
<span class="box b2"></span>
</div>
```
6.CSS sprite 是什么?
CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS的"background-position","background-image","background-repeat"的组合进行背景定位.
其优点在于:
- 减少网页的http请求,提高性能,这也是CSS sprites最大的优点,也是其被广泛传播和应用的主要原因;
- 减少图片的字节:多张图片合并成1张图片的字节小鱼多张图片的字节总和;
- 减少了命名困扰:只需要对一张集合的图片命名,不需要对每一个元素进行 命名提高制作效率;
更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便.
其缺点在于:
- 图片合成比较麻烦;
- 背景设置时,需要得到每一个背景单元的精确位置;
- 维护合成图片时,最好只是往下加图片,而不要更改已有图片.
7.让一个元素"看不见"有几种方式?有什么区别?
- opacity: 0 ; 整体透明度为0,但是元素位置依然保留,其它元素不会占据该元素所在的位置;
- visibility: hidden ; 和opacity:0 类似
- display: none; 元素消失,不占用位置,其它元素会占用该元素所在的位置
- background-color: rgba(0,0,0,0.2) 只会改变背景色,不会变元素的颜色
- height: 0; overflow: hidden;不占据空间,无法点击