目录
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");