CSS属性2
2017-07-19 本文已影响0人
Wensx
1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- text-align:center能将对应的元素居中；
- 作用在块级元素内的block元素和inline-block;
- 能让block元素和inline-block元素中的行内元素水平居中。
2.IE 盒模型和W3C盒模型有什么区别?
- IE盒模型：width=content+padding+border, 设置方式：box-sizing: border-box
- W3C盒模型：width=content, 设置方式：box-sizing: content-box
3.*{ box-sizing: border-box;}的作用是什么？
设置所有元素为IE盒模型。
4.line-height: 2和line-height: 200%有什么区别?
- line-height: 2 意思是将行高设置为本身文字高度的2倍,且继承给子元素的是行高倍数。
- line-height: 200% 意思是将行高设置为父元素文字高度的2倍，继承给子元素的是行高。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block既有inline元素的特性（不占一整行，宽度由内容决定），又有block元素的特性（可设置宽高及内外边距）
- 缝隙是由空白字符造成的，要去掉缝隙可以消除空白字符（书写元素时不换行），或者在设置父元素的字体大小为0。
- 使用vertial-align: top.
6.CSS sprite 是什么?
CSS sprite 是CSS精灵图，是将多个图片合并为一个图片，然后用background-position方式取用，好处是减少网络请求，减轻服务器负担；缺点是图片大小内容固定不变，添加更改图片时需要重新制作精灵图。
7.让一个元素"看不见"有几种方式？有什么区别?
- opacity: 0；透明度为0，元素在页面消失但是依旧占据空间
- visibility: hidden;和opacity: 0;与opacity类似，依旧占据空间
- display: none;消失，不占用位置
- background-color: rgba(0,0,0,0.2);将背景色设置透明背景色
