css-块元素、内联元素、内联块元素

元素就是标签，

布局中常用的有三种标签，块元素、内联元素、内联块元素，了解了这三种元素的特性，才能熟练的对页面进行布局。

1.块元素

块元素（会占据文档流一行显示），也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd、ol 等等都是块元素。，它在布局中的行为：支持全部的样式。如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。

如图，两个div各自占据一行。

块元素转换为内联元素。display:inline(转换之后，无法设置宽高，大小跟随内容决定，且不会占据一行显示）

如上图所示，原本H1标题占据一行显示，转换为内联元素后后面的冒号并排显示，且大小不生效。

2.内联元素（inline，不会占据文档流一行显示，并且其不能设置宽高，大小是由内容决定）

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i 等等都是内联元素。

它们在布局中的行为： Ø 支持部分样式（不支持宽、高、margin上下、padding 上下）Ø 宽高由内容决定 Ø 盒子并在一行 Ø 代码换行，盒子之间会产生间距Ø 子元素是内联元素，父元素可以用text-align 属性设置子元素水平对齐方式，用line-height 属性值设置垂直对齐方式

将内联元素转换为内联块元素。display:inline-block(转换后可并排显示）

例：

将内联元素转换为块元素。display:block（转换后占据文档流一行显示）

 

 

解决内联元素间隙的方法
         1、去掉内联元素之间的换行

  2、将内联元素的父级设置 font-size 为 0，内联元素自身再设置 font-size 

 

 

3.内联块元素（块元素转换为内联块元素后可以显示文档流一行）

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img 和input元素的行为类似这种 元素，但是也归类于内联元素，我们可以用 display 属性将块元素或者内联元素转化成这种元素。它们在布局中表现 的行为：
Ø 支持全部样式 Ø 如果没有设置宽高，宽高由内容决定
Ø 盒子并在一行 Ø 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用 text-align 属性设置子元素水平对齐方式，用 line-height 属性值设置子元素垂 直对齐方式
这三种元素，可以通过 display 属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转 化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

举栗：

如何让这两个div元素水平排列？

我们将第一个div块元素转换为内联块元素。

转换之后两个元素之间明显出现一道缝隙，但没有水平排列。

 

 

将两个块元素通过display:inline-block都转换为内联块元素之后，水平排列完成。（两个元素之间的缝隙为默认5px的间距）

给予第二个元素“margin-left:-5px”之后，缝隙消失。

如图

display 属性*
display 属性是用来设置元素的类型及隐藏的，常用的属性有：

1、none 元素隐藏且不占位置

2、block 元素以块元素显示
       3、inline 元素以内联元素显示

4、inline-block 元素以内联块元素显示