流式布局-两栏布局

最新推荐文章于 2024-06-28 14:13:55 发布

1planet

最新推荐文章于 2024-06-28 14:13:55 发布

阅读量567

点赞数

文章标签： css3 flex 定位

本文链接：https://blog.csdn.net/qq_42239440/article/details/107203348

版权

<!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>
        /* 1.利用bfc块级格式化上下文, 实现左侧固定右侧自适应
        (1) 让左边的盒子 float: left;
        (2) 让右边的盒子 overflow: hidden; */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 80%;
            margin: 20px auto;
            background-color: beige;
        }
        
        .father {
            height: 400px;
            background-color: rgb(84, 107, 128);
        }
        
        .left {
            height: 400px;
            width: 200px;
            float: left;
            background-color: red;
        }
        
        .right {
            height: 400px;
            background-color: blueviolet;
            /* 触发了bfc的盒子, 不与浮动的元素重叠 */
            overflow: hidden;
        }
        /* 2.利用定位实现左侧固定右侧自适应
        (1) 给父盒子设置padding-left 值
        (2) 给左侧子盒子设置width = padding-left ,并定位到父盒子的padding-left上.
        (3) 右侧盒子自适应 */
        
        .father2 {
            height: 300px;
            background-color: rgb(68, 44, 44);
            position: relative;
            /* 给父级设置paddig-left值!!!!!!!!!!!!!! */
            padding-left: 150px;
        }
        
        .left2 {
            position: absolute;
            left: 0;
            width: 150px;
            height: 300px;
            background-color: yellowgreen;
        }
        
        .right2 {
            height: 300px;
            background-color: red;
        }
        /* 3.利用flex布局 实现左侧固定右侧自适应
        (1) 给父盒子设置display:flex ;
        (2) 左侧盒子设置固定宽高 ,右侧盒子设置flex:1 ; */
        
        .father3 {
            height: 300px;
            background-color: rgb(255, 119, 119);
            display: flex;
        }
        
        .left3 {
            width: 200px;
            height: 300px;
            background-color: red;
        }
        
        .right3 {
            height: 300px;
            background-color: pink;
            flex: 1;
        }
        /* // */
        /* 右侧固定,左侧自适应 
        1.BCF:右侧:float:right,左侧:overfow:hidden
        此时的右侧要写在左侧的前面*/
        
        .father1 {
            height: 400px;
            background-color: rgb(40, 64, 85);
        }
        
        .left1 {
            height: 400px;
            background-color: aqua;
            /* 触发bfc */
            overflow: hidden;
        }
        
        .right1 {
            height: 400px;
            /* 让右侧盒子浮动到右边!!!!!!!!!!!!!! */
            float: right;
            width: 200px;
            background-color: crimson;
        }
        /* 2.利用flex布局 */
        
        .father4 {
            height: 100px;
            background-color: #fff;
            display: flex;
        }
        
        .right4 {
            width: 200px;
            height: 100px;
            background-color: bisque;
        }
        
        .left4 {
            height: 100px;
            flex: 1;
            background-color: brown;
        }
    </style>
</head>

<body>
    <h3>利用bfc块级格式化上下文:左侧固定,右侧自适应</h3>
    <div class="father">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <h3>利用定位实现左侧固定右侧自适应</h3>
    <div class="father2">
        <div class="left2">left</div>
        <div class="right2">right</div>
    </div>
    <h3>利用flex布局 实现左侧固定右侧自适应</h3>
    <div class="father3">
        <div class="left3">left</div>
        <div class="right3">right</div>
    </div>








    <h3>-----------------------------------------------------------------------------------------</h3>
    <h3>-----------------------------------------------------------------------------------------</h3>
    <h3>-----------------------------------------------------------------------------------------</h3>
    <h3>利用bfc块级格式化上下文:右侧固定,左侧自适应</h3>
    <div class="father1">
        <!-- 注意:此时的右侧盒子要写到左侧盒子的前面!!!!!!!!!! -->
        <div class="right1">right</div>
        <div class="left1">left</div>
    </div>
    <h3>利用flex布局 实现右侧固定左侧自适应</h3>
    <div class="father4">
        <div class="left4">left</div>
        <div class="right4">right</div>
    </div>





    <p>BFC 块级格式化上下文 Block Formatting Context: 页面上一个隔离的独立渲染区域 触发成为 BFC 盒子的特点: 触发了 BFC 的盒子, 就成为了页面上的一个隔离的独立容器, 容器里面的子元素不会在布局上影响到外面的元素 应用: 解决塌陷问题, 清除浮动 触发了BFC的普通盒子, 不会与浮动元素重叠 应用: 圣杯布局, 左侧固定右侧自适应 如何触发 BFC float: left; float: right; overflow的值不为visible。 display的值为inline-block、table-cell、table-caption
        position的值absolute, fixed</p>
</body>

</html>

1planet

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
流式布局-两栏布局

<!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> /* 1.利用bfc块级格式化.
复制链接

扫一扫