text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
使块级元素内容水平居中;也可以使行内元素水平居中。
IE 盒模型和W3C盒模型有什么区别?
- IE盒模型-范围含有 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。(ie6,7,8)浏览器中如果不加
dctype html
声明则浏览器会默认使用IE盒模型。 - W3C标准盒模型-范围含有 margin、border、padding、content,并且 content 部分不包含其他部分。
*{ box-sizing: border-box;}的作用是什么?
- box-sizing:border-box; 是CSS3新增属性,了解这个属性,我们先从块级元素的盒子大小说起,通常一个块级元素实际所占宽高度=外边距(margin)+ 边界宽度(border-width) + 内边距(padding)+ 高度(height) / 宽度(width)
如果设置了border-box,实际所占宽高度 = 设置的高度(height)/ 设置的宽度(width)+ 外边距(margin)。
使得排版更加方便计算。
line-height: 2和line-height: 200%有什么区别?
- 不加单位的line-height是相对于各个元素本身的文字大小,这里设置为2是设置各个元素的line-height的两倍。
- 加单位的line-height是相对于父容器的文字大小。
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- 既呈现inline属性(不占据一整行,宽度由内容决定);又呈现block属性(可设置宽高,内外边距)。
- 去除缝隙:可以删除inline-block元素HTML代码之间空隙。也可以在外层加一个父容器(例如:div),然后设置这个父容器的font-size:0即可。(注意要在inline-block元素中重新定义字体大小)
- 高度不一样,可以设置vertical-align: top;某些情况下可以直接用浮动。(注意清浮动)
CSS sprite 是什么?
CSS精灵图(俗称雪碧图)。是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。
其优点在于:
- 减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
- 减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和;
- 减少了命名困扰:只需对一张集合的图片命名,不需要对每一个小元素进行命名提高制作效率;
- 更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便。
诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点:
- 图片合成比较麻烦;
- 背景设置时,需要得到每一个背景单元的精确位置;
- 维护合成图片时,最好只是往下加图片,而不要更改已有图片;
- 无法缩放。
让一个元素"看不见"有几种方式?有什么区别?
-
display:none
元素不可见,也不占用页面上的空间。 -
visibility:hidden
即使不可见的元素也会占据页面上的空间。 -
opacity:0;
设置元素的透明度为0,而且会占用页面空间。(为了兼容IE也会在后面加上filter:alpha(opacity=0)
) -
background:rgba(0,0,0,0)
设置背景色为透明。(仅对无内容的元素) -
height:0;overflow:hidden
直接设置高度为零,简单粗暴。