text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align: center可以作用于行内元素上,使该元素于行内水平居中。
IE 盒模型和W3C盒模型有什么区别?
IE盒模型的width包含了左右border、左右padding和主体content的宽度;
而W3C盒模型(即标准盒模型)的width等于content的宽度。
*{ box-sizing: border-box;}的作用是什么?
将盒模型的border和padding加在width内,相当于将W3C盒模型变成了IE盒模型。
line-height: 2和line-height: 200%有什么区别?
当赋予父元素line-height: 2时,子元素会直接继承line-height: 2,再和自身字体大小相乘得到最终行高;
当赋予父元素line-height:200%时,会先计算出父元素的具体行高,子元素直接继承父元素的行高值。
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block元素既有块级元素可以设置宽高和内外边距的特性,又有行内元素前后不换行的特性。
去除inline-block元素之间的间隙大致有以下几种方法:
1、移除Html标签段之间的空格,类似如下的代码写法:
2、取消标签闭合,单位了兼容IE6/IE7,最后一个标签需要闭合;
3、使用margin负值,具体数值与字体大小有关;
4、使用font-size或letter-space,即在外层添加“font-size: 0;”或“letter-spacing: -2px;”,其中letter-spacing的数值需要根据字体大小调整。
利用vertical-align: top; 可以使高度不一样的inline-block元素顶端对齐。
CSS sprite 是什么?
即我们通常所说的精灵图。
在我们制作较复杂的网页时,可能涉及到很多体积较小的图片,如果分别设置,会增加对服务器的请求数,加重服务器的负担,用户打开网页时也可能会造成加载速度缓慢。
因此,我们将这些图片合并成为一张较大的图片,在网页的特定位置上只需要展示这张大图中对应的位置即可。这样做既能减轻服务器的负担,也能增强用户体验。
让一个元素"看不见"有几种方式?有什么区别?
1、display: none; //直接让元素彻底消失,既不占页面空间,也不会触发点击事件;
2、width: 0; height: 0; overflow: hidden; //设置元素宽高为0,且隐藏元素内的内容和子元素,既不占页面空间,也不会触发点击事件;
3、position: absolute; left: 100%; //设置元素绝对定位,将元素移出屏幕,既不占页面空间,也不会触发点击事件;
4、z-index: -999; //设置元素位于最底层,且必须有其它元素将其覆盖才能实现不可见,既不占页面空间,也不会触发点击事件;
5、visibility: hidden; //此种方法隐藏后元素依然占据页面空间,但无法触发点击事件;
6、opacity: 0; //设置元素完全透明,透明的元素依然占据页面空间,且依然会触发点击事件。