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

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

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，

1、块元素

块元素，也可以称为行元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度

常见的块元素：

◎ center - 居中对齐块

◎ dir - 目录列表

◎ div - 常用块级容器，也是css layout的主要标签

◎ dl - 定义列表

◎ form - 交互表单

◎ h1 - 大标题

◎ h2 - 副标题

◎ h3 - 3级标题

◎ h4 - 4级标题

◎ h5 - 5级标题

◎ h6 - 6级标题

◎ hr - 水平分隔线

◎ ol - 排序表单

◎ p - 段落

◎ pre - 格式化文本

◎ table - 表格

◎ ul - 非排序列表（无序列表）

2、内联元素

内联元素，也可以称为行内元素，

它们在布局中的行为：

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

常见的内联元素：

◎ a - 超链接

◎ b - 粗体(不推荐)

◎ big - 大字体

◎ br - 换行

◎ em - 强调

◎ font - 字体设定(不推荐)

◎ i - 斜体

◎ img - 图片

◎ input - 输入框

◎ label - 表格标签

◎ small - 小字体文本

◎ span - 常用内联容器，定义文本内区块

◎ strong - 粗体强调

◎ sub - 下标

◎ sup - 上标

◎ textarea - 多行文本输入框

◎ u - 下划线

解决内联元素间隙的方法

1、去掉内联元素之间的换行

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

3、内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img 和input 元素的行为类似这种元素，但是也归类于内联元素，我们可以用 display 属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

1、支持全部样式

2、如果没有设置宽高，宽高由内容决定

3、盒子并在一行

4、代码换行，盒子会产生间距

子元素是内联块元素，父元素可以用 text-align 属性设置子元素水平对齐方式， 用 line-height 属性值设置子元素垂直对齐方式

这三种元素，可以通过 display 属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联 元素时，直接使用内联元素，而不用块元素转化了。

4、块元素与内联元素的转换

display: inline;			/*将块元素转换为内联元素*/
display: block;				/*将内联元素转换为块元素*/
display: inline-block;			/*元素以内联块元素显示*/

5、css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式， 设置的方法是通过 overflow 属性来设置。

overflow 的设置项：

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。

2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清

除margin-top 塌陷的功能。

3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

5、inherit 规定应该从父元素继承 overflow 属性的值。