7. CSS常见样式2

2017-07-09 本文已影响0人 Joey的企鹅

Text-Align: Center

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

Text-align: cente.png

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

W3C模型.JPG

IE盒模型.JPG

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

Lineheight.png

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