Div和Span标签

Div: 一般用于配合css完成网页的基本布局
Span: 一般用于配合css修改网页中的一些局部信息

div和span有什么区别?
1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签

容器级的标签和文本级的标签的区别?
容器级的标签中可以嵌套其它所有的标签
常见容器级的标签: div h ul ol dl li dt dd ...
文本级的标签中只能嵌套文字/图片/超链接
常见文本级的标签:span p buis strong em ins del ...

注意点:
不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素显示模式

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)

什么是块级元素, 什么是行内元素?
块级元素会独占一行； 行内元素不会独占一行

常见容器级的标签: div h ul ol dl li dt dd ...
常见文本级的标签: span p buis stong em ins del ...

常见块级元素: p div h ul ol dl li dt dd
常见行内元素: span buis strong em ins del

块级元素和行内元素的区别?
块级元素： 1. 独占一行
2. 如果没有设置宽度, 那么默认和父元素一样宽
3. 如果设置了宽高, 那么就按照设置的来显示

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

行内块级元素
1. 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
2. 不独占一行, 并且可以设置宽高

CSS元素显示模式转换

转换CSS元素的显示模式方法： 设置元素的display属性

display取值： block 块级； inline 行内； inline-block 行内块级

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