前端常用布局

最新推荐文章于 2023-08-15 20:27:29 发布

qq_32035241

最新推荐文章于 2023-08-15 20:27:29 发布

阅读量164

点赞数

文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_32035241/article/details/108258664

版权

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局</title>
    <link href="../css/buju.css" rel="stylesheet">
</head>

<body>
    <p>1、margin左右布局，左边宽度100px;右边自适应</p>
    <div class="parent1">
        <div class="left1">
            <p>左边定宽</p>
        </div>
        <div class="right1">
            <p>右边自适应</p>
        </div>
    </div>
    <p>2、overfloat:hidden 左右布局，左边宽度100px;右边自适应</p>
    <div class="parent2">
        <div class="left2">
            <p>左边定宽</p>
        </div>
        <div class="right2">
            <p>右边自适应</p>
        </div>
    </div>
    <p>3、calc左右布局，左边宽度100px;右边自适应</p>
    <div class="parent3">
        <div class="left3">
            <p>左边定宽</p>
        </div>
        <div class="right3">
            <p>右边自适应</p>
        </div>
    </div>

    <p>4、flex左右布局，左边宽度100px;右边自适应</p>
    <div class="parent4">
        <div class="left4">
            <p>左边定宽</p>
        </div>
        <div class="right4">
            <p>右边自适应</p>
        </div>
    </div>

    <p>5、flex三列布局，左右固定，中间自适应</p>
    <div class="parent5">
        <div class="main5">中间部分</div>
        <div class="left5">
            <p>左边定宽</p>
        </div>
        <div class="right5">
            <p>右边自适应</p>
        </div>
    </div>

    <p>6、float三列布局，左右固定，中间自适应</p>
    <div class="parent6">

        <div class="left6">
            <p>左边定宽</p>
        </div>

        <div class="right6">
            <p>右边自适应</p>
        </div>
        <div class="main6">中间部分</div>
    </div>

    <p>7、float三列布局，左右固定，中间自适应</p>
    <div class="parent7">

        <div class="left7">
            <p>左边定宽</p>
        </div>
        <div class="main7">中间部分</div>
        <div class="right7">
            <p>右边自适应</p>
        </div>

    </div>

    <p>8、圣杯布局</p>
    <section class="parent8">

        <section class="col main8">中间部分</section>
        <aside class="col left8">
            <p>左边定宽</p>
        </aside>
        <aside class="col right8">
            <p>右边自适应</p>
        </aside>

    </section>
    <p>9、双飞翼布局</p>
    <div class="parent9">
        <div class="col2 center">
            <div class="col2 main9">中间部分</div>
        </div>
        <div class="col2 left9">
            <p>左边定宽</p>
        </div>

        <div class="col2 right9">
            <p>右边自适应</p>
        </div>
    </div>

    <p>10、flex 中间固定，两边自适应</p>
    <div class="parent10">

        <div class="left10">
            <p>左边自适应</p>
        </div>
        <div class="main10">中间定宽</div>
        <div class="right10">
            <p>右边自适应</p>
        </div>
    </div>

    <p>11、利用calc 中间固定，两边自适应</p>
    <div class="parent11">

        <div class="left11">
            <p>左边自适应</p>
        </div>
        <div class="main11">中间定宽</div>
        <div class="right11">
            <p>右边自适应</p>
        </div>
    </div>
</body>

</html>

css

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

.parent1 {
    width: 100%;
    height: 100px;
    background-color: red;
}

.left1 {
    width: 100px;
    height: 100%;
    float: left;
    background-color: blue;
}

.right1 {
    margin-left: 100px;
    height: 100%;
    background-color: yellow;
}


/* 2、 overflow:hidden  会生成BFC */

.parent2 {
    width: 100%;
    height: 100px;
    background-color: red;
}

.left2 {
    width: 100px;
    height: 100%;
    float: left;
    background-color: blue;
}

.right2 {
    overflow: hidden;
    height: 100%;
    background-color: yellow;
}


/* 3、利用calc函数计算div的宽度 */

.parent3 {
    width: 100%;
    height: 100px;
    background-color: red;
}

.left3 {
    width: 100px;
    height: 100%;
    float: left;
    background-color: blue;
}

.right3 {
    width: calc(100% - 100px);
    /* 因为宽度减少了，不浮动的话无法和left平行 */
    float: left;
    height: 100%;
    background-color: yellow;
}


/* 4、利用flex布局 */

.parent4 {
    width: 100%;
    height: 100px;
    background-color: red;
    display: flex;
}

.left4 {
    flex: 0 0 100px;
    height: 100%;
    background-color: blue;
}

.right4 {
    flex: 1;
    height: 100%;
    background-color: yellow;
}


/* 5、利用flex布局中间自适应 */

.parent5 {
    width: 100%;
    height: 100px;
    /* background-color: red; */
    display: flex;
}

.main5 {
    flex: 1;
    background-color: aqua;
}

.left5,
.right5 {
    background-color: blue;
    flex: 0 0 100px;
    height: 100%;
}

.left5 {
    order: -1;
}


/* 6、利用float中间自适应,要保证中间的div在最后面，这样float:right就不会出问题 */

.parent6 {
    width: 100%;
    height: 100px;
    background-color: red;
}

.main6 {
    margin: 0px 100px;
    /* width: 100%; */
    /* width:calc(100%-200px); */
    height: 100%;
    background-color: aqua;
}

.left6 {
    float: left;
    width: 100px;
    height: 100%;
    background-color: blue;
}

.right6 {
    float: right;
    width: 100px;
    height: 100%;
    background-color: blue;
}


/* 7、利用calc中间自适应,*/

.parent7 {
    width: 100%;
    height: 100px;
    background-color: red;
    overflow: hidden;
}

.main7 {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: aqua;
}

.left7,
.right7 {
    float: left;
    width: 100px;
    height: 100%;
    background-color: blue;
}


/* 圣杯布局和双飞翼布局都是为了先渲染主体部分，再渲染两边 */


/* 圣杯                                  双飞翼
优点      结构简单                          支持各种宽高变化
缺点      中间部分宽度小于左侧，布局混乱     dom结构多余 */


/* 8、圣杯布局*/

.parent8 {
    /* width: 100%; */
    height: 100px;
    /* 重点是padding */
    padding: 0 100px;
    background-color: red;
    overflow: hidden;
}

.col {
    position: relative;
    float: left;
}

.main8 {
    width: 100%;
    height: 100%;
    background-color: aqua;
}

.left8,
.right8 {
    width: 100px;
    height: 100%;
    background-color: blue;
}

.left8 {
    margin-left: -100%;
    left: -100px;
}

.right8 {
    margin-left: -100px;
    right: -100px;
}


/* 9、双飞翼布局*/

.parent9 {
    width: 100%;
    height: 100px;
    background-color: red;
    overflow: hidden;
}

.col2 {
    float: left;
}

.center {
    width: 100%;
    height: 100%;
    background-color: aqua;
}

.main9 {
    margin: 0 100px;
}

.left9,
.right9 {
    float: left;
    width: 100px;
    height: 100%;
    background-color: blue;
}

.left9 {
    margin-left: -100%;
}

.right9 {
    margin-left: -100px;
}


/* 10、flex 中间固定，两边自适应*/

.parent10 {
    width: 100%;
    height: 100px;
    background-color: red;
    display: flex;
    flex-direction: row;
}

.main10 {
    width: 800px;
    height: 100%;
    background-color: aqua;
}

.left10,
.right10 {
    flex-grow: 1;
    height: 100%;
    background-color: blue;
}


/* 11、利用calc中间固定，两边自适应*/

.parent11 {
    width: 100%;
    height: 100px;
    background-color: red;
    overflow: hidden;
}

.main11 {
    float: left;
    width: 800px;
    height: 100%;
    background-color: aqua;
}

.left11,
.right11 {
    float: left;
    width: calc(50% - 400px);
    /* width: calc(50% - 500px); */
    height: 100%;
    background-color: blue;
}