关于CSS的常见样式问答2
2017-03-28 本文已影响0人
ninc
- text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是使块元素中的行内元素水平居中排列。
作用在块元素上，让行内元素水平居中。 - IE 盒模型和W3C盒模型有什么区别?
- IE盒模型的宽度和高度算的是内容加内边距加边框的宽度和高度
- W3C盒模型的宽度和高度算的是内容的宽度和高度
- *{ box-sizing: border-box;}的作用是什么？
使所有元素遵循IE盒模型的标准 - line-height: 2和line-height: 200%有什么区别?
- line-height: 2的意义是使当前元素行高等于当前元素字体尺寸的2倍，可继承，对继承的子元素遵循同样法则。
-line-height: 200%的意义是使当前元素行高设置当前元素字体尺寸200%的像素值x，比较不人性化，对于继承的元素行高等于最初的那个像素值x。
- inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 既具有inline的特性，不占据一整行，宽度由内容宽度决定。又具有block的特性，可设置宽高，内外边距。
- 可以使用删除两个行内元素标签之间的空白的方式解决；也可使用设置字体大小为0的方法实现。这个方法具体是这样：在行内元素添加一个块元素，对块元素字体设置为0，然后在分别设置行内元素正常的字体大小。
- 使用vertical-align: top;的方式实现。
- CSS sprite 是什么?
CSS sprite又称CSS精灵图或者雪碧图。主要用途是将网页上要使用的一些小图标集中放置在一张图片上，起到减少加载页面的图片请求的作用。 - 让一个元素"看不见"有几种方式？有什么区别?
- opacity: 0 ; 设置透明度为0，但是元素还是会占位置
- visibility: hidden ; 同上
- display:none; 不放置这个元素，元素不占用位置，彻底在页面上消失了
- background-color: rgba(0，0，0，0) 设置背景色透明，只针对背景色
