三栏布局的实现圣杯模式,,margin-left = -100%的理解,浮动盒子的放置规则

  • 当不需要main必须在前面时,可以采用简单写法
  • <!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>两栏布局,三栏布局</title>
        <style>
            .containter{
                width: 1000px;
                margin: 0 auto;
                background-color: blueviolet;
                overflow: auto;
            }
            .aside{
                width: 200px;
               float: left;
                background-color: red;
                height: 600px;
            }
            .main{
                overflow: hidden;
                background-color: green;
                height: 300px;
            }
            /* 2222222222222222 */
    
            .aside-l{
                width: 200px;
               float: left;
               height: 600px;
               background-color: yellow;
            }
            .aside-r{
                width: 200px;
               float: right;
               height: 600px;
               background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="containter">
            <aside class="aside">
    
            </aside>
            <div class="main">
                主
            </div>
        </div>
        <div class="containter">
            <aside class="aside-l">
                左
            </aside>
            <aside class="aside-r">
                右
            </aside>
            <div class="main">
                主
            </div>
        </div>
    </body>
    </html>
    

      

  • margin-left = 100%相对于父类的宽度去移动,,为神马会移上去,,想不通?????

 

  • 原因为:float元素会依次一行自动排开,宽度不够时就会换行,而main占据了所有故此,left和right就会换行,这就和display:inline-blick一样,
  • 当margin-left 为父元素的-100%时,就会上移动一行。,行盒放置时,就会根据margin放置,( 其实应该是左边框距离上个兄弟元素的margin-right )
  • 所以margin-left = -100% 就会上去,,float和display:inline-block 都会创建BFC ,,两者原理应该一直。
  •  

     

浮动盒子放置规则

  • 浮动盒子的顶边不得高于上一个盒子(上一个浮动)的定边;
  • 若空间不足时,先向下移动,再向左/右移动

三栏布局也叫双飞翼布局

  • 三列布局,中间宽度自适应,两边定宽;

  • 中间栏要在浏览器中优先展示渲染;

  • 允许任意列的高度最高;

  • 主要有margin-left = 100% 可以是其上移一行,,利用了box-sizing = padding + margin + border + cotnent
  • 其实left和right在container的padding上,, margin-left = 100%相对于父类的宽度去移动,,为神马会移上去,,想不通

圣杯模式写法:

  解读:

  1.  三个盒子都需要,float和position;父盒子,需要左右padding来留出左右距离。
  2. 左盒子设置,margin-left:-100%;盒子将会上移,但是由于是margin,所以会覆盖住主盒子;
  3. 所以需要再加入,position:relative;向左移动盒子大小,
  4. 右边相同过程;

而双飞翼:利用主盒子的子元素左右留出的margin就可以实现相同功能,又不需要定位的辅助;

  • <!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>盒子居中</title>
        <style>
            body {
                min-width: 550px;
            }
    
            .col {
                position: relative;
                float: left;
            }
    
            .container {
                padding: 0 190px 0 190px;
            }
    
            #main {
                width: 100%;
                height: 400px;
                background-color: #ccc;
            }
    
            #left {
                width: 190px;
                height: 400px;
                margin-left: -100%;
                left: -190px;
                background-color: #0000FF;
            }
    
            #right {
                width: 190px;
                height: 400px;
                margin-left: -190px;
                right: -190px;
                background-color: #FF0000;
            }
            .container{
                background-color: yellow;
                height: 600px;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <!--先写中间部分-->
            <div id="main" class="col">中间</div>
            <div id="left" class="col"></div>
            <div id="right" class="col"></div>
        </div>
    
    </body>
    
    </html>

     

 双飞燕模式:

多加入一个嵌套元素,不用相对定位了。

<!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>盒子居中</title>
    <style>
        .col {
            /* position: relative; */
            float: left;
        }
        #main{
            width: 100%;
        }

        #left {
            width: 190px;
            height: 400px;
            margin-left: -100%;
            background-color: #0000FF;
        }

        #right {
            width: 190px;
            height: 400px;
            margin-left: -190px;
            background-color: #FF0000;
        }
        .container{
            background-color: yellow;
            height: 600px;
        }
        #son{
           
            height: 400px;
            background-color: #ccc;
            margin: 0 190px ;
        }
    </style>
</head>

<body>
    <div class="container">
        <!--先写中间部分-->
        <div id="main" class="col">
            <div id="son">
                先写中间部分
            </div>
        </div>
        <div id="left" class="col"></div>
        <div id="right" class="col"></div>
    </div>

</body>

</html>

 

  •  绝对定位也可以实现,  

<!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>布局,绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{min-width: 700px;}
        #header,#footer{
            background-color: green;
            text-align: center;
        }
        #container{
            /* width: 100%; */
         
            height: 500px;
            background-color:gold;
            position: relative;
        }
        .column{
            position: absolute;
            height: 100%;
            top: 0;
           
        }
        #center{
            margin:0 150px 0 200px;
            /* width: 100%; */
            background-color: hotpink;
            height: 100%;
        }

        #right{
            right: 0;
            width:150px;
            background-color: blue;
        

        }
        #left{
            left: 0;
            width:200px;
            background-color: royalblue;
           
        }

    </style>

</head>

<body>
        <div id="header">header</div>
        <div id="container">
          <div id="center" class="">center</div>
          <div id="left" class="column">left</div>
          <div id="right" class="column">right</div>
        </div>
        <div id="footer">footer</div>

</body>
</html>
posted @ 2019-10-26 22:33  古月大叔  阅读(1055)  评论(0编辑  收藏  举报