CSS 块元素,行内元素,行内块元素及元素之间转换

元素的显示模式

元素一般分为块级元素和行内元素

元素种类	排列	设置样式	默认	包含
块元素	独占一行	可以设置宽高	容器的100%	可以包含任何标签
行内元素	一行可以放多个行内样式	不可直接设置宽高	根据内容改变宽高	可包含文本或其他行内样式
行内块元素	一行可以放多个	可以设置宽高	根据内容改变宽高	…

1. 块元素

• 常见的的块元素: <h1>-<h6>,<p>,<div>,<ol>,<li>

1.1 块元素特点

• 独占一行
• 高度,宽度,外边距及内边距都可以控制
• 宽度默认是容器(父级宽度)100%
• 是一个容器盒子,里边可以放行内或者块级元素

1.2 注意

• 文字类元素内不能使用块级元素
• 如: <p>,<h1>~<h6>…

2. 行内元素

• 常见的行内元素(内联元素): <a>,<strong>,<b>,<em>,<i>,<del>,<s>,ins,<u>,<span>

2.1 行内元素特点

• 行内元素在一行上,一行可以显示多个
• 宽高直接设置是无效的
• 默认宽度就是它本省内容得宽度
• 行内元素只能容纳文本或者其他行内元素

2.2 注意:

• 链接里面不能再放链接
• 特殊情况链接<a>里可以放块级元素,此时建议将<a>标签转化为块级元素

3. 行内块元素

• 行内元素中<img/>,<input/>,<td>他们同时具有块级元素和行内元素得特点

3.1 行内块元素特点

• 和相邻得元素在同一行上(中间又空白缝隙)
• 默认宽度是它本身内容得宽度
• 高度,行高,外边距以及内边距都可以控制(块元素特点)

4. 元素显示模式的转换

元素模式转换使用属性: display

值	描述
block	元素将显示为块级元素，此元素前后会带有换行符
inline-block	元素将显示为行内块元素
inline	元素将显示为行内元素
list-item	此元素会作为列表显示