块级元素、内联元素、内联块级元素的比较

块级元素、内联元素、内联块级元素

1、级元素水平拉伸，垂直包裹。可以设置 width, height属性。块级元素会独占一行，其宽度自动填满其父元素宽度，块级元素即使设置了宽度，仍然是独占一行的。

内联元素自动包裹，水平和垂直方向会自动包裹至内容的宽度。设置width,  height无效。不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。

2、块级元素可以设置margin和 padding。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

3、块级元素可以设置overflow。内联元素overflow属性无效。

4、块级元素可以设置float。内联元素float属性无效。

内联块级元素:①既具有内联元素自动包裹的特性外，还具有块状元素可以设置width和height的特性。 ②可以通过设置它的margin来改变其layout，但是内联块状元素的margin不与其他元素的margin交叠合并。

常用的块状元素： 

<div><h1>-<h6><ul><ol><li><dl><dt><dd><hr><ul><p><tabel><thead>

<tbody><tfoot>

常用的内联元素： 

<a><b><i><span><em><label><strong><img><input><tr><th><td>

 

可变元素（可变元素为根据上下文语境决定该元素为块元素或者内联元素。）

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 图片区块(map)

object - object对象

script - 客户端脚本

display:block   

支持padding,margin,width,height,float,overflow等属性  

@ 默认 width:100%; height:auto; overflow:hidden;

 

display:inline   

支持padding,margin-left,margin-right等属性             

@ 可以通过 display:block/ float:left  转换为块状元素。不同的是float会导致器改变对齐。

 

display:inline-block  

支持padding,margin,width,height,float,overflow等属性 

常见display值

 

常见overflow值