CSS之块元素，行内元素，display转换，float布局对比

目录

1 元素分类

块元素

行内元素（内联元素）

行内块级元素(内联块元素)

空元素

2 display应用

3 inline-block布局 vs 浮动布局

相同之处

不同之处：

布局对比

应用场景

---

1 元素分类

块元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

块级元素的特点：

1. 块级元素会独占一行
2. 高度，行高，外边距和内边距都可以单独设置
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他的块级元素

常见块元素

* address - 地址 
    * blockquote - 块引用 
    * center - 举中对齐块 
    * dir - 目录列表 
    * div - 常用块级容易，也是css layout的主要标签 
    * dl - 定义列表 
    * fieldset - form控制组 
    * form - 交互表单 （只能用来容纳其它块元素） 
    * h1 - 大标题 
    * h2 - 副标题 
    * h3 - 3级标题 
    * h4 - 4级标题 
    * h5 - 5级标题 
    * h6 - 6级标题 
    * hr - 水平分隔线 
    * isindex - input prompt 
    * menu - 菜单列表 
    * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 
    * noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） 
    * ol - 排序表单 
    * p - 段落 
    * pre - 格式化文本 
    * table - 表格 
    * ul - 非排序列表

行内元素（内联元素）

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

行内元素的特点：

1. 和相邻的行内元素在一行上
2. 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
3. 默认的宽度就是它本身的宽度
4. 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

注意：

- 只有文字才能组成段落，因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素；因为它们都是文字块级标签，里面不能再存放其他的块级标签。

- 链接里面不能再存放链接

常见行内元素;

•   <span>...</span>
•   <a>...</a>  链接
•   <input>...</input>  文本框
•   <textarea>...</textarea>  多行文本
•   <select>...</select>  下拉列表
•   <img >  图片
•   <del>...</del>  删除线
•   <u>...</u>  下划线
•   ^...  上标
•   _...  下标
•   <i>...</i>  斜体
•   <em>...</em>  斜体（强调性）
•   <br>  换行
•   <b>...</b>  加粗
•   <strong>...</strong>  加粗（强调性）

行内块级元素(内联块元素)

即支持所有css属性，又可以在同一行显示

行内块级元素的特点：

1. 和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
2. 默认的宽度就是本身内容的宽度
3. 高度，行高，内边距和外边距都可以设置

在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性

常见元素

* applet - java applet　　 
    * button - 按钮　　 
    * del - 删除文本　　 
    * iframe - inline frame　　 
    * ins - 插入的文本　　 
    * map - 图片区块(map)　　 
    * object - object对象　　 
    * script - 客户端脚本

空元素

例：br    hr    meta    link   等...

注：所有写在body标签中的都有 title属性，br除外。

行元素只能嵌套行元素，不能嵌套其他元素，块元素可以嵌套任何元素。

2 display应用

这三种元素，我们通过display属性来相互变换，实际中块元素用的最多，所以有时候通常是吧内联元素转化为块元素

display:none 元素隐藏不占位
display:block 以块元素展示
display:inline_block 以内联块元素展示
display:inline 以内联元素展示

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

 

display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。

3 inline-block布局 vs 浮动布局

 a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

    b.相同之处：能在某程度上达到一样的效果

相同之处

①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。

②float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕状排列。

两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。

不同之处：

1、文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

2、水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

4、空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

5、IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。

布局对比

图一：display：inline-block

图二：对两个孩子使用float：left，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：

乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）

.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：

从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。

inline-block因为具有行内元素的特性，所以可以通过设置父元素的text-align来使其水平居中。垂直方向默认是按照父元素的基线来基线（vertical-align:baseline)排列，可以通过元素自身的vertical-align来设置。

inline-block存在的小问题：

a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

b.去除空隙的方法：
　　1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
　　现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的

c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
　　在ie6/7下：
　　对于行内元素直接使用{dislplay:inline-block;}
　　对于块级元素：需添加{display:inline;zoom:1;}

应用场景

场景：

①inline-block： 当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树。理论上会增加性能消耗。这样也不用像float那样麻烦，需要清除float.

②float： 即使inline-block为布局首选，但是也有inline-block所不能涉及的一些业务需求，比如：有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现，对于新手来说，会纠结float不好调，比较麻烦，想到达到预期效果，需要多次调整，有时候我们给元素设置了浮动，元素显示的顺序却变了，一时搞不清楚就改变HTML中元素的前后顺序等等。因为浏览器的解析顺序是逐行解析，当设置两个元素的右浮动时，顺序在前面的元素会先被解析，他是右浮动，那么在前边的元素就先往右浮动占位置，后边的元素依次被解析到以后，才往右排列，这样我们看到的顺序就是反的，当弄明白原因之后，调试就方便多了。