7. CSS常见样式2

Text-Align: Center

text-align: center 作用在块级元素上，可以使块级元素内的文字、图片、和行内元素水平居中，但不能使块级元素居中。同样可以作用于inline-block。且，可继承。
测试示例

Text-align: cente.png

盒模型

有IE盒模型和W3C盒模型。
二者的区别是：

• W3C盒模型设置width和height时，设置的为content。
• IE盒模型设置width和height时，设置的为(content+padding+border)。

W3C模型.JPG

IE盒模型.JPG

Box-Sizing

CSS3中提供了一个新样式：box-sizing，他的值一般为conten-box或border-box。

• border-box：
  padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )，高同理。
• content-box：
  padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )，高同理。
  参考

Line-Height

line-height：行高，其值可以为3种：倍数，百分比，固定值（单位px）。
若值为倍数，表示为其对应文字高度的相应倍数。
若值为百分比，则表示为其父元素文字高度的相应百分比。

Lineheight.png

Inline-Block

• 特性：
• 既有inline-level的特性：不占据一整行，宽高由内容的宽高决定;
• 又有block-level的特性：可设置属性width、height、margin、padding.
• 如何去除inline-block元素之间的空隙：
• 取消inline-block元素之间的回车、空格；
• 父元素的CSS设置font-size: 0，然后元素本身再重设字体；
• 高度不一样的inline-block元素如何顶端对齐
  inline-block元素由于还具有行内元素的一些特征，故其对齐方式为文字底部对齐。
  但可以通过在CSS中设置vertical-align来实现顶端对齐或底部对齐。

Inline-block.png

JSBin地址

CSS Sprite

CSS Sprite即CSS精灵图，将众多图标、图片合成到一张图片上，通过CSS属性background-position去显示想表现的图块。

• 优点：减少网页请求、提高网页加载性能；
• 缺点：图片大小无法缩放、不好修改。

让一个元素"看不见"的几种方式

• display: none;元素消失，不占用位置。
• visibility: hidden;元素隐藏，本身存在但用户看不到，占用文档流的位置。
• opacity: 0;透明度为0，与visibility :hidden类似，在文档流中占用位置。
• background-color: rgba(0,0,0,0);只是背景色透明。

代码

• 代码1 CSS精灵图

精灵图.png

• 代码2 字体图标

iconfont.png