CSS基础之CSS元素显示模式

文章目录

• 1.块元素
• 2.行内元素
• 3.行内块元素
• 4.三种模式总结
• 5.三种模式的转换

---

1.块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div> 标签是最典型的块元素

• 块级元素的特点：
  ①独占一行
  ②高度，宽度，外边距以及内边距都可以控制
  ③宽度默认是容器（父级宽度）的100%
  ④是一个容器及盒子，里面可以放行内或块级元素
• 注意：
  只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6，dt,它们都是文字类块级标签，里面不能放其他块级元素

2.行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

• 行内元素的特点：
  ①相邻行内元素在一行上，一行可以显示多个
  ②高度、宽度直接设置是无效的
  ③默认高度就是它本身内容的宽度
  ④行内元素只能容纳文本或其他行内元素

• 注意：
  ①链接里面不能再放链接
  ②特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3.行内块元素

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

• 行内块元素的特点
  ①和相邻行内元素(行内块)在一行上，但是之间会有空白风险，一行可以显示多个
  ②默认宽度就是它本身内容的宽度
  ③高度，行高，外边距以及内边距都可以控制

4.三种模式总结

元素模式

元素排列

设置样式

默认宽度

包含

块级元素

一行只能放一个块级元素

可以设置宽度高度

容器的100%

容器级可以包含任何标签

行内元素

一行可以放多个行内元素

不可以直接设置宽度高度

它本身内容的宽度

容纳文本或其他行内元素

行内块元素

一行放多个行内块元素

可以设置宽度高度

它本身内容的宽度

5.三种模式的转换

• 转换为块元素：display:block
• 转换为行内元素： display:inline
• 转换为行内块元素: display:inline-block