css 之页面常用布局

一、单列布局：

二、两列布局：

　　1、table布局（过去的主流布局方式）通过 table tr td布局

　　2、class 类比表格的方式

　　3、弹性盒模型 flexbox 关键在于父元素： display:flex;

　　4、float 浮动注意清除浮动（clear: both display:block）

　　5、inline-block布局不存在清除浮动问题适用与定宽的布局

　　6、定位

　　7、左侧可拖动，右侧有水平滚动条（使用resize属性+flex布局）

　　　　resize ：规定是否可由用户调整元素的尺寸，取值（none : 无法调整；both : 可调宽、高；horizontal : 可调宽；vertical : 可调高;)

<!-- <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS两列布局</title>
    <style type="text/css">
        /*
    两列布局：

        1、table布局（过去的主流布局方式）通过 table tr td布局
        2、class 类比表格的方式
        3、弹性盒模型 flexbox  关键在于父元素： display:flex;
        4、float 浮动  注意清除浮动（clear: both display:block）
        5、inline-block布局  不存在清除浮动问题 适用与定宽的布局
        6、定位
    
    */
        * {
            margin: 0;
            padding: 0;
        }

        /*  方式一 表格 */
        table {
             100%;
            height: 300px;
            border-collapse: collapse;
            margin-bottom: 50px;
        }

        .left {
            background-color: red;

        }

        .right {
            background-color: blue;
        }


        /*  方式二  class 类表格*/

        .table {
            display: table;
             100%;
            height: 300px;
            border-collapse: collapse;
            margin-bottom: 50px;

        }

        .tb_row {
            display: table-row;
        }

        .tb_cell {
            display: table-cell;
            vertical-align: middle;
        }
        /*  方式三  flex*/

        .parent3 {
             100%;
            height: 100px;
            display: flex;
        }
        .left3 {
             30%;
            height: 100%;
            background: aqua;

        }
        .right3 {
             70%;
            height: 100%;
            background:pink;

        }

        /*  方式四  浮动*/
        /* float布局 （float+margin）
            兼容性好 但是要注意清楚浮动（clear: both display:block）

            - 两列布局——左侧定宽，右侧自适应
                **关键：**
                *左侧设置float：left
                右侧：margin-left： leftWidth* 

            - 三列布局
                **关键：**
                *左侧设置float：left
                右侧设置float:right
                中间：margin-left： leftWidth；margin-right：rightWidth*

            
            */

        .parent4 {
             100%;
            height: 200px;
            margin-bottom: 50px;

        }

        .left4 {
             400px;
            height: 100%;
            float: left;
            background-color: red;
        }

        .right4 {
            height: 100%;
            margin-left: 200px;
            background-color: blue;
        }

        /*  方式五  行内块 */
        .parent5 {
            font-size: 0; 
             800px;
            height: 200px;
        }

        .left5 {
            font-size: 14px;
             300px;
            height: 200px;
            display: inline-block;
            background-color: red;
        }

        .right5 {
            font-size: 14px;
             500px;
            height: 200px;
            display: inline-block;
            background-color: blue;
        }

        /*  方式六  定位*/
        .parent6 {
             100%;
            height: 200px;
            position: relative;
        }

        .left6 {
             40%;
            height: 200px;
            position: absolute;
            background-color: gold;
        }

        .right6 {
             60%;
            height: 200px;
            position: absolute;
            right: 0;
            background-color: green;
        }



        /*  左侧宽度大小可拖动，右侧出现水平滚动条 , 使用  resize + flex 布局，要是 resize 生效，必须设置 overflow 属性*/
        .parent7 {
            display: flex;
            height: 200px;
            border: 2px solid #888;
        }
        .left7 {
            border-right: 2px solid #888;
             300px;
            height: 100%;
            resize: horizontal; /*  横向宽度可调整  */
            overflow: hidden; /*  必须设置overflow，resize 才会生效  */
            background: yellowgreen;
        } 
        .right7 {
            flex: 1;
            height: 100%;
            overflow-x: auto;  /*  横向滚动条  */
             calc(100vw - 200px);  /* CSS3 calc() 函数用于动态计算长度值 注意，运算符 - 前后都需要保留一个空格 ; vw 相对于视口的宽度，视口被均分为100单位的vw*/
        }

    </style>
</head>

<body>
    <!--  方式一 -->
    <h3>方式一 表格两列布局</h3>
    <table>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
    </table>

    <!--  方式二  -->
    <h3>方式二class 类表格两列布局</h3>
    <div class="table">
        <div class="tb_row">
            <div class="left tb_cell">左</div>
            <div class="right tb_cell">右</div>
        </div>
    </div>

    <!--  方式三  弹性盒模型  flex -->
    <h3>方式三  弹性盒模型  flex</h3>
    <div class="parent3">
        <div class="left3">左</div>
        <div class="right3">右</div>
    </div>

    <!-- 方式四 -->
    <h3>方式四 浮动 两列布局</h3>
    <div class="parent4">
        <div class="left4">左</div>
        <div class="right4">右</div>
    </div>
    <!-- **注意：float特点：尽量靠上，尽量靠左（右），所以右侧浮动div要先写，中间div后写** -->
    <!-- 浮动三列布局
        .middle{
            margin-left: 200px;  // 等于左侧宽度
            margin-right: 200px; // 等于右侧宽度
        } -->
    <!-- <div class="parent">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中</div>
    </div> -->


    <!-- 方式五  行内块  -->
    <h3> 方式五 行内块 两列布局</h3>
    <div class="parent5">
        <div class="left5">左</div>
        <div class="right5">右</div>
    </div>
    <!-- 注意： 想要父级元素的宽度等于两个子元素宽度之和，需要设置父级元素的 font-size：0 否则两个子元素不会再一行展示
同时，需要设置两个子元素的font-size: 14px； 否则子元素内的文字不会展示！
**想象成文字，注意间隙的处理！！！** 间隙存在于两个div间的空白 -->

    <!-- 方式六  定位 -->
    <h3> 方式六 定位  两列布局</h3>
    <div class="parent6">
        <div class="left6">左</div>
        <div class="right6">右</div>
    </div>
    <!-- 案例  -->
    <h3>  两列布局 之 左侧拖动</h3>
    <div class="parent7">
        <div class="left7">左</div>
        <div class="right7">右</div>
    </div>

</body>

</html>

三、三列布局

　　　　1、两边顶宽，中间自适应的三栏布局

　　　　　　（1）圣杯布局：中间的div设padding-right,padding-left,左右div用相对定位

　　　　　　（2）双飞翼布局：中间div设子div，子div的margin-left,margin-right

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圣杯布局与双飞翼布局</title>
    <style type="text/css">
    /*  
    圣杯布局：
        为了中间div内容不被遮挡，
        将中间div设置了左右padding-left和padding-right后，
        将左右两个div用相对布局position: relative并分别配合right和left属性，
        以便左右两栏div移动后不遮挡中间div。
    双飞翼布局：
        为了中间div内容不被遮挡，
        直接在中间div内部创建子div用于放置内容，
        在该子div里用margin-left和margin-right为左右两栏div留出位置。
    
    双飞翼布局比圣杯布局多创建了一个div，但不用相对布局。
    
     */

     /* 圣杯布局css  */
        *{margin: 0;padding: 0;}
        .container{padding: 0 200px 0 220px;}
        .left,.right,.middle{
            position: relative;
            min-height: 300px;
            float: left;
        }
        .middle{ 100%;background-color: green}
        .left{margin-left: -100%; 220px;left: -220px;background-color: aqua}
        .right{margin-left: -200px; 200px;right: -200px;background-color: yellow}
    

    /* 双飞翼布局css  */
        .middle-content{ 100%;}
        .left2,.right2,.middle-content{
            min-height: 100px;
            float: left;
            margin-top: 100px;
        }
        .middle2{margin: 0 200px 0 220px;min-height: 100px;background-color: palevioletred}
        .left2{margin-left: -100%; 220px;background-color: greenyellow}
        .right2{margin-left: -200px; 200px;background-color: gray}

    </style>


    
</head>
<body>
    <!-- 圣杯布局html  -->
    <div class="container">
        <div class="middle">

        </div>
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>

<!-- 双飞翼布局html  -->

    <div class="middle-content">
        <div class="middle2"></div>
    </div>
    <div class="left2">

    </div>
    <div class="right2">

    </div>

</body>
</html>

四、等高布局

　　原理：等高元素用padding填充，再用margin抵消，填充的padding高度要大于被截取高度（填充padding-bottom值最少为两个div中的最大高-最小高）

<!DOCTYPE html>
<!-- <!DOCTYPE> 用来告知 Web 浏览器页面使用了哪种 HTML 版本 
    常见的 DOCTYPE 声明：
    HTML 5 ===> <!DOCTYPE html>

    HTML 4.01 Strict  ===>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        // 这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的
    
    HTML 4.01 Transitional  ===> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        //  这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
        
    HTML 4.01 Frameset  ===>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
        // 这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容
 
    等等  详情查看：https://www.runoob.com/tags/tag-doctype.html
        
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS等高布局</title>
    <style type="text/css">
    /*
    等高原理：
    给等高个元素用 padding 来填充，然后用 margin 来消除 padding 带来的影响。
    未定高父元素的高度是子元素最大的高度（margin+padding+height）计算的，
    下面填充的padding-bottom 的值最小为 === 需要等高元素的最大高减去最小高的值。
    */
*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-140px;
padding-bottom:140px;
}
#left{
float:left;
250px;
background:#00FFFF;
}
#center{
float:left;
500px;
background:#FF0000;
}
#right{
float:right;
250px;
background:#00FF00;
}
p{line-height: 20px}
</style>
</head>
<body>
<div id="wrap">
    <div id="left">
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
    </div>
    <div id="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div id="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>
</html>

css 之 页面常用布局

css 之页面常用布局