CSS 笔记（五）：属性 —— 显示模式

CSS 笔记（五）：属性 —— 显示模式

div

用于和 CSS 一起完成网页的基本布局

span

用于和 CSS 一起修改网页的局部信息

---

div 和 span 的区别

1. div 独占一行，span 不会独占一行
2. div 是容器级别的标签，span 是文本级别的标签

容器级别的标签中可以嵌套其它所有的标签，而文本级别的标签中只能嵌套文字/超链接/图片

---

显示模式

在 HTML 中，将所有的标签分为两类，分别为容器和文本，而在 CSS 中，也将所有的标签分为两类，分别是块级元素和行内元素

块级元素

独占一行

div, h, ul, ol, dl. li, dt, dd, p, …

默认继承父容器的宽度

行内元素

不会独占一行

span, strong, em, ins, del, …

行内块级元素

元素既不独占一行，又可以设置宽高

img, …

---

块级元素和行内元素的区别

• 块级元素独占一行，如果没有设置宽度，那么宽度默认和父元素相同，如果设置了宽高，即为设置样式

• 行内元素不会独占一行，如果没有设置宽度，那么宽度默认和内容相同，不可以设置宽高

块级元素和行内元素的转换

行内

display: inline;

块级

display: block;

行内块级

display: inline-block;

不显示

display: none;

---