CSS显示模式

一、div和span标签

1. 什么是div

• 作用: 一般是用于配合css完成网页的基本布局。

2. 什么是span

• 作用：一般配合css修改网页中的一些局部信息。

3. div 和 span 的区别

• div会单独占领一行，span不会单独占领一行。
• div是一个容器级别的标签，span 是文本级别的标签。

4. 容器级和文本级的标签的区别？

• 容器级的标签中可以嵌套其他所有的标签，但是文本级的标签中只能嵌套文字/超链接/图片。

• 注意点：那些标签是文本级的，那些标签是容器级的，我们可以不用去记忆的，在企业开发中一般情况下要嵌套的都是嵌套在div 中，或者按照组标签来嵌套。

二、CSS元素的显示模式

1、什么是CSS的显示模式

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

• 什么是块级元素，什么是行内元素？

块级别元素(容器级)：p/div/ h/ ul/ol/dl/li/dt/dd
行内元素（文本）：span/buis/strong/em/ins/del

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

块级元素：

1. 独占一行；
2. 如果没有设置宽度，那么默认和父元素一样宽；
3. 如果设置了宽度，那么就根据设置的来显示；

行内元素：

1. 不会独占一行；
2. 如果没有设置宽度，那么默认和内容一样宽；
3. 行内元素是不可以设置宽度和高度的。

行内块级元素：
1.为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素。例如 img

二、CSS元素显示模式的转换

1、如何转化CSS 元素的显示模式?

• 设置元素的display属性

2、display 的取值

• block：块级
• inline：行内
• inline-block: 行内转换

3、快捷键：
di : display:inline
db: display:block
dib:display:inline-block