CSS 可视化布局与 BFC

主要属性

display 属性可用于控制元素的显示方式例如将 display 设置为 table 时元素会被转化为块级表格元素将 display 设置为 table-row 时元素将被视为表格行将 display 设置为 table-cell 时元素将被视为表格单元格

table-layout 属性用于定义表格的布局算法当取值为 auto 时根据单元格内容自动设置宽度当取值为 fixed 时宽度由表格容器和列宽决定这种方式能在数据量较大时提高渲染性能

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

在实战中通过 display 设置为 table 的布局可轻松实现等宽布局在多列数据展示中无需额外编写复杂的浮动或定位代码即可快速完成数据行列对齐

BFC Block Formatting Context

BFC 是 Web 页面可视化 CSS 渲染中的独立布局区域常用来避免浮动元素影响其它元素例如将容器触发 BFC 后可有效控制内部浮动元素避免其影响外部布局

创建 BFC 的常用方法是为元素设置 float 为非 none 值也可将 position 设置为 absolute 或 fixed 还可通过 display 设置为 inline-block table-cell table-caption flex 或 grid 触发 BFC 使用 overflow 设置为非 visible 值也能创建 BFC

在实战中当需要清除内部浮动时可在父元素中触发 BFC 将浮动元素包含在独立布局上下文中避免浮动导致的父容器高度坍塌在阻止外边距重叠等场景中 BFC 也能提供良好支持例如布局导航栏时为父容器触发 BFC 可使内部链接浮动正常显示并保持父容器高度稳定

书写规范

编写 CSS 时建议保持统一规范提高代码可读性和可维护性可使用 2 或 4 空格进行缩进在声明大括号前保留空格在属性值间留有空格使用小写字母编写选择器和属性在每个声明结束后换行统一的书写规范有助于团队协作和后期维护

.selector {
  property: value;
}

在实战中统一的书写规范可让团队成员快速理解代码结构避免因编码风格不一致引发的沟通和维护成本问题

命名

为 CSS 类和 ID 选择有意义且描述性强的名称提升可读性和可维护性尽量使用简短而有意义的词语使用连字符替代下划线或驼峰避免使用 left top 等位置相关词汇可参考 BEM SMACSS 或 OOCSS 等命名规范将样式结构化模块化

在实战中为导航菜单使用.nav-menu 的命名比.top-red-bar 更易于理解和维护在修改样式或添加新功能时也能更快速定位相关代码