块级元素 行级元素及其他元素

Posted 2020-06-21 One Place

我们常说元素分为块级元素和行级元素，这只是一种简化了的约定。

 

1.元素的display属性定义了该元素在页面中渲染出来的盒模型。

Every html element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

 

2.display属性的值如下:

 

2.1常见的值如下三个：

block       块级的盒模型

inline      行级的盒模型     

none       display为none，也就是说在页面layout中彻底消失，这也是它和visbility:hidden 的区别

 

2.1扩展值如下：

inline-block     （inline在前，说明是inline element。否则为什么不是block-inline？）是行级元素的同时，也可拥有width和height。

 

2.3三大类整体布局意味更重的值以及它们相配套的值如下：

flex       弹性盒子模型

grid      栅格盒子模型

table     表格盒子模型

 

 3. 块级元素(block) 和 行级元素(inline) 区别如下：

block总是新起一行，并且stretches out to the left and right as far as it can（父元素能提供多少宽度，就占据多少宽度）

inline并不是另起一行，并且takes up as much width as necessary（自身需要多少宽度，就占据多少宽度）