浮动，定位，弹性布局

最新推荐文章于 2024-02-20 15:24:25 发布

青天菜

最新推荐文章于 2024-02-20 15:24:25 发布

阅读量398

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/sunshixuan6666/article/details/127061587

版权

1.浮动：

让处置布局的的盒子变成水平布局（脱离标准流---脱标)

1.1：左浮动：left

右浮动：right

清除浮动：

同级元素浮动干扰清除 clear：both

父元素浮动干扰清除：overflow:hidden

ex:

<div>
        <ul class="qi">
            <li class="ll"></li>
            <li class="ll"></li>
            <li class="ll"></li>
        </ul>
    </div>

ul,li{
            list-style: none;
        }
        .qi{
            margin: 0 auto;
            width: 600px;
            height: 300px;
            background-color: aquamarine;
            
        }
        .ll{
            width: 190px;
            height: 90px;
            background-color: blueviolet;
            margin-left: 8px ;
            margin-top: 5px;
            
        }

加上浮动：float:left

2. 定位：

让页面中盒子在浏览器的任意位置布局

类型：

1.相对定位：相对于自己之前的的位置进行移动

position：relative

特点：1. 需要配合方位属性实现移动

2. 相对于自愿来的位置进行移动

3. 在页面中占位置 ————>没有脱标

2.绝对定位：相对于浏览器左上角的位置进行移动

position：absolute

特点：1. 需要配合方位属性实现移动

2. 相对于浏览器可视区域进行移动

3. 在页面中不占位置 ————>脱标

父（相对定位）子（绝对定位），子级会参考父级进行偏移

ex:可以在上面那个例子中给pi父级中加上(position: relative;),

子级加上（position: absolute;）

效果如下：

具体的效果可以根据自己进行长宽高等属性的调整，比如在列表级加入文字，将其表现在图上，就可以通过定位实现。

3.弹性布局：

作用：解决子元素盒子在父元素盒子中布局空间分布问题

公用属性：display:flex

将当前元素布局设置为flex弹性布局

常用属性：

1.父元素属性：

flex-direection 子元素在主轴方向顺序调整

flex-wrap 子元素在主轴方向换行调整

Justify-content 子元素在株洲方向上的对齐方式

algin-items 子元素在交叉轴上对齐方式

2.子元素属性

flex 比例分布

ex:

*{
         margin: 0px;
         padding: 0px;
        }

        .container{
            margin: 0px auto;
            width: 1000px;
            /* background-color: blanchedalmond; */
            border: 1px solid rgb(233, 48, 48);
            display: flex;
            /* flex-direction: row; */
            flex-wrap: wrap-reverse;
            /* flex-flow: row-reverse wrap-reverse; */
            justify-content:space-between;
           
        }
        .container div{
            width: 200px;
            height: 200px;
            background-color: aqua;
           
        }
        .container .item1{
            background-color: aquamarine;
        }
        .container .item2{
            background-color: blue;
        }
        .container .item3{
            background-color: blueviolet;
        }

<div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item1">4</div>
        <div class="item2">5</div>
        <div class="item3">6</div>
        <div class="item1">7</div>
        <div class="item2">8</div>
        <div class="item3">9</div>
    </div>