目录

1、display展现

每个元素都有两个盒子，外在盒子和容器(container)盒子（内在盒子）

display："inline"（"inline-inline"）；

display："inline-block"（"inline-block"）；

display："inline-table"（"inline-table"）；

display："inline-flex"（"inline-flex"）；

display："inline-grid"（"inline-grid"）；

display："block"（"block-block"）；

display："table"（"block-table"）；

display："flex"（"block-flex"）；

display："grid"（"block-grid"）；

2、float浮动

内容

1、display展现

1.1display："inline"（"inline-inline"）；

margin-top/bottom无效果，支持margin-left/right，padding

宽高由内容与padding撑大盒子

1.2display："inline-block"（"inline-block"）；

支持margin、padding

可设宽高

支持text-align：center；line-height = height；

1.3display："inline-table"（"inline-table"）；

支持margin、padding

可设宽高

支持text-align：center；line-height = height；

1.4display："inline-flex"（"inline-flex"）；

支持margin、padding

可设宽高

不支持text-align：center；应使用justify-content：center；line-height = height；

1.5display："inline-grid"（"inline-grid"）；

支持margin、padding

可设宽高

支持text-align：center；line-height = height；

display："block"（"block-block"）；

display："table"（"block-table"）；

display："flex"（"block-flex"）；

2、float浮动

display："grid"（"block-grid"）；