C10、补充div和span

C10、补充div和span

一、div

作用： 配合网页搭建框架，然后配合CSS完成网页的基本布局。

二、span

作用：修改局部信息样式

三、span与div区别

1. div会单独占领一行，而span不会单独占领一行

2. div是容器级别的标签，而span是文本基本的标签

3. 容器级别标签可以嵌套所有的标签，文本级别只可以放文字/图片/超链接

4. 容器级别：div h ul ol dl li dt dd 文本级： span p buis strong em ins del

5. 文本级不能放容器级的标签，否则会出错

四、CSS元素的显示模式

1. HTML将元素分成两类：容器级和文本级

2. CSS中也将元素分成两类： 块级元素和行内元素

3. 块级元素会独占一行，行内元素不会独占一行

4. 所有容器级都是块级，p也是块级，其他都是行内元素

5. 块级元素特点：

   • 如果没有设置宽度就跟父元素一样宽

6. 行内元素特点：

   • 行内元素不能设置宽度和高度的

7. 行内块级元素：

   • 为了解决不独占一行又可以调整宽高，代表是img

五、CSS显示模式的转换

1. 用display模式转换：

2. inline 行内元素

3. block 块元素

4. inline-block 行内块级元素

六、如何使用快速搭建网页

1. 划分内容块

2. 搭建html

3. css布局

4. 调整

5. 可以设置背景颜色方法来辅助画图