1. Layout（布局）

1. 定义

CSS中的布局是指如何排列和定位元素以创建网页的结构和外观。

2. CSS盒子模型

• Width（宽度）：用于设置元素的宽度，可以使用绝对单位（像素、厘米等）或相对单位（百分比）。
• Height（高度）：用于设置元素的高度，同样可以使用绝对单位或相对单位。
• Padding（内边距）：控制元素内容与边框之间的空间，可以为上、右、下、左四个方向分别设置。
• Border（边框）：用于给元素添加边框，可以设置边框的样式、宽度和颜色。
• Margin（外边距）：控制元素与其他元素之间的间距，同样可以为不同方向设置不同的数值。
• Overflow（溢出）：当元素的内容超过其指定的尺寸时，可以通过设置overflow属性来控制内容的显示方式。

.box {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000000;
  margin: 10px;
  overflow: auto;
}

3. 块级和行级

在CSS中，元素可以分为块级元素和行级元素。

• 块级元素：独占一行，可以设置宽度、高度、内外边距等属性，如 div 、p、h1、body、article、main、section、p、ul、li等。
• 行级元素：不独占一行，不能设置宽度、高度等块级属性，如span、a、img、em、strong、cite、code等。

4. display属性

display属性用于指定元素应该以什么方式显示，常见的取值有：

• block：将元素显示为块级元素。
• inline：将元素显示为行级元素。
• inline-block：同时具有行级元素和块级元素的特性。
• none：隐藏元素，使其不可见。

.block-element {
  display: block;
}

.inline-element {
  display: inline;
}

.hidden-element {
  display: none;
}

2. 布局相关技术

1. 常规流 normal flow

常规流是默认的文档布局模型，在常规流中，元素按照其在HTML文档中出现的顺序依次排列。

• 行级排版上下文：行级元素水平排列在一行上，如果空间不足，则会进行换行。
• 块级排版上下文：块级元素独占一行，默认情况下，从上到下依次排列。
• Table排版上下文：使用HTML表格标签创建的元素会形成一个表格布局，包括行和列。
• Flex排版上下文：使用Flexbox模型可以创建灵活的布局，通过设置容器的display属性为flex，子元素可以方便地进行对齐和排序。
• Grid排版上下文：使用CSS Grid可以实现复杂的二维布局，通过定义网格容器和子元素的布局规则来进行页面排版。

2. Float（浮动）

float属性可以让元素脱离常规流，向左或向右浮动。浮动元素会尽可能地靠近其包裹的父元素或其他浮动元素。

.floated-element {
  float: left;
}

3. Position（定位）

position属性用于控制元素的定位方式。

• position: relative（相对定位）：相对于元素正常位置进行定位，可以通过top、right、bottom、left属性调整位置。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

• position: absolute（绝对定位）：相对于最近的已定位祖先元素（即position不为static的元素）进行定位，如果没有已定位的祖先元素，则相对于文档的body元素进行定位。

.absolute-element {
  position: absolute;
  top: 50px;
  right: 0;
}