一. 标签补充 div 和s pan
1.什么是div?
作用: 一般用于配合css完成网页的基本布局
2.什么是span?
作用: 一般用于配合css修改网页中的一些局部信息
3.div和span有什么区别?
3.1.div会单独的占领一行,而span不会单独占领一行
3.2.div是一个容器级的标签, 而span是一个文本级的标签
4.容器级的标签和文本级的标签的区别?
容器级的标签中可以嵌套其它所有的标签
文本级的标签中只能嵌套文字/图片/超链接
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis strong em ins del ...
注意点:
哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套
二. 元素的显示模式
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素
1.什么是块级元素, 什么是行内元素?
块级元素会独占一行
行内元素不会独占一行
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis stong em ins del ...
块级元素
p div h ul ol dl li dt dd
行内元素 (所有的文本元素中除了p,都是行内元素)
span buis strong em ins del
2.块级元素和行内元素的区别?
2.1块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示
2.2行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
<a>行内元素是不可以设置宽度和高度的</a>
2.3行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素 (如:img标签)
三 CSS元素显示模式转换
1.如何转换CSS元素的显示模式?
设置元素的display属性
2.display取值
block 块级
inline 行内
inline-block 行内块级
3.快捷键
di display: inline;
db display: block;
dib display: inline-block;
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是CSS的显示模式如何使用的详细内容，更多请关注php中文网其它相关文章！
前端(VUE)零基础到就业课程：点击学习
自己动手写 PHP MVC 框架：点击学习
