FE复习企划——3. CSS布局

3.1 布局概述

01.布局简述

02.常规流

03.行级排版上下文IFC

04.块级排版上下文BFC

3.2 Flex Box（上）

01.如何开启？

将这些 flexible 元素的父元素 设置为 Flex 容器 Flex

02.flex-flow

flex-flow是 flex-direction 和 flex-wrap 两个属性的简写属性 。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

flex-wrap 指定 flex 元素单行显示还是多行显示 。

03.flex

flex设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

三值语法:

• 第一个值必须为一个无单位数，并且它会被当作 的值。
• 第二个值必须为一个无单位数，并且它会被当作 的值。
• 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

3.1flex-grow

**flex-grow**指占满剩余空间（其他元素正常摆放后剩余的宽度）的能力。

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

flex-grow 与其他的flex属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。

flex-grow，

3.2flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

3.3flex-basis

flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing性就决定了 flex 元素的内容盒（content-box）的尺寸。

当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

3.3 Flex Box（下）

01.justify-content

justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

02.align-items、align-self

• align-items属性将所有直接子节点上的align-self值设置为一个组，它控制侧轴上项目的对齐方式。

• align-self属性定义 flex子项单独在侧轴（纵轴）方向上的对齐方式。

03.align-content

align-items：控制一行内元素侧轴对齐方式，align-content：控制所有行（整体）在容器中的对齐方式

align排整齐; 校准; (尤指)使成一条直线;

该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。

04.order

order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值从小到大进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

05.经典布局例子

 <header>
        <h1>My Blogh1>
        <nav>
            <a href="#">Homea>
            <a href="#">Posta>
            <a href="#">Abouta>
        nav>
    header>
    <div class="wrapper">
        <main>
            <article>
                <h2>My blog titleh2>
                <p>Some content in paragraph1p>
                <p>Some content in paragraph2p>
                <p>Some content in paragraph3p>
                <p>Some content in paragraph4p>
            article>
        main>

        <aside>
            <h3>Hot Topicsh3>
            <ul>
                <li><a href="#">topic1a>li>
                <li><a href="#">topic2a>li>
                <li><a href="#">topic3a>li>
                <li><a href="#">topic4a>li>
            ul>
        aside>
    div>

    <footer>
        Copyrights  2021
    footer>

body{
    height: 400px;
    width: 500px;/*body固定高宽*/
    margin: 100px auto;/*居中*/
}
header{
    display: flex;/*父容器设置为flex*/
    align-items: center;/*侧轴上的flex元素居中对齐*/
    background-color: coral;
}
/*也可以将 h1设置为felx-grow：1，占满剩余空间，nav就会自动摆放在最右侧*/
/*h1{
    flex: 1;
}*/
nav{
    flex-grow: 1;
    text-align: right;/*文字向右边对齐*/
}
.wrapper{
    display: flex;/*父容器设置为flex*/
}
main{
    flex: 1;
    order: 1;/*order为1，aside的order默认为0，就会摆放在左边*/
    background-color: lightblue;
}
aside{
    width: 180px;/*固定宽度*/
    background-color: lightseagreen;
}
footer{
    text-align: center;
    background-color: gray;
}

问题：为了让main和aside并列，把他们包在了一个额外的div （wrapper）里面

利用grid布局，不用额外的div

3.4 Grid 布局（上）

01.定义网格

flex box 是单向的布局，要么是横向摆放，要么是纵向摆放。

而grid是二维的布局方式，可以把容器按横向纵向划分成网格，然后把子元素放入网格内。

02.划分网格

除了长度和百分比，我们也可以用fr这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例。

fr单位分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。

03.给子元素指定网格区域

3.1网格线序号

3.2网格线命名

3.3网格区域命名

3.5 Grid 布局（下）

01.网格间距

02.对齐

2.1justify-items、align-items

在网格容器上的对齐属性：在行的方向上（justify-items）、在列的方向（align-items）

2.2align-self、justify-self

设置某个子元素在区域内的对齐属性：在垂直方向上（align-self）、在水平方向（justify-self）

有时我们设置的网格不会占满整个容器，那么每个网格在容器中的对齐可以用align-self、justify-self控制

3.6 表格样式

01.宽度设置

在表格中，每一列所占据的宽度是浏览器根据每一列的内容自动确定的

方法一：把每个单元格td、th都设置为100px

方法二：设置 table-layout：fixed 表格的宽度只依据第一行的宽度，和下面单元格无关

02.边框设置

只有表格有边框，此时单元格没有边框

但相邻的单元格都有边框，此时应设置border-collapse：collapse合并相邻边框

3.7 浮动

01.浮动对布局的影响

文字环绕图片展示

第一个section中的img设置了浮动，导致第二个section也会避开浮动元素。利用clear属性清除浮动

02.将浮动的影响控制在容器内

对于一般的元素，浮动元素是文档流之外的，计算高度时是不会考虑浮动元素的。但BFC的高度会包含浮动元素

2.1 overflow：hidden

若有溢出的内容则会被隐藏

2.2添加伪元素

3.8 定位

01.相对定位

02.绝对定位

2.1利用绝对定位实现居中

03.固定定位

3.9 堆叠层级

01.z-index

02.堆叠上下文

03.绘制顺序

20210706144125305" style=“zoom:67%;” />

02.堆叠上下文

03.绘制顺序