CSS伸缩盒布局的学习

最新推荐文章于 2021-08-19 11:01:29 发布

Ann1223

最新推荐文章于 2021-08-19 11:01:29 发布

阅读量220

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Ann1223/article/details/107804449

版权

---------------review-----------
定位布局：
position：
1.static 静态布局
2.absolute：绝对定位

1.脱离默认文档流
2.不占据定位前空间
3.默认情况下，根据body的左上角进行定位
4.如果父元素具有定位属性，根据父元素左上角进行定位

3.relative：相对定位

1.相对定位的元素根据元素本身的位置进行定位
2.占据定位前空间
3.不脱离默认文档流

4.fixed：固定定位

1.特点和绝对定位相似
2.使用fixed的定位元素不会随着滚动条而滚动

5.sticky:粘滞定位

1.在到达固定点前是relative+到达固定点后fixed

配合属性： top right left bottom

z-index:number
设置元素的推叠顺序
1.要求元素必须具有绝对定位属性
2.数值越大，元素越靠上

学习——伸缩盒布局

display:flex; 将当前盒子变成一个可伸缩的盒子
所有子元素自动变成该盒子的一个成员项item
子元素的浮动元素自动失效

flex-direction: row/colum;
flex-wrap: wrap;
简写：flex-flow

align-items: center;在y轴中心显示
stretch：设置子元素在y轴上选择默认拉伸高度

justify-content：设置子元素在x方向的显示

设给子元素：flex：number：当前子元素在父元素中剩余空间占的份数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: #ccc;
            margin: 80px;
            display: flex;
            justify-content:space-between ;
            /* align-items: center; */
            /* flex-direction: row-r;
            flex-wrap: wrap; */
            /* flex-flow: row wrap; */
        }
        div p{
            width: 50px;
            height: 80px;
            /* flex: 1; */
            background-color: lightcoral;
           
            /* float: left; */
        }
        div p:nth-child(2){
            width: 150px;
            flex: initial;
            background-color: lightskyblue;
            /* flex: 2; */
        }
        /* div width:300px ——> 150px
        
           p=88+2+10——> 88*50% +2+20>100*50%
        
        
         */
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>
</html>

拓展
如何让子元素在父元素中水平和垂直居中：

1.行内元素：text-align:center;
line-height:height ;

2.块级元素：1.给父级元素设置display：flex
并且设置 align-items：center
justify-content：center
2.给父元素设置一个定位属性，子元素使用绝对定位
并且配合left，top50% ，再配合margin左上-50%来
挪到到中心点
3.给父元素一个定位属性，子元素一个绝对定位
给子元素的所有配合属性设置为0px，并且给子元素设置
margin auto属性
4.给父元素这是一个伸缩盒display：flex；
给子元素设置margin：auto