点我学习html常用布局方式

左手的ㄟ右手 2022-12-29 15:27 86阅读 0赞

# 1、三栏布局 #

1.  **圣杯布局**
2.  双飞翼布局
3.  弹性盒子布局

--------------------

# 1.1、圣杯布局 #

1.在主体内部外面嵌套了一个div

2.center在结构上靠前

3.center，left，right都浮动

4.清除浮动

5.center宽度为100%，left，right宽度固定

6.left通过margin-left为负值（-100%），移动到center最左边

7.right通过margin-left为负值（自身的宽度），移动到center的最右边。

8.center的内容会被left，right遮盖

9.最外层div添加一个padding，padding的宽度为left，right的宽度。

10，left，right相对定位，移动到相应的位置。位移量为自身的宽度。

实例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                min-width: 620px;
            }
            
            header,
            footer {
                width: 100%;
                height: 100px;
                background-color: forestgreen;
                font-size: 30px;
                text-align: center;
            }
            
            .center,
            .left,
            .right {
                text-align: center;
                float: left;
                font-size: 30px;
            }
            
            .center {
                width: 100%;
                height: 400px;
                background-color: gold;
            }
            
            .clearfix::after {
                content: "";
                display: block;
                clear: both;
            }
            
            .clearfix {
                padding: 0 200px;
            }
            
            .left,
            .right {
                width: 200px;
                height: 400px;
                background-color: fuchsia;
            }
            
            .left {
                margin-left: -100%;
                position: relative;
                left: -200px;
            }
            
            .right {
                margin-left: -200px;
                position: relative;
                right: -200px;
            }
        </style>
    </head>
    
    <body>
        <header>页头</header>
        <div class="clearfix">
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <footer>页脚</footer>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][] 标题

#  #

--------------------

## 1.2、双飞翼布局 ##

1.      让left right center浮动
2.         设置left的margin-left为-100%
3.         设置right的margin-left为负的自身宽度
4.         在center中添加一个div，将内容写在这个div中
5.         为这个div添加一个margin，左右margin的值为left right的宽度。

实例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                min-width: 620px;
                font-size: 30px;
            }
            
            header,
            footer {
                width: 100%;
                height: 100px;
                background-color: forestgreen;
                font-size: 30px;
                text-align: center;
            }
            
            .center,
            .left,
            .right {
                text-align: center;
                float: left;
            }
            
            .center {
                width: 100%;
                height: 400px;
                background-color: gold;
            }
            
            .clearfix::after {
                content: "";
                display: block;
                clear: both;
            }
            
            .left,
            .right {
                width: 200px;
                height: 400px;
                background-color: fuchsia;
            }
            
            .left {
                margin-left: -100%;
            }
            
            .right {
                margin-left: -200px;
            }
            
            .home {
                margin: 0 200px;
            }
        </style>
    </head>
    
    <body>
        <header>页头</header>
        <div class="clearfix">
            <div class="center">
                <div class="home">center</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <footer>页脚</footer>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]

**圣杯布局和双飞翼布局的区别：**

1.  在解决center内容被覆盖不同
2.    圣杯：外盒子的padding+left right的相对定位
3.         双飞翼布局：子盒子的margin

--------------------

# 1.3、弹性盒子布局 #

1.         添加一个最外层的div home
2.          将home设置为弹性盒子
3.          left right 固定宽度 center不设置宽度
4.          利用 flex-grow: 1；将center设置为自适应     
5.          利用order属性，将left的order设置为-1，将left调到前边

实例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                font-size: 40px;
            }
            
            header,
            footer {
                width: 100%;
                height: 100px;
                background-color: forestgreen;
                text-align: center;
            }
            
            .home {
                display: flex;
                width: 100%;
            }
            
            .center {
                flex-grow: 1;
                height: 400px;
                background-color: gold;
            }
            
            .left {
                order: -1;
            }
            
            .left,
            .right {
                width: 200px;
                height: 400px;
                background-color: fuchsia;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <header>页头</header>
        <div class="home">
            <div class="center">centercentercentercentercentercenter</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <footer>页脚</footer>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2][]

# 2、百分比布局 #

1、标准文档流+浮动：

宽：相对于父盒子内容宽度的比值。

高：相对于父盒子内容高度的比值。

padding/margin：相对于父盒子内容宽度的比值。

2、绝对定位：

宽/padding/margin：相对于定位盒子的宽+左右padding的比值。

高：相对于定位盒子的高+上下padding的比值。

【注】border：不能使用百分数。

实例百分比布局移动端：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: "微软雅黑";
            }
            
            a {
                text-decoration: none;
            }
            
            .stepDiv {
                margin-top: 100px;
                width: 100%;
                height: auto;
                overflow: hidden;
                box-sizing: border-box;
                padding: 3px 5px 10px;
            }
            
            .stepDiv .step {
                display: block;
                width: 20%;
                height: auto;
                text-align: center;
                box-sizing: border-box;
                float: left;
                margin-top: 10px;
                color: #333;
                font-size: 12px;
            }
            
            .step img {
                display: block;
                width: 60%;
                margin: 0 auto 10px auto;
            }
        </style>
    </head>
    
    <body>
        <div class="stepDiv">
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-3.png" alt=""> 蔬菜豆菇
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-4.png" alt=""> 新鲜水果
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-5.png" alt="">鲜肉蛋禽
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-6.png" alt=""> 水产海鲜
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-7.png" alt="">速食速冻
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-8.png" alt=""> 粮油副食
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-9.png" alt=""> 酒类
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-10.png" alt="">牛奶饮料
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-11.png" alt=""> 日用百货
            </a>
            <a href="#" class="step">
                <img src="http://www.geilisx.com/public/Mobile/images/nav-12.png" alt=""> 关于我们
            </a>
        </div>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/eee6df2483074761a4da48f83032d43c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: /images/20221120/567f471bdc1140be8a6692a017e327ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2]: /images/20221120/e8d396acb0994bf5ac38a945a9cf87d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3]: /images/20221120/e031a9914b434bc487035af4824794c7.png