前端布局练习总结(table/inline/float/flex)

前端布局练习总结.md

前段时间在霖哥的指导下，分别对table/inline/float/flex布局进行了相应的实现。做一下总结汇总。

table布局总结

优点：

• 垂直居中
• 等高
• 等分布局

缺点：

• width, margin等属性不能影响设置了table-cell的元素
• 设置了table-cell的元素自适应父级元素，使响应式的实现不能单纯依赖于CSS，而要借助JS实现
• 设置border-spacing属性会使元素四周都出现间距，使第一个元素左端和最后一个元素右端出现间距，打破原来的布局

应用场景

• 需要以表格呈现的内容
• 图片、文字区块展示
• 及其他需要等高等分布局的地方

属性说明

• display: table 使元素以表格方式呈现
• display: table-cell 使元素以单元格方式呈现，不能应用width, margin等属性

Inline-block布局总结

优点：

• 水平、垂直居中
• 同时具有行内样式和块级元素的属性

缺点：

• 作为行内元素存在letter-spacing。标准解决方案是父级元素使用font-size: 0。

应用场景

• 需要使块级元素并列显示
• 需要对行内元素应用margin等属性

属性说明

• display: inline-block 使块级元素以行内样式渲染
• font-size: 0 用于清除letter-spacing
• vertical-align: top/center/bottom 对元素进行垂直定位
• text-align: left/center/right 对元素进行水平定位

float布局总结

优点：

• 使块级元素成行排列
• 响应式易于实现
• 有多个解决现存bugs的方法

缺点：

• 脱离文档流，破坏原来布局，难以控制定位
• 父级元素不能自适应高度，可以用overflow属性解决
• 需要清除浮动，实现响应式过程中，需要多次对元素清除浮动

应用场景

• 瀑布流布局
• 横排列表
• 流式布局

属性说明

• float：left/right 实现一个元素向左或者向右浮动
• clear：left/right/both 用于清除元素浮动

Flex布局总结

优点：

• 等高
• 等间距，自动适应父级元素宽度
• 可控是否自动换行，换行方式，对齐方式，排列顺序等

缺点：

• 不兼容低版本浏览器
• 易被过度使用

应用场景

• 不需要兼容低版本浏览器
• 灵活可控的布局
• 类似表格同时需要自动换行
• 需要元素自适应容器大小

属性说明(常用)

• display: flex 使元素以flex方式显示
• flex-wrap: nowrap|wrap|wrap-reverse 是否自动换行以及换行方向
• flex-direction: row|row-reverse|column|column-reverse 控制元素排列方向
• order: number 控制元素排列顺序
• justify-content: flex-start|flex-end|center|space-between|space-around 控制元素横向对齐方式
• align-content: flex-start|flex-end|center|space-between|space-around|stretch 控制多行元素垂直对齐方式
• align-items: flex-start|flex-end|center|baseline|stretch 控制多个元素垂直对齐方式
• align-self: auto|flex-start|flex-end|center|baseline|stretch 控制单个元素垂直对齐方式
• flex-basis 设置元素宽度