HTML5前端开发入门之CSS元素的显示模型及转换

Css元素的显示模型

在HTML中HTML将所有的标签分为两类，分别是容器级和文本级

在css中也将所有的标签分为两类，分别是块级元素和行内元素

 

1.什么是块级元素

块级元素会独占一行

 

2.什么是行内元素

行内元素不会独占一行

 

容器级的标签

div h ul dl li ...

 

文本级的标签

span p buis stong em ins del ...

 

块级元素

p标签+所有的容器级标签都是块级元素

 

行类内元素

除了p标签以外其他都是行内元素

 

3.块级元素和行内元素的区别？

3.1块级元素

独占一行

如果没有设置宽度，那么默认和父元素一样宽

如果设置了宽高，就按照设置的来显示

 

3.2行内元素

不独占一行

如果没有设置宽度，那么默认和内容一样宽

行内元素不可以设置高度和宽度

 

3.3行内块级元素

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

显示模型转换

1.如何转换CSS元素的显示模式？

设置元素的display属性

 

2.display取值

block 转化为块级

inline 转化为行内

inline-block 转化为行内块级

 

3.快捷键

di+tab  ==  display: inline;

db+tab  ==  display: block;

dib+tab  ==  display: inline-block;