css布局

平淡学爪哇

已于 2022-09-09 15:35:45 修改

阅读量60

点赞数

文章标签： css css3 html

于 2022-08-10 11:19:13 首次发布

本文链接：https://blog.csdn.net/weixin_66611724/article/details/126262565

版权

一、Flex布局

1.布局原理

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"。
当我们为父盒子设为 flex 布局以后，子元素的float、clear和 vertical-align属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局=flex布局
总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

2. flex布局父项常见属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.align-content 和align-items区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items 多行找 align-content

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            display: flex;
            /* 1.从右往左
            flex-direction: row-reverse;
               2.折行显示，默认不折行
            flex-wrap: wrap; 
               3.复合写法 ,中间空格隔开
            flex-flow: column wrap; 
               4.主轴子项排列   
                justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。*/
            justify-content: space-around;
            flex-wrap: wrap;
            /* 5.子项对齐方式 */
            align-items: flex-end;
        }

        #box1 div {
            width: 50px;
            /*5. height: 50px; */
            background-color: aqua;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

4.flex布局子项属性

order：改变某一个flex子项的位置，默认值是0
flex-grow：扩展flex子项所占据的宽度
flex-shrink：当flex容器空间不足的时候，单个元素的收缩比例，默认是1
flex-basis：定义了在分配剩余空间之前元素的默认大小
flex：是flex-grow，flex-shrink，flex-basis的缩写
align-self：控制单独某一个flex子项的垂直对齐方式

二、flex骰子练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: flex;
            justify-content: center;
        }

        #box1 div {
            width: 30%;
            height: 30%;
            border-radius: 50%;
            background-color: black;
            align-self: center;
        }

        #box2 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }

        #box2 div {
            width: 30%;
            height: 30%;
            border-radius: 50%;
            background-color: black;
        }

        #box2 div:last-child {
            align-self: end;
        }

        #box3 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }

        #box3 div {
            width: 30%;
            height: 30%;
            border-radius: 50%;
            background-color: black;
        }

        #box3 div:nth-child(2) {
            align-self: center;
        }

        #box3 div:nth-child(3) {
            align-self: flex-end;
        }

        #box4 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: flex;
            flex-wrap: wrap;
        }

        #box4 div {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        #box4 div:last-child {
            align-items: flex-end;
        }

        #box4 i {
            display: block;
            width: 30%;
            height: 60%;
            background-color: black;
            border-radius: 50%;
        }

        #box5 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: flex;
            flex-wrap: wrap;
        }

        #box5 div {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        #box5 div:first-child {
            align-items: start;
            justify-content: space-between;
        }

        #box5 div:last-child {
            align-items: flex-end;
            justify-content: space-between;
        }

        #box5 i {
            display: block;
            width: 30%;
            height: 90%;
            background-color: black;
            border-radius: 50%;
        }

        #box6 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: flex;
            flex-wrap: wrap;
        }

        #box6 div {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        #box6 div:first-child {
            align-items: start;
            justify-content: space-between;
        }

        #box6 div:last-child {
            align-items: flex-end;
            justify-content: space-between;
        }

        #box6 i {
            display: block;
            width: 30%;
            height: 90%;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
</body>

</html>

三、grid布局

(一)、概念

1.网格布局（Grid）是最强大的 CSS 布局方案。
2.它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
3.Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
4.Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

（二）、容器属性

1.grid-template-columns 属性、 grid-template-rows 属性
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
2.repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

 grid-template-rows: repeat(3, 1fr);
 grid-template-columns: repeat(3, 1fr);

3.grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
4. grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

  grid-template-areas:
                "a1 a1 a1"
                "a2 a2 a3"
                "a2 a2 a3";

5.justify-items 属性，align-items 属性，place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
6.justify-content 属性，align-content 属性，place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

(三)、子项属性

1.grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
2.grid-column 属性，grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
3.grid-area 属性
grid-area属性指定项目放在哪一个区域。
4.justify-self
单个网格元素的水平对齐方式
5.align-self
单个网格的垂直对齐方式
6.place-self
justify-self和align-self的缩写

（四）、grid骰子练习

1.方法一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
        }

        #box1 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box1 div:nth-child(1) {
            /* 两个方向的起始线 2 2 ，和结束线 3 3 */
            grid-area: 2 / 2 / 3 / 3;
        }

        #box2 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
        }

        #box2 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box2 div:nth-child(2) {
            grid-area: 3 / 3 / 4 / 4;
        }

        #box3 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
        }

        #box3 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box3 div:nth-child(2) {
            grid-area: 2 / 2 / 3 / 3;
        }

        #box3 div:nth-child(3) {
            grid-area: 3 / 3 / 4 / 4;
        }

        #box4 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
        }

        #box4 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box4 div:nth-child(4) {
            grid-area: 3 / 1 / 4 / 2;
        }

        #box4 div:nth-child(3) {
            grid-area: 3 / 3 / 4 / 4;
        }

        #box4 div:nth-child(2) {
            grid-area: 1 / 3 / 2 / 4;
        }

        #box5 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
        }

        #box5 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box5 div:nth-child(5) {
            grid-area: 3 / 3 / 4 / 4;
        }

        #box5 div:nth-child(4) {
            grid-area: 3 / 1 / 4 / 2;
        }

        #box5 div:nth-child(3) {
            grid-area: 2 / 2 / 3 / 3;
        }

        #box5 div:nth-child(2) {
            grid-area: 1 / 3 / 2 / 4;
        }

        #box6 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
        }

        #box6 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box6 div:nth-child(6) {
            grid-area: 3 / 3 / 4 / 4;
        }

        #box6 div:nth-child(5) {
            grid-area: 3 / 1 / 4 / 2;
        }

        #box6 div:nth-child(4) {
            grid-area: 2 / 3 / 3 / 4;
        }

        #box6 div:nth-child(3) {
            grid-area: 2 / 1 / 3 / 2;
        }

        #box6 div:nth-child(2) {
            grid-area: 1 / 3 / 2 / 4;
        }
    </style>
</head>

<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

2.方法二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
            grid-template-areas:
                "a1 a2 a3"
                "a4 a5 a6"
                "a7 a8 a9"
            ;
        }

        #box1 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
            grid-area: a5;
        }

        #box2 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
            grid-template-areas:
                "a1 a2 a3"
                "a4 a5 a6"
                "a7 a8 a9"
            ;
        }

        #box2 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box2 div:nth-child(1) {
            grid-area: a1;
        }

        #box2 div:nth-child(2) {
            grid-area: a9;
        }

        #box3 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-top: 10px;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center center;
            grid-template-areas:
                "a1 a2 a3"
                "a4 a5 a6"
                "a7 a8 a9"
            ;
        }

        #box3 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
        }

        #box3 div:nth-child(1) {
            grid-area: a1;
        }

        #box3 div:nth-child(2) {
            grid-area: a5;
        }

        #box3 div:nth-child(3) {
            grid-area: a9;
        }

        /* ............. */
    </style>
</head>

<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>