这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

本文将主要讲解CSS布局、块级和行级、BFC相关的内容。

布局

布局是什么

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

FlexBox和Grid布局是两种常用的CSS布局技术，它们都可以实现灵活的响应式网页设计，但也有一些区别和适用场景。

FlexBox布局是一种一维的布局技术，它可以让容器中的子元素在水平或垂直方向上排列、对齐、分配空间。FlexBox布局适合于应用组件和小规模的线性布局，例如导航栏、侧边栏、卡片等。

Grid布局是一种二维的布局技术，它可以让容器中的子元素在行和列上同时定位、对齐、分配空间。Grid布局适合于大规模的非线性布局，例如网格、瀑布流、杂志等。

FlexBox和Grid布局有一些共同的特性，例如都可以使用display属性来设置容器为flex或grid模式，都可以使用align-items和justify-content属性来控制子元素在主轴和交叉轴上的对齐方式，都可以使用order属性来改变子元素的显示顺序等。

FlexBox和Grid布局也有一些不同的特性，例如FlexBox只能通过flex-direction属性来设置主轴方向，而Grid可以通过grid-template-columns和grid-template-rows属性来自定义行列数目和大小；FlexBox只能通过flex-wrap属性来控制是否换行，而Grid可以通过grid-auto-flow属性来控制是否填充空白单元格；FlexBox只能通过flex-grow, flex-shrink, flex-basis属性来设置子元素在主轴上占据的空间比例，而Grid可以通过grid-column-start, grid-column-end, grid-row-start, grid-row-end属性来设置子元素在网格中占据的位置范围等。

盒子模型

height

• 指定content box宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其它属性确定
• 百分数相对于容器的content box宽度
• 容器有指定的高度时，百分数才生效

width

• 指定content box宽度
• 取值为长度、百分数、auto
• auto由浏览器根据其它属性确定
• 百分数相对于容器的content box宽度

border

• 指定容器边框样式、粗细和颜色

块级 vs 行级

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

CSS 中的display属性可以控制元素在页面中的显示方式。display 属性有多个值，其中block和inline是两个常用的值。

• block：一个块级元素占据一行的全部宽度，并且在前后都有换行。块级元素可以设置宽度和高度，也可以设置上下左右的边距和内边距。
• inline：一个行级元素不会换行，并且只占据必要的宽度。行级元素不能设置宽度和高度，也不能设置上下的边距和内边距。

除了 block 和 inline 之外，还有一个常用的值是 inline-block。

• inline-block：一个内联块元素不会换行，并且可以设置宽度和高度，也可以设置上下左右的边距和内边距。内联块元素相当于同时具有 block 和 inline 的特点。

块级排版上下文

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display: flow-root

BFC内的排版规则

• 盒子从上到下摆放
• 垂直margin合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠