双飞翼布局、列表布局、圣杯布局、新浪布局

最新推荐文章于 2021-06-17 05:40:23 发布

W_mizi

最新推荐文章于 2021-06-17 05:40:23 发布

阅读量191

点赞数

分类专栏： HTML+CSS 文章标签：各种布局

本文链接：https://blog.csdn.net/W_mizi/article/details/83719962

版权

HTML+CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

双飞翼布局：中间自适应，两边固定

中间的盒子固定没有确定的宽度，根据margin来计算宽度，没有显性设置宽度，来达到自适应的目的
为了让left，right，contain放在一行内，使用了浮动布局。float：left
left固定在整个浏览器的右边，根据margin-left的值来进行调整，移动contain的宽度，为了让left宽度固定，所以显性的设置了宽度
right在原本left盒子位置的右边，根据margin-left的值来进行调整，移动自身的宽度，显性设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .contain{
            float: left;
            width: 100%;
            height: 200px;
        }
        .main{
            margin: 0 210px;
            height: 500px;
            background-color: brown;
        }
        .left{
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 300px;
            background-color: blueviolet;
        }
        .right{
            float: left;
            margin-left: -200px;
            width: 200px;
            height: 400px;
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>  
    <!-- 中间盒子自适应 -->      
    <div class="contain">       
        <div class="main"></div>      
    </div>
    <!-- 两边的盒子固定 -->
    <div class="left"></div>
    <div class="right"></div>
  
</body>
</html>

列表布局：在固定像素的容器内，均匀放置多个元素

固定宽度，固定间距，计算每个元素的宽度,元素的个数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0;
            list-style-type: none;
        }
        .contain{
            width: 500px;
            overflow: hidden;
            margin: 0 auto;
            border: 1px solid black;
        }
        li{
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            width: 92px;
            height: 90px;
            background-color: cadetblue;
        }
        li:last-child{
            margin-right: -10px;
        }
    </style>
</head>
<body>  
    <div class="contain">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
			<!-- 最后这一个li因为margin-right的原因会被挤到下面去，所以要删除最后一个的margin-left值 -->
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
			<!-- 最后这一个li因为margin-right的原因会被挤到下面去，所以要删除最后一个的margin-left值 -->
        </ul>
    </div>

</body>
</html>

圣杯布局，自适应等高布局

要求：高度等高，宽度自适应

利用浮动布局将元素都放再同一行中
设置盒子的高度，使的每一个盒子的高度都是不一样的
通过overflow：hidden。来清除浮动，根据清除浮动的原理，切割点是最高盒子的高度
利用负值margin属性和正值padding属性将不够高盒子拉长，撑开的高度是自身高度和最高盒子的差值。

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .contain{
            width: 90%; 
            margin: 50px auto;  
            overflow: hidden; /* 注意理解这一部分的意思  */       
        }
        .one{
            float: left;
            width: 33.3%;
            height: 300px;
            background-color: blueviolet; 
            padding-bottom: 500px;
            margin-bottom: -500px; /* 注意理解这一部分的意思  */         
        }
        .two{
            float: left;
            width: 33.3%;
            height: 500px;
            background-color: rgb(226, 43, 119);            
            padding-bottom: 500px;
            margin-bottom: -500px; 
        }
        .three{
            float: left;
            width: 33.3%;
            height: 400px;
            background-color: rgb(43, 122, 226);            
            padding-bottom: 500px;
            margin-bottom: -500px; 
        }
    

    </style>
</head>
<body>
    <div class="contain">
    <div class="one"></div>  
    <div class="two"></div> 
    <div class="three"></div> 
    </div>    
</body>
</html>

新浪布局，头部，尾部和中间的两个部分

极其简单的一种布局方式，分为header，footer，left和right，左右两部分是包含在contain中的，只要设置各自的宽高即可。
注意footer部分需要清除浮动，使用多种方法皆可清除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;

    }
    .header{
        width: 100%;
        height: 200px;
        background-color: cornflowerblue;
    }
    .contain{
        width: 80%;
        margin: auto;       
    }
    .left{
        float: left;
        width: 70%;
        height: 700px;
        background-color: blueviolet;

    }
    .right{float: left;
        width: 30%;
        height: 500px;
        background-color: coral;
    }
    .footer{
        
        width: 100%;
        height: 100px;
        background-color: darkblue;
        margin-bottom: 0;
    }
    
    .clearfix::after{
        content: "";
        display: block;
        clear: both;  /* 清除浮动的方法有很多 */
    }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="contain clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer "></div>
    
</body>
</html>

以上布局都只是设置了背景颜色，只是及其简单的设置了一下布局。