这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
前言
今天主要学习了CSS中关于布局与定位的一些相关知识，包括有：
- 盒模型是是什么？
- 布局是什么？有哪些布局？
- 定位是什么？有哪些定位？
一. 盒模型
HTML 元素可以看作是一个盒子（矩形区域），它包括：外边距、边框、内边距、内容，如下图：
- Content - 内容
- Padding - 内边距（填充）
- Border - 边框
- Margin - 外边距（边距）
-
盒子的大小
使用 CSS 设置元素的宽度和高度属性时，只需设置内容区域的宽高。
要计算元素盒模型的完整大小，还必须添加内外边距和边框- 盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
- 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
用公式来表示就是
- 元素宽 = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
- 元素高 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
-
盒模型的调试
浏览器的 DevTools 为所选元素的盒模型计算提供了可视化界面，选择一个元素调试：
-
块级与行内
与前面的块级元素和行内元素相联系
二. 布局
1. 了解display属性
主要是两件事：确定它所应用的盒子是块级（block）还是行内（inline），其次是多元素的布局
1.1 弹性布局 - display: flex
这会使盒子会将保持在同一轴上，并且在空间不足时不仅不会换行，反而会挤在同一条线上。可以使用align-items,justify-content和flex-wrap属性来修改
1.2 网格 display: grid
grid 在很多方面与 flex 相似，但它能控制多轴布局而不是像 flex 那样的单轴布局。
一个网格的单位是fr
1.3 也可以设置为none，如果这三者都不设置，则元素以常规流的形式显示
1.4 display的隐藏效果
display: none; 与 visibility:hidden; 的不同之处在于，前者看不见也摸不到，后者虽然被隐藏，但仍然占据着与之前相同的空间，也就是看不见摸得着
2. 定位
position属性可以改变元素在文档的正常流中的行为方式，以及与其他元素的关系。可选项有relative、和absolute，默认值为。fixed | sticky | static
- 静态定位 - static，默认值，不受 top、bottom、left 和 right 属性的影响
- 相对定位 - relative，相对于原来位置移动，占原来空间
- 绝对定位 - absolute，相对于最近定位的祖先位置移动，从常规流中移除，可以与元素重叠
- 固定定位 - flxed，相对于视口（viewport）定位，即使页面滚动，它也始终停留在同一个位置
