CSS显示模式
- 课时90 div和span标签(掌握)
- 课时91 CSS元素显示模式(掌握)
- 课时92 CSS元素显示模式转换(掌握)
- 课时93 百度首页(理解)
div和span标签
什么是div
一般用于配合CSS完成网页的基本布局
什么是span
一般用于配合CSS修改网页中的局部信息
两者的区别
- div会独占一行，span不会独占一行
- div是一个容器级别的标签，span是一个文本级别的标签
容器级的标签和文本级的标签
- 容器级的标签可以嵌套任何标签
- 文本级的标签只鞥嵌套文字、超链接、图片
注意点
那些标签是文本级的、哪些标签是容器级的没必要记忆，企业开发中，嵌套都是嵌套在div中的，或者嵌套在组标签中
CSS元素显示模式
在HTML中，所有标签都分为容器级和文本级，在css也分两类，分为块级元素和行内元素
块级元素和行内元素特点
块级标签会独占一行，行内元素不会
- 容器级标签
- div h ul ol dl li dt dd ...
- 文本级标签
- span p buis stong em ins del ...
- 块级元素(所有的容器级标签都是块级元素)
- div h ul ol dl li dt dd ...
- 行内元素(除了p以外的全部文本级元素)
- span buis stong em ins del ...
块级元素与行内元素的区别
- 块级元素
- 独占一行
- 若没有设置宽度，默认和父元素一样宽
- 若设置宽高，就按照设置显示
- 行内元素
- 不独占一行
- 若没有设置宽度，默认和内容一样宽
- 行内元素是不可以设置宽度和高度的
- 行内块级元素
- 为了能够让元素既能够不独占一行，又可以设置宽高，才有了这个概念
CSS元素显示模式转换
如何转换
设置元素的display属性
取值
- block 块级
- inline 行内
- lnline-block 行内块级
快捷键
di————display: inline;
db————display: block;
dib————display: inline-block;
