css网页布局的5种方式

最新推荐文章于 2024-11-22 10:26:08 发布

原创最新推荐文章于 2024-11-22 10:26:08 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #定位 #html #html5

本文介绍了CSS网页布局的五种方式：固定布局，通过width、height等属性设置；流动布局，使用百分比实现响应式；弹性盒子布局，利用flex实现灵活布局；网格布局，创建二维布局；多列布局，适用于内容分栏显示。每种布局都有其适用场景和特点。

网站布局方式

1.固定布局

①给要设置布局的块元素直接利用元素width、height、margin、padding来设置块元素布局位置。

<div class="par"><span class="par_1">固定布局</span></div>
<style>
.par{
	width:200px;
	height:200px;
	border:1px solid red;
	/*水平居中*/
	margin:auto;
	/*span文本居中*/
	text-align:center;
	line-height:200px	
}
</style>

这种方式是最常见，最基础的布局方式。

②使用固定定位fixed,元素脱离文档流之后，设置top、right、bottom、left以及z-index(分层）。

<div class="fixedblock"></div>
<style>
.fixedblock{
            width: 50px;
            height: 200px;
            border: 1px solid #000;
            background-color: aqua;
            position: fixed;
            z-index: 10;
            right: 10px;
            top: 200px;
        }
</style>

常见的侧边框就是可以用这种方式设置，固定在一个位置不随滚动条的滑动而变化。

注意：

width和height这两个属性的取值此时设为固定值（px）。

2.流动布局

流动布局与固定布局基本不同点就在于对网站尺寸的测量单位不同。流动布局也叫百分比布局，它的测量单位是“%”。这里所说的测量单位是针对width、height属性而言的，百分比的值是基于父级元素得来的。因此，流动布局和固定布局除了测量单位的设置不同外其余设置方式都相同。

3.弹性盒子布局（flex 进行布局）

具体的理论内容可以参看CSS Grid 网格布局教程__阮一峰

<p align="center">弹性盒子布局</p>

<div class="par">
    <div class="par1">1</div>
    <div class="par2">
        <div class="par2_1">我是文本</div>
    </div>
    <div class="par3">
        <div>1.1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="par4">4</div>
</div>
<style>
    /*
    弹性布局的样式，flex
    常用在手机app和手机网站
    */
    .par{
        border: 1px solid #000000;
        width: 310px;
        height: 200px;
        /*margin设置成auto，块元素会在无其他元素的情况下自动水平居中*/
        margin: auto;
        /*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
        display: flex;
        /*设置容器按照行显示！！！*/
        flex-direction: column;
    }
    .par1{
        /*分配的空间*/
        flex: 1;
        /*分配的空间顺序*/
        order: 2;
        border: 1px solid #c0c0c0;

    }
    .par2{
        /*分配空间。空间是所占位置的比例*/
        flex: 2;
        /*分配的空间顺序。定义项目的排列顺序，数值越小，排列越靠前，默认为0*/
        order: 3;
        border: 1px solid #c0c0c0;
        display: flex;
        /*设置项目在交叉轴上居中*/
        align-items: center;
        /*设置x轴对齐*/
        justify-content: center;
    }
    .par2_1{
        display: flex;
        width: 1000px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid lightcoral;
    }
    .par3{
        /*分配的空间*/
        flex: 3;
        order: 4;
        border: 1px solid #c0c0c0;
        display: flex;
        flex-direction: row;
        /*设置溢出折行 nowrap*/
        flex-wrap: nowrap;
    }
    .par3>div{
        flex: 1;
        border: 1px solid blue;
    }
    .par4{
        flex: 1;
        order: 1;
        border: 1px solid #c0c0c0;
    }
</style>

代码运行图：
代码运行结果

4.网格布局

<p align="center">网格布局grid</p>

<div class="wrap">
    <div class="wrap1">1</div>
    <div class="wrap2">2</div>
    <div class="wrap3">
        <div class="th3">3</div>
    </div>
    <div class="wrap4">4</div>
</div>
<style>
    .wrap{
        margin: auto;
        width: 1190px;

        /*设置网格布局*/
        display: grid;
        /*
        设置网格属性：
        设置列的宽：fr(为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
                  如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。);列宽也可以用固定值，百分比值，重复列。
        */
        /*grid-template-columns:100px 100px ;*/
        grid-template-columns: repeat(3,33.333%);
        /*repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
          repeat()重复某种模式也是可以的。*/
        grid-template-rows: repeat(4,40px);
        /*设置网格间隙值*/
        /*grid-gap:10px;*/
        border: 1px solid #000000;
    }
    .wrap1{
        border: 1px solid deeppink;
        grid-row:1/3;
        grid-column: 1/3;
    }
    .wrap2{
        border: 1px solid deeppink;
        grid-column: 2/4;
        grid-row:1/2;
        background-color: #ff8f3c;
        display: grid;
    }
    .wrap3{
        border: 1px solid deeppink;
        grid-column: 3/4;
        grid-row:2/6;
        background-color: pink;
        /*设为网格布局以后，容器子元素（项目）的float、
        display: inline-block、
        display: table-cell、
        vertical-align和column-*等设置都将失效。*/
        display: grid;
    }
    .wrap4{
        border: 1px solid deeppink;
        /*表示从第一列起第三列前结束，包含第一列+第二列的列宽*/
        grid-column: 1/3;
        /*表示从三行开始到第六行前结束，应该包含第一行，第二行，第三行，第四行，第五行。
        由于grid容器的分层只分了3列4行，所以这里的3/6就表示3/5
        */
        grid-row:3/6;
        background-color: chartreuse;

    }
    .th3 {
        width: 30px;
        height: 30px;
        border: 1px solid #000;
    }
</style>

代码运行图：
在这里插入图片描述

5.多列布局

<p align="center">多列布局</p>
<div class="block">
    <div>1
        李银河与丈夫王小波是通过一个共同的朋友认识的，在1977年他们是第一次见面，那时李银河还在山西大学上学。
        第一次见面后，王小波就开始追求李银河。
        第一次见面时，他们那个共同的朋友去小波家找他的父亲探讨问题。
        王小波的父亲是人民大学的逻辑学教授。李银河看到了一本小说，这部小说让李银河产生了共鸣，当时留了个心眼看看这个小说的作者是谁，一看是王小波写的，当时心里就有了好感。
    </div>
    <div></div>
    <div>3</div>
</div>
<style>
    .block{
        margin: auto;
        width: 1000px;
        /*设置列数*/
        column-count:3;
        /*设置竖线的*/
        column-rule: 1px solid #000;
        border: 1px solid #000;

    }
    .block>div{
        border: 1px solid red;
        height: 200px;
        /*设置里面的文本的列宽column-width:50px;
        设置里面的列数用column-count:4;
        这两个只会有一个生效
        */

        column-count:4;
        /*column-width:50px;*/
        column-rule: 1px solid pink;

    }
</style>

代码运行结果：
在这里插入图片描述