CSS中的盒式模型
盒子模型的组成
CSS盒子模型由四个部分组成：内容区域、内边距区域、边框区域和外边距区域。
1. 内容区域（Content）
内容区域是元素的实际内容，宽度和高度在CSS设置时指定。
2. 内边距区域（padding）
内边距区域在内容区域的外部，包含元素的内部空间，一般用于指定元素的内边距。
3. 边框区域（border）
边框区域在内边距区域的外部，定义元素的边框宽度、样式和颜色。
4. 外边距区域（margin）
外边距区域在边框区域的外部，定义元素与其他元素之间的间距。
盒子模型的计算方式
盒子模型的大小由元素的内容宽度（width）、内边距（padding）、边框（border）和外边距（margin）四个部分共同决定。
1. 内容框计算方式
元素内容的宽度由CSS属性width控制，取值为长度、百分数、auto，auto由浏览器根据其他属性确定，百分数相对于容器的content box宽度；
高度由height控制，取值为长度、百分数、auto，auto取值由内容计算得来，百分数相对于容器的content box高度，只有容器有指定高度时，百分数才生效。
2. 内边距框计算方式
内边距的大小由CSS属性padding来控制，可以指定四个方向的内边距，也可以写相对于容器宽度的百分数。 一个值时为四个方向距离，两个值为上下、左右的距离、四个值为顺时针设置顺序；
3. 边框框计算方式
边框的大小由CSS属性border来控制，指定的边框大小包括边框的线宽和边框周围的占位空间。
| 样式名 | 属性值 | 作用 |
|---|---|---|
| border | width style color | 设置盒子边框宽度，样式和颜色 |
| border | top right bottom left | 设置盒子四个方向边框的宽度 |
| 当四个边框颜色不一，内部宽度为0时可以通过设置边框构建一些几何图形 |
4. 外边距框计算方式
外边距的大小由CSS属性margin来控制，指定了元素四个方向的外边距，取值可以是长度、百分数、auto。
box—sizing：border-box(默认为content-box)
指定宽度高度时，指定整个盒子的宽度，高度
border-box中padding和border被包含在定义的width和height之内，所以其宽度和高度取决于设定的宽度与高度
两种常见布局
首先引入两种排版规则IFC、BFC
Flex Box （弹性盒子）
主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
主轴对齐方式 :justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
单行侧轴对齐方式 : align-items
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
flex简写
Grid布局
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。
display：grid
用display：grid生成一个块级的grid容器
用grid-template相关属性将容器划分为网格
grid-template-columns 每一列的列宽
grid-template-rows 每一行的行高
float 浮动
一般用于使文字环绕图片
position属性
附：CSS笔记完，最后这段实在不想写格式了，直接截图了，没想到最后一个一篇这么长，本来觉得flex、grid俩布局写写就结了，没想到内容这么多，不过还是写完了
