CSS布局：CSS盒子模型、布局方式、定位介绍
CSS盒子模型
CSS盒子模型是指在Web页面中，每个元素被看作一个矩形的盒子，包含内容、内边距、边框和外边距四个部分。这个模型主要有以下几个属性：
- content（内容）：指盒子的实际内容，包括文本、图片、背景等。
- padding（内边距）：指盒子内容与边框之间的空白区域，一般用来设置盒子的内部间距。
- border（边框）：指盒子的边框，可以设置边框的样式、宽度和颜色等。
- margin（外边距）：指盒子与周围元素之间的空白区域，一般用来设置盒子的外部间距。
布局方式
在CSS中，有多种布局方式可以让元素按照特定的方式排列，常用的有以下几种：
- 块级布局：块级元素默认以块级布局方式排列，每个块级元素独占一行，从上到下依次排列。
- 行内布局：行内元素默认以行内布局方式排列，每个行内元素都在同一行上，从左到右依次排列。
- 表格布局：使用CSS的display属性将元素设为table、table-row和table-cell可以实现表格布局方式。
- 弹性布局：使用CSS3的Flexbox模型可以实现弹性布局方式，可以通过设置容器的flex属性和子元素的flex属性实现灵活的布局效果。
- 网格布局：使用CSS3的Grid模型可以实现网格布局方式，可以通过设置网格容器的grid-template-columns和grid-template-rows属性，以及子元素的grid-column和grid-row属性实现复杂的布局效果。
定位介绍
在CSS中，可以使用定位属性来改变元素的位置，常用的定位属性有以下几种：
- static（静态定位）：默认值，元素在文档流中按照默认布局方式排列，left、top、right、bottom属性无效。
- relative（相对定位）：元素在文档流中仍按照默认布局方式排列，但是可以通过left、top、right、bottom属性相对于元素原本的位置进行微调。
- absolute（绝对定位）：元素完全脱离文档流，根据其最近的具有定位属性（position不为static）的祖先元素进行定位，如果没有符合条件的祖先元素，则相对于文档的初始坐标定位。left、top、right、bottom属性确定元素的位置。
- fixed（固定定位）：元素固定在浏览器
布局方式(Layout)
CSS提供了多种布局方式，包括流式布局、弹性布局和网格布局等。流式布局是最基本的布局方式，元素按照文档流从左到右、从上到下进行排列。而弹性布局和网格布局则提供了更加灵活和复杂的布局方式。
弹性布局(Flexbox)
弹性布局是CSS3中新增的一种布局方式，用于解决传统布局方式的缺陷。它通过定义容器和其内部的项目之间的关系来实现灵活布局。
弹性容器(Flex Container)是用于包含一组弹性项目的父级元素，它通过 display: flex 或 display: inline-flex 属性来设置。
弹性项目(Flex Item)是弹性容器中的子元素，它们的排列方式可以通过设置弹性容器的属性来进行控制。
以下是一些常用的弹性容器和项目属性：
弹性容器属性：
- flex-direction：指定主轴的方向（row、column、row-reverse、column-reverse）
- justify-content：指定弹性项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）
- align-items：指定弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）
- align-content：指定多行弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）
弹性项目属性：
- order：指定弹性项目的排列顺序
- flex-grow：指定弹性项目的放大比例
- flex-shrink：指定弹性项目的缩小比例
- flex-basis：指定弹性项目的基础大小
- flex：指定弹性项目的缩放比例、基础大小和最大大小
网格布局(Grid)
网格布局是CSS3中新增的一种布局方式，用于实现二维网格布局，通过定义行和列来划分网格，使得元素可以精确地放置在网格中。
网格容器(Grid Container)是用于包含一组网格项目的父级元素，它通过 display: grid 或 display: inline-grid 属性来设置。
网格项目(Grid Item)是网格容器中的子元素，它们的排列方式可以通过设置网格容器的属性来进行控制。
以下是一些常用的网格容器和项目属性：
网格容器属性：
- grid-template-rows 和 grid-template-columns：分别定义行和列的大小和数量
- grid-template-areas：通过定义网格区域的名称来指定网格项目的位置
- grid-template：简写属性，同时设置 grid-template-rows、grid-template-columns 和 grid-template-areas