CSS 8.2 高级-关于行内元素，块元素，行内块元素的width height margin padding特性

CSS 8.2 高级-关于行内元素，块元素，行内块元素的width height margin padding特性

 

一、元素分类

	元素排列	宽高设置	默认宽度	默认高度
块级元素 div p h ul li	换行，一行一个	可以设置宽高	父元素的100%	内容的高
行内元素 span a em strong	不换行，一行多个	不可以，是内容本身宽高	内容的宽	内容的高
行内块元素 img input select option textarea	不换行，一行多个	可以设置宽高	内容的宽	内容的高

类型转换 ：

修改元素的diaplay属性：block / inline / inline-block  块/行内/行内快

例如

 a {
     display:inline-block;

     font-size:14px;

     width:120px；  text-align:center;   //水平居中

     padding:4px;   //竖直居中

   }

二、margin padding

1.块级元素 例如：div p

width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。

2.行内块元素 例如：img

width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。

3.行内元素（重点） 例如span a 等

width、 height不起作用，用line-height来控制高度。

padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)

margin左右作用起作用，上下不起作用，原因在于：行内元素的外边距不会改变一个元素的行高（《css权威指南》 P227）