web前端开发

张益达1号

已于 2022-11-27 14:15:34 修改

阅读量298

点赞数

文章标签：前端 css css3

于 2022-11-25 20:19:10 首次发布

本文链接：https://blog.csdn.net/m0_73747560/article/details/127972165

版权

WEB前端开发

笔记4

笔记4

1.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>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        .box{width: 150px;height: 50px;background: red;margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div class="box">

        </div>
    </div>
</body>
</html>

在这里插入图片描述

row:默认值，显示为行。方向为当前的文档水平方向，默认值情况下是从左往右。
row-reverse:显示为行，但方向和row属性是反的。
column:显示为列
column-reverse:显示为列。但方向和column属性值是反的。
flex-wrap:用来控制子项整体单行显示还是换行显示。
nowrap:默认值，表示单行显示，不换行。
wrap:宽度不足换行显示
wrap-reverse:宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。
justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式
在这里插入图片描述

作用在flex子项上的css属性

order:可以通过设置改变某一个flex子项的排序位置。所有flex子项的默认的order属性值是0

flex-grow:属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展说侵占的空间就是除去元素外的剩余的空白间隙。默认值为0

<!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>
        #box div:nth-child(3){background: yellow;color: black;flex-grow: 3;}
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px;color:white;line-height: 50px;text-align: center;background: red;}
    </style>
</head>
<body>
   <div id="box">
    
    
    <div>1</div>
    <div>2</div>
    <div>9</div>
    <div>4</div>
    <div>5</div>

   </div>
</body>
</html>

在这里插入图片描述

flex-shrink:属性中的shrink是”收缩“的意思。flez-shrink主要处理当flex容器不足时候，单个元素比例收缩，默认值为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>
        #box div:nth-child(3){background: yellow;color: black;flex-shrink: 3;}
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px;color:white;line-height: 50px;text-align: center;background: red;}
    </style>
</head>
<body>
   <div id="box">
    
    
    <div>1</div>
    <div>2</div>
    <div>9</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>9</div>
    <div>4</div>
    <div>5</div>

   </div>
</body>
</html>

在这里插入图片描述

flex-basis:flex-basis定义了在分配剩余空间之前的元素默认大小

#box div:nth-child(3){background: yellow;color: black; flex-basis: 300px; }

在这里插入图片描述

flex:flex属性是flex-grow,flex-shrink和flex-basis的缩写

#box div:nth-child(3){background: yellow;color: black; flex:0 1 auto  }

align-self指控制单独某一个子项垂直对齐方式

 #box div:nth-child(3){background: yellow;color: black;align-self: center;  }

2.grid网格布局

在这里插入图片描述

<!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>
       
       #box{width: 300px;height: 300px;border: 1px grey dotted;display: grid;
    grid-template-rows: 1fr  1fr 1fr;
     grid-template-columns: 1fr 1fr 1fr 1fr;}
    </style>
</head>
<body>
   <div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    
    
    
   </div>
</body>
</html>

在这里插入图片描述

1、grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

在这里插入图片描述

2、grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。grid-template是grid-template-rows ,grid-template-columns和grid-template-areas属性的缩写
在这里插入图片描述

    <style>
       
       #box{width: 300px;height: 300px;border: 1px grey dotted;display: grid;
    grid-template-rows: 1fr  1fr 1fr;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-areas: 
     "a1 a1 a1"
     "a2 a2 a2"
     "a3 a3 a3";}
     #box div:nth-child(1){grid-area: a1;}
     #box div:nth-child(2){grid-area: a2;}
     #box div:nth-child(3){grid-area: a3;}
    </style>
</head>
<body>
   <div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
   </div>

3、grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

4、justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
在这里插入图片描述

5、justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
在这里插入图片描述

6、justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。

作用在grid子项上的CSS属性.

在这里插入图片描述

张益达1号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端开发

row:默认值，显示为行。方向为当前的文档水平方向，默认值情况下是从左往右。row-reverse:显示为行，但方向和row属性是反的。column:显示为列column-reverse:显示为列。但方向和column属性值是反的。flex-wrap:用来控制子项整体单行显示还是换行显示。nowrap:默认值，表示单行显示，不换行。wrap:宽度不足换行显示wrap-reverse:宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。justify-content
复制链接

扫一扫