盒子模型与Flex/Grid布局

盒子模型

盒子模型由四部分组成：Margin、Border、Padding、Content。

分为**标准盒模型(content-box)与替代盒模型(border-box)**。

标准盒模型

默认模式，box-sizing: content-box;
width/height仅表示Content尺寸
实际宽度为width(height) + 2*(Padding + Border + Margin)

替代盒模型

通过box-sizing: border-box来设置
width/height包含Content、Padding、Border的尺寸
实际宽度为width(height) + 2*Margin

外边距塌陷

塌陷指当两个或多个垂直相邻的块级元素的外边距相遇时会合并成单个外边距的现象。

规则

两个正外边距时，实际外边距取大的边距，例：20px，50px 50px
一正一负外边距时，实际取两者之和，例：40px，-20px 20px
两个负外边距时，实际外边距取小的边距，例：-20px，-30px -30px

防止塌陷

使用BFC，添加display: flow-root
添加overflow: hidden; (或 auto, scroll)
非块级元素，display: inline-block; width: 100%;
绝对定位，position: absolate;
浮动，display: float;

添加隔离层，但会破坏结构

.parent {
    padding: 1px;
    border: 1px solid
}

Flex布局

一维布局，通过 display: flex; 或 display: inline-flex; 定义容器。

容器属性

**flex-direction: row | column | row-reverse | column-reverse**，主轴方向，默认为row水平从左到右，column为竖直从上到下，reverse表示方向相反。
**flex-wrap: no-wrap | wrap | wrap-resverse**，是否换行，默认不换行，换行，反转方向换行。
justify-content: center | space-between | space-around，主轴对齐方式，居中，均分但贴紧边缘，均分。
align-items: center，交叉轴单行对齐方式，居中。
align-content: center | space-between | space-around，交叉轴多行对齐方式，与justify-content相同。

注意：多行时使用justify-content: space-between | space-around可能会导致最后一行与前面的行排版不一致，影响美观。

子类属性

flex-grow: 0，分配剩余空间的放大比例，默认为0
flex-shrink: 1，空间不足时的缩小比例，默认为1，0表示不收缩
flex-basis: auto，设置子项的初始大小，默认为width或height
**flex: <flex-grow> <flex-shrink> <flex-basis>**，缩写，通常只写一个数值来表示占剩余空间的份数
order: 0，项目显示顺序，默认为0，越小越靠前
align-self: auto | flex-start/end | center | baseline | stretch，元素在交叉轴上的排列方式，默认继承父类的align-items，在交叉轴起点/终点对齐，在交叉轴中点对齐，按文本基线对齐，拉伸至填满可用空间(无固定尺寸时生效)

<div class="box">
    <div class="box1">box1</div>
    <div class="box1">box2</div>
    <div class="box1">box3</div>
    <div class="box1">box4</div>
    <div class="box1">box5</div>
    <div class="box1">box6</div>
    <div class="box1">box7</div>
    <div class="box1">box8</div>
</div>
<style>
	.box{
        width: 500px;
        height: 300px;
        background-color: pink;
        display: flex;
        flex-direction: column;  // 设置主轴为竖直方向
        flex-wrap: wrap-reverse;  // 反转换行
        justify-content: space-around;  // 设置竖直方向排列方式
        align-content: space-between;  // 设置水平方向多行的排列方式
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin: 5px 10px;
    }
</style>

Grid布局

二维布局，既能控制行，也能控制列，通过display: grid定义容器。

属性

grid-template-columns / grid-template-rows: 1fr 2fr 1fr，设置列/行的数量及宽度，单位可用fr表示浮动宽度，代表grid的剩余空间，示例表示第二列/行占据二分之一
column-gap / row-gap / gap，设置列/行/行与列间距
align-items: center | end，设置竖直方向上居中对齐，靠下对齐
justify-items: center | end | space-between，水平方向居中对齐，靠右对齐，两端对齐
align-content: center | end / justify-content: center | end | space-between，若行轨道或列轨道的尺寸小于容器大小，还可对轨道进行对齐，竖直/水平方向上居中对齐，向下/右对齐，水平上两端对齐

grid-template-areas

<div class="layout">
        <header>Header</header>
        <main>Main Content</main>
        <aside>Sidebar</aside>
        <footer>Footer</footer>
</div>
<style>
	.layout{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; // 设置列得到数量及宽度
        grid-template-rows: 1fr 2fr 1fr; // 设置行的数量及高度
        gap: 10px;
        grid-template-areas:  
        "header header header"
        "aside content content"
        "footer footer footer";
    }
    header{
        grid-area: header;
    }
    aside{
        grid-area: aside;
    }
    main{
        grid-area: content;
    }
    footer{
        grid-area: footer;
    }
</style>

子元素属性

grid-area: areaName | <grid-row-start> <grid-column-start> <grid-row-end> <grid-column-end>，与grid-template-areas结合使用，或直接写精确位置
grid-columns: 1 / 3，grid-rows: 2 / span 2，分别表示，从第一条竖线开始到第三条竖线结束，占两列；从第二条横线开始跨两行