區塊層級元素 行級元素及其他元素

標籤：

我們常說元素分為區塊層級元素和行級元素，這隻是一種簡化了的約定。

 

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（自身需要多少寬度，就佔據多少寬度）

區塊層級元素 行級元素及其他元素