布局

最新推荐文章于 2025-05-09 16:47:21 发布

多看点书

最新推荐文章于 2025-05-09 16:47:21 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43789858/article/details/84502857

本文深入探讨了网页布局的多种方法，包括使用浮动(float)、网格(grid)、弹性盒子(flex)等技术解决常见布局问题，提供了丰富的代码示例，帮助读者掌握响应式设计的核心技能。

float
创建一个普通的，用方块模拟图像，现在我们让小方块浮动起来，改变它的文档流

<div class="news">
    <div class="item">       </div>
    <p>Ut exercitationem earum itaque eligendi ut. Incidunt molestiae dolorem. Qui quia qui cumque earum.</p>
</div>

在这里插入图片描述
但是我们看到边框并没有跟着小方块的长度进行变化，此时我们有三种方法解决float带来的问题

float：left；

在这里插入图片描述

html的父div的底部加一个清楚左边浮动的，这时一个空的div会排在该去的位置

<div style="clear:left"></div>

在这里插入图片描述

处理方法与上一个类似在尾部追加清除浮动效果，这个在父元素上追加。

.news::after{
    content: "";
    display: table;
   clear: both;
}

在这里插入图片描述overflow也可以用不过它本意是产生滚动条的，故不推荐

display: flow-root;

在这里插入图片描述
2. gride
用来创建二维格子
1fr 2fr 1fr 效果如下图，创建三列比例为1：2：1

    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 20px;

在这里插入图片描述
在表格中我们可以span row或者column在这里我们同样可以

grid-row-end: span 2;

在这里插入图片描述
还可以自定义表格其中.表示空白，设置完表格后我们又该怎么填充呢？我们应该告诉需要填充的块儿你是a 你是b。。

 grid-auto-rows: minmax(50,auto);
        grid-template-areas: 
        "a a a"
        "b c c"
        ". . d"
        "e f d"

.aaa{
        grid-area: a;
    }
    .bbb{
        grid-area: b;
    }
    .ccc{
        grid-area: c;
    }
    .eee{
        grid-area: e;
    }
    .ddd{
        grid-area: d;
    }
    .fff{
        grid-area: f;
    }

在这里插入图片描述
刚才我们使用跨行时用到了
grid-row-end: span 2; 有end 属性必然有start属性，若是把end start 联合起来用也可以自定义我们想要的列表

.a{
        grid-column: 1/4;
        grid-row: 1;
        background-color: bisque;
        border:2px solid royalblue;
    }
    .b{
        grid-column: 1/3;
        grid-row: 2;
        background-color: bisque;
        border:2px solid royalblue;
    }
    .c{
        grid-column: 2/4;
        grid-row: 2/5;
        background-color: bisque;
        border:2px solid royalblue;
    }
    .d{
        grid-column: 1;
        grid-row: 4;
        background-color: bisque;
        border:2px solid royalblue;
    }
    .e{
        grid-column: 3;
        grid-row:4/5; 
        background-color: bisque;
        border:2px solid royalblue;
    }

在这里插入图片描述

column
count和width属性同时有的时候默认使用width，我们发现有截断现象。如何处理呢？

 column-count: 3;
 /* column-width: 120px; */
column-gap: 20px;
 column-rule: 4px dotted lightblue;

在这里插入图片描述

.box2{
        width: 500px;
        border:  5px solid rgba(65, 105, 225, 0.514);
        border-radius: .5em;
        padding: 10px;
        column-width: 120px;
        column-count: 3;
        column-gap: 20px;
        column-rule: 4px dashed lightgreen;
        
    }
    .box2>p{
        /* 取消截断 */
        page-break-inside: avoid;
        break-inside: avoid;
    }

在这里插入图片描述
5. flex
用来创建一维格子

<div class="news">
        <div class="item">       </div>
        <div class="item"></div>
        <div class="item"></div>    
    </div>

在这里插入图片描述
我们发现紧密排列成了一排，通过flex-direction我们可以指定它的方向，注意下面片段均写在父元素上。

display: flex;
flex-direction:row-reverse;

在这里插入图片描述
在子元素即每个小图片上加一句下面代码
第一个值表示伸展值，第二个表示收缩值，第三个是图片默认大小。当图片默认大小铺满，或者没铺满时就会按照伸缩比例进行伸缩。

flex: 2 2 200px;

在这里插入图片描述