CSS常见样式（下）

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align：center的作用是能够达到让元素中的文本水平居中的效果；作用于行内元素上，能让父元素里面的子元素水平居中

IE 盒模型和W3C盒模型有什么区别?

• IE盒模型的width=content+padding+border

  
  例

• 标准盒模型的width=content

  
  例

*{ box-sizing: border-box;}的作用是什么？

• box-sizing：boeder-box是一个CSS3的新样式，作用是为了计算方便，能够按照IE盒模型的计算方法来计算

line-height: 2和line-height: 200%有什么区别?

• ling-height: 2表示的是行高为字体大小的两倍（由字体的高度来决定）；
• line-height: 200%表示的是行高为父元素行高的2背（由父元素的行高来决定）

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• inline-block既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可设置宽高，内外边距）

如何去除缝隙

• 产生缝隙的原因是浏览器会把换行当做一个空格，这样显示出来就出现一个缝隙
• 将换行符去掉，将空白字符去掉
• 将空白字符的字体大小设置为0

高度不一样的inline-block元素如何顶端对齐

• 给元素设置vertical-align： top;来达到顶端对齐

CSS sprite 是什么?

• CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background-image","background- repeat","background-position"的组合进行背景定位

让一个元素"看不见"有几种方式？有什么区别?

• 给元素设置opacity: 0 ; 透明度为0；元素整体透明（元素存在，占位置）
• 给元素设置visibility: hidden ; 和opacity:0 类似（元素存在，占位置）
• 给元素设置display:none; （元素消失，元素不占用位置）
• background-color: rgba(0，0，0，0.2) 只是背景色透明（只针对背景色）

代码作业1
代码作业2