text-align:center的作用是什么,作用在什么元素上?
让元素在页面水平居中;作用在block元素上;能让inline-block和inline元素水平居中;
IE盒模型和W3C盒模型有什么区别
IE盒模型和W3C盒模型的区别是宽和高的组成:
- IE盒模型的宽和高由 border 、padding 、content 三个元素相加而成;
- W3C盒模型的宽和高就是 content 区的宽和高, border 和 padding 影响。
* { box-sizing: border-box;}的作用是什么?
将所有盒模型设为IE盒模型。
line-height: 2和line-height: 200%有什么区别?
-
line-height: 2
是以元素本身的字体大小计算行高值,随着该元素字体大小的变化而变化,自适应性更好; -
line-height: 200%
是以父元素的字体大小计算行高值,不会跟随本元素变化,当本元素的字体过大时,由于行高不变文字会挤在一起,自适应性差。
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block
既呈现 inline 特性(不占据一整行,宽度由内容宽度决定),又呈现 block 特性 (可设置宽高,内外边距)。
去除缝隙的方法:
- 在两个
inline-block
间不加空白或折行; - 如果有空白或折行,将父元素的
font-size
设为0
,再对inline-block
元素分别设置font-size
值。
CSS sprite 是什么?
CSS sprite即是CSS精灵图,它将不同的图片/图标合并在一张图上,以达到减少网络请求、提高网页加载性能的目的。
让一个元素"看不见"有几种方式?有什么区别?
-
opacity: 0;
透明度为0,整体透明,但仍然占用位置; -
visibility: hidden;
和opacity:0 类似; -
display:none;
消失,不占用位置; -
background-color: rgba(0,0,0,0)
背景色透明;