一、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是使文本居中
- 在父元素中写入，可以使该元素下所有文本子元素居中（包括块级元素p，h，和行内元素span），但是不是文本元素就不会居中，例如示例中的box
- 直接对文本块级元素写入，例如直接在p和h1~h6元素写入，该文本会居中
- 直接对行内元素写入，不会居中，例如示例中的span，直接写入没有效果
总结：text-center作用于所有文本元素，但是对于行内元素，需要写在它的父元素上，直接则无效；
二、IE 盒模型和W3C盒模型有什么区别?
对于两种模型这里有一张图：
可以看到IE的盒模型与W3C盒模型的区别在于宽高的计算
- w3c盒模型的宽高是以内容为基准计算的，宽高=内容
- 而IE盒模型是以border为基准计算，宽高=内容+padding+border
三、*{ box-sizing: border-box;}的作用是什么？
box-sizing是css3的新样式，有两个值
- box-sizing：content-box；标准盒模型（浏览器默认样式）；
- box-sizing：border-box；IE盒模型
- 默认情况下（content-box），实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）
- 如果设置了border-box， 实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
总结：设置这个属性，更容易计算位置，并且更符合我们对于盒子的定义，使排版更容易计算。
四、line-height: 2和line-height: 200%有什么区别?
可以很清楚的看到，两个h2的行高是不一样的
- line-height:2;对于本身文字高度的2倍（只与自己有关，与父元素无关）
- line-height:200%;它父容器（父元素）文字高度的两倍，是一个已经计算好的定值，可能会导致重合。
- 继承上的区别：如果行高继承不带单位，那么它会先继承行高，再根据当前子元素的字体大小来计算行高；反之，如果行高继承是带有单位，那么它将先计算行高，接着再让子元素继承。详细请戳
五、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 既展现inline（内联元素）的特性（不占据一整行，宽度由内容宽度决定）
- 又呈现block（块级元素）的特性（可设置宽高，内外边距）
- 但是两元素之间会呈现缝隙，是因为空白字符导致
消除空白缝隙的方法:（示例见上图）
- 消除两个元素之间的空白字符
- 设置父元素的字体大小为0，然后在该元素中重新设置字体大小
高度不一样的inline-block如何顶端对齐
vertical-align:top
六、CSS sprite 是什么?
CSS Sprite就是将多个背景图片拼合到一个图片上。然后在CSS里通过position定义到该图片上，实现多个位置的背景，一张图片搞定 。其最大的优点在于减少网页的http请求，提高网页性能。
七、让一个元素"看不见"有几种方式？有什么区别?
- opacity:0;将元素透明度设置为0后，用户眼中是不存在的（所有元素不可见），但实际存在，并且浏览器知道且保留它占据的空间。
- visibility:hidden;与上类似，浏览器知道它存在，保留其占据的空间。
- display:none;与前两个有很大的不同，元素将在页面上将彻底消失，且浏览器也当它不存在，不会保留其空间，元素本来占有的空间则会被其他元素占有。
- background-color:rgba(0,0,0,0)与opacity:0;不同，它只是设置背景透明，其它元素可见
点击此处更详细
网友评论