三栏布局的实现圣杯模式，，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  古月大叔  阅读(1605)  评论(0)  编辑  收藏  举报