利用CSS实现一边固定一边自适应的盒子H5写法

使用五种方法来实现DIV的一边固定一边自适应写法,并分析各自特点。

第一种(CSS3):
.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{
     width: 100%;
     height: 100%;
     min-height: 300px;
     line-height: 200px;
     overflow: hidden;
     margin: 30px 0;
     position: relative;
}
.wrapper1 .custom{
    width: 200px;
    border-right: 1px solid white;
}
.wrapper1 .auto{
    width: calc(100% - 201px);
}
.wrapper1 .custom, .wrapper1 .auto{
    height: 200px;
    float: left;
    color: white;
    background: black;
}

现在CSS3都已经普及了,移动端更是,通常使用CSS3较多,所以第一种就是利用CSS3来写了。

CSS3中新增一种新的属性  CALC  :

使用方法:   width: calc(100% - 200px);

这一功能通俗易懂,简单的加减乘除谁不会啊,只需要了解盒子宽高(padding + margin + border),若使用border-box除外。

自适应盒子一个100%宽  -  固定盒子宽  =  自适应的宽。


第二种(CSS3):
.wrapper2 .custom, .wrapper2 .auto{
    height: 200px;
    color: white;
    background: black;
    position: absolute;
    top: 31px;
}
.wrapper2 .custom{
    width: 200px;
    border-right: 1px solid white;
    left: 0;
    z-index: 1;
}
.wrapper2 .auto{
    left: 0;
    width: 100%;
    padding-left: 200px;
    box-sizing: border-box;
}

利用绝对定位来写,给父元素一个相对定位,固定与自适应盒子各一个绝对定位,当然你也可以只给第二个盒子。

没太多要点,需要注意的就是在box-sizing这里需设置borde-box。

脱离了文档流的DIV宽度100%是等于设备像素宽,所以需要给DIV增加一个padding值,那么增加了padding值的话,相当于是100%的宽度  +  200px padding宽度,这样导致DIV子元素居中不对称,所以使用box-sizing来辅助。


第三种(CSS3):
.wrapper3{
     display: flex;
     flex: 1;
}
.wrapper3 .custom{
     width: 200px;
     height: 200px;
     flex: none;
     border-right: 1px solid white;
     color: white;
     background: black;
}
.wrapper3 .auto{
     flex: 1;
     color: white;
     background: black;
}

同样的,CSS3新增了一种布局方式,display:flex;这种功能非常强大,若想学好H5,这个功能必定要会使用,可以不记,但要知道它有哪些辅助属性,具体可以通过W3C了解。

小弟不才,自己写了一下,但是做笔记的时候没写好,给自己写了几个坑,所以一定要试了才知道,不要一味的看,看了不动手或不用也记不住点击打开链接

使用方法:

给父元素设定: display: flex;flex: 1;

设定后,子元素默认为横向布局,无论里面的子元素是块还是行,具体不多做介绍...

flex: 1;代表分成几份,这里是1份。

固定的元素自定义宽度,自适应的设为flex: 1;宽度不需要设定,自适应的宽,当然也可以设auto。



第四种(table):
.wrapper4{
    display: table;
}
.wrapper4 .custom, .wrapper4 .auto{
    display: table-cell;
    background: black;
    color: white;
}
.wrapper4 .custom{
    width: 200px;
    height: 200px;
    border-right: 1px solid white;
}
.wrapper4 .auto{
    width: auto;
    height: 100%;
}

display: table;这种方式对于运用较少的人来说,属于冷门型的,若要想IE8下就不要用这种了。

理解:

给父元素定义table相当于是让父元素以块级的表格来显示,然后定义子元素,子元素的定义用display: table-cell; 此时的子元素相当于表格内的td元素,表格大家应该用的多,这个就不多做解释了。

缺点:

若父元素设了高度,那么子元素无论你设多高他都按照父元素的高度来定。



第五种(BFC):
.wrapper5 .custom{
    width: 200px;
    height: 200px;
    float: left;
    border-right: 1px solid white;
}
.wrapper5 .auto{
    height: 200px;
}
.wrapper5 .custom, .wrapper5 .auto{
    background: black;
    color: white;
}

是时候介绍一下压轴的方法了,简单、明了、“暴力美”,还TM接地气。

只需要给固定元素设宽高,重点是浮动,第二个就不用管了,只要设一个高就搞定!




贴上文档源码!

<!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;
        }
        body{
            text-align: center;
        }

        /* 第一种利用calc计算 */
        .wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5{
            width: 100%;
            height: 100%;
            min-height: 300px;
            line-height: 200px;
            overflow: hidden;
            margin: 30px 0;
            position: relative;
        }
        .wrapper1 .custom{
            width: 200px;
            border-right: 1px solid white;
        }
        .wrapper1 .auto{
            width: calc(100% - 201px);
        }
        .wrapper1 .custom, .wrapper1 .auto{
            height: 200px;
            float: left;
            color: white;
            background: black;
        }

        /* 第二种利用绝对定位 */

        .wrapper2 .custom, .wrapper2 .auto{
            height: 200px;
            color: white;
            background: black;
            position: absolute;
            top: 31px;
        }
        .wrapper2 .custom{
            width: 200px;
            border-right: 1px solid white;
            left: 0;
            z-index: 1;
        }
        .wrapper2 .auto{
            left: 0;
            width: 100%;
            padding-left: 200px;
            box-sizing: border-box;
        }

        /* 第三种利用flex */
        .wrapper3{
            display: flex;
            flex: 1;
        }
        .wrapper3 .custom{
            width: 200px;
            height: 200px;
            flex: none;
            border-right: 1px solid white;
            color: white;
            background: black;
        }
        .wrapper3 .auto{
            flex: 1;
            height: 200px;
            color: white;
            background: black;
        }

        /* 第四种表格 */
        .wrapper4{
            display: table;
        }
        .wrapper4 .custom, .wrapper4 .auto{
            display: table-cell;
            background: black;
            color: white;
        }
        .wrapper4 .custom{
            width: 200px;
            height: 200px;
            border-right: 1px solid white;
        }
        .wrapper4 .auto{
            width: auto;
            height: 100%;
        }

        /* 第五种BFC */
        .wrapper5 .custom{
            width: 200px;
            height: 200px;
            float: left;
            border-right: 1px solid white;
        }
        .wrapper5 .auto{
            height: 200px;
        }
        .wrapper5 .custom, .wrapper5 .auto{
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <h2>第一种</h2>
    <div class="wrapper1">
        <div class="custom">
            <p>我是自定义</p>
        </div>
        <div class="auto">
            <p>我是自适应</p>
        </div>
    </div>

    <h2>第二种</h2>
    <div class="wrapper2">
            <div class="custom">
                <p>我是自定义</p>
            </div>
            <div class="auto">
                <p>我是自适应</p>
            </div>
        </div>

        <h2>第三种</h2>
    <div class="wrapper3">
            <div class="custom">
                <p>我是自定义</p>
            </div>
            <div class="auto">
                <p>我是自适应</p>
            </div>
        </div>
        </div>

        <h2>第四种</h2>
    <div class="wrapper4">
            <div class="custom">
                <p>我是自定义</p>
            </div>
            <div class="auto">
                <p>我是自适应</p>
            </div>
        </div>

        <h2>第五种</h2>
    <div class="wrapper5">
            <div class="custom">
                <p>我是自定义</p>
            </div>
            <div class="auto">
                <p>我是自适应</p>
            </div>
        </div>
</body>
</html>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/M51921/article/details/80338124
个人分类: 前端H5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭