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
网友评论