经典布局

最新推荐文章于 2023-03-17 16:37:00 发布

小泽哥哥

最新推荐文章于 2023-03-17 16:37:00 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/weixin_43909591/article/details/99676208

版权

经典布局

一、两列自适应

原理：左列固定宽度，右列宽度100%，左列利用浮动覆盖右列达到两列效果而且右列内容会自动环绕左侧浮动盒子排放，利用了BFC规则。

<style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            width: 100%;
            height: 300px;
            background-color: red;
        }
        .col1 {
            width: 200px;
            height: 300px;
            background-color: blue;
       	    float: left;
        }
        .col2 {
            width: 100%;
            height: 300px;
            background-color: yellowgreen;
        }
        .box {
            width:25%;
            height: 100px;
            background-color: purple;
            float:  left;
            margin-left: 30px;
        }
    </style>
</head>
<body>
        <!-- 容器  最外层布局容器container -->
    <div class="container">
        <!-- col 列 -->
        <div class="col1">左侧 固定宽度 </div>
        <div class="col2"> 
            <div class="box"></div>
            自适应： 随着屏幕宽度而自动进行宽度调整  % 
            <div style="clear: both"></div>
        </div>
        <div style="clear: both"></div>
    </div>
</body>
</html>

二、等高布局

原理：给每一列添加相应的容器，并进行相互嵌套，并在每个容器中设置背景色，通过相对定位移动盒子到相应位置。

三、三列自适应

原理：负外边距+浮动+相对定位实现效果
1、中间盒子放在第一位

圣杯布局

利用内外边距去实现内容放置

描述：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
      
        /* 可以300px 不能小于 保持300px */
        min-height: 300px;
        height: auto;
        padding: 0px 200px;
    }
    .left,.right {
        width: 200px;
        height: 300px;
        
    }
    .left {
        background-color: aqua;
        float: left;
        margin-left: -100%;

        position: relative;
        left:-200px;
    }
    .right {
        background-color: darkred;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
    .center {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
        float: left;
    }
    </style>
</head>
<body>
    <div class="c">
          <!-- 100% -->
          <div class="center">中间盒子</div>
      
        <!-- 固定宽度 -->
        <div class="left">左列</div>
     
      
        <div class="right">右列</div>

        <div style="clear:both"></div>
    </div>
</body>
</html>

双飞翼布局

利用外边距去实现内容放置—》缺点：比圣杯，多加一个盒子，结构变得复杂

描述：

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
      
        /* 可以300px 不能小于 保持300px */
        min-height: 300px;
        height: auto;
     
    }
    .left,.right {
        width: 200px;
        height: 300px;
        
    }
    .left {
        background-color: aqua;
        float: left;
        margin-left: -100%;
      
    }
    .right {
        background-color: darkred;
        float: left;
        margin-left: -200px;
       
    }
    .center {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
        float: left;
    }
    .inner {
        margin: 0px 200px;
    }
    </style>
</head>
<body>
    <div class="c">
          <!-- 100% -->
          <div class="center">
              <!-- inner用来装内容  -->

            <div class="inner"> 中间盒子</div>
              
           
        </div>
      
        <!-- 固定宽度 -->
        <div class="left">左列</div>
     
      
        <div class="right">右列</div>

        <div style="clear:both"></div>
    </div>
</body>
</html>

小泽哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典布局

经典布局一、两列自适应一、两列自适应原理：左列固定宽度，右列宽度100%，左列利用浮动覆盖右列达到两列效果而且右列内容会自动环绕左侧浮动盒子排放，利用了BFC规则。<style> * { padding: 0; margin: 0; } .container { ...
复制链接

扫一扫