CSS教程 02 布局相关
根据W3school CSS教程的部分总结
display属性
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
块级元素
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
行内元素
内联元素不从新行开始，仅占用所需的宽度。
<span>
<a>
<img>
覆盖默认的 Display 值
每个元素都有一个默认 display 值，可以通过设置display属性值覆盖它。
li {
display: inline;
}
span {
display: block;
}
注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。
隐藏元素 display: none
通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中。
visibility:hidden; 也可以隐藏元素。但该元素仍将占用与之前相同的空间，会影响布局。
display: inline-block
与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度，将保留上下外边距/内边距，而 display: inline 则不会。
与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。
常用于水平显示列表项：水平导航栏
position属性 定位
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。
| 属性值 | 描述 |
|---|---|
| static（默认） | 静态定位的元素不受 top、bottom、left 和 right 属性的影响，始终根据页面的正常流进行定位 |
| relative | 相对于其正常位置进行定位，设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。 |
| fixed | 相对于视口定位 |
| absolute | 相对于最近的定位祖先元素进行定位 |
| sticky | 根据用户的滚动位置进行定位 |
重叠元素
z-index 属性指定元素的堆栈顺序。
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。
overflow属性 溢出
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
- visible - 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden - 溢出被剪裁，其余内容将不可见
- scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
- auto - 与 scroll 类似，但仅在必要时添加滚动条
注释：overflow 属性仅适用于具有指定高度的块元素。
- overflow-x 指定如何处理内容的左/右边缘。
- overflow-y 指定如何处理内容的上/下边缘。
浮动和清除 float和clear
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
clearfix Hack
如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外。
可添加overflow属性解决，但是现代clearfix Hack技术更安全：
.clearfix::after {
content: "";
clear: both;
display: table;
}
Box Sizing属性
定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。
水平和垂直对齐
居中对齐元素 margin: auto
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 20px;
}
如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。
居中对齐文本 text-align: center
居中对齐图像
将左右外边距设置为 auto，并将其设置为块元素：
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
左和右对齐 - 使用 position
对齐元素的一种方法是使用绝对定位 position: absolute;
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 20px;
}
注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。
左和右对齐 - 使用 float
注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。可以使用 clearfix hack 来解决此问题。
clearfix Hack
然后我们可以向包含元素添加 overflow: auto;，来解决此问题
垂直对齐 - 使用 padding
使用上下内边距相等
同时垂直和水平对齐，可使用 padding 和 text-align: center;
垂直对齐 - 使用 line-height
使用其值等于 height 属性值的 line-height 属性
垂直对齐 - 使用 position 和 transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
垂直对齐 - 使用 Flexbox
同时将 justify-content 和 align-items 属性设置为 center 的容器将使项目在中心（在两个轴上）对齐。
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
