前端3+1（Day1）

2023-12-11 17:13:04

前端3+1(Day1)

圣杯与双飞翼布局区别

我发现：
两者都是一样的布局，只是，中间部分略有区别

圣杯布局要求：

header和footer各占一半，高度固定
中间的container是一个三栏布局
三栏布局两侧的宽度固定不变，中间部分自动填充整个区域
中间部分的高度其实是三栏高度最高的

圣杯布局的操作

<!-- 圣杯布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端3+1（Day1）</title>
    flex布局
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 550px;
        }
        #header,#footer{
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: rgb(66, 64, 64);
        }
        #container{
            display: flex;
            height: 300px;
            text-align: center;
            line-height: 300px;
        }
        #left,#center,#right{
            /* flex-flow: column; */
            flex: 1;
            width: 150px;
        }
        #left{
            background-color: cornflowerblue;
        }
        #center{
            background-color: rgb(138, 137, 134);
        }
        #right{
            background-color: darkgoldenrod;
        }
    </style>
    <!-- 定位（自己写的） -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 550px;
        }
        #header,#footer{
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: rgb(66, 64, 64);
        }
        #container{
            position: relative;
            /* float: left; */
            height: 300px;
            line-height: 300px;
            text-align: center;
        }
        #left,#right,#center{
            position: absolute;
            /* float: left; */
            width: 150px;   
            height: inherit;        
        }
        #left{
            left: 0;
            background-color: cornflowerblue;
        }
        #center{
            left: 150px;
            /* 自己调出来的 */
            /* 具体为啥用这个，网上的方法太麻烦了 */
            width: 73%;
            background-color: rgb(138, 137, 134);
        }
        #right{
            right: 0;
            background-color: darkgoldenrod;
        }
    </style>
    <!-- 浮动 -->
    <style>
        #header,#footer{
            background-color: rgb(161, 168, 180);
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        #container{
            text-align: center;
            line-height: 100px;
            padding: 0 200px 0 180px;
            height: 100px;
        }
        #center{
            float: left;
            width: 100%;
            height: 100px;
            background-color: darkgray;
        }
        #left{
            position: relative;
            float: left;
            width: 180px;
            left: -180px;
            height: 100px;
            margin-left: -100%;
            background-color: cornflowerblue;
        }
        #right{
            float: left;
            width: 200px;
            height: 100px;
            margin-left: -200px;
            position: relative;
            right: -200px;
            background-color: darkgoldenrod;
        }
    </style>
</head>

<body>
    <div id="header">
        #header
    </div>
    <div id="container">
        <div id="center">
            #center
        </div>
        <div id="left">
            #left
        </div>
        <div id="right">
            #right
        </div>
    </div>
    <div id="footer">
        #footer
    </div>
</body>
</html>

在flex布局里，flex：1，就是为了实现不同不同内容的平铺
补充1

flex

flex:flex-grow,flex-shrink,flex-basis;三个属性的缩写
flex-grow:自定义项目的放大比例

默认为0即使存在剩余空间，也不会放大
所有项目的flex-grow:1,等分剩余空间（自动放大）
如果一个项目的flex-grow:2,那么他就是其他的两倍大

flex-shrink:定义项目缩小比例

默认为1如果空间不足，那么该项目将缩小
项目所有的flex-shrink:1,当空间不足时，等比例缩小
如果一个项目的flex——shrink：0，其他全为1，那么当空间不足时，前者不变，后面的缩小
flex-shrink对负值无效

flex-basis自定义在分配多余空间之前，项目占据的主轴空间(main size)

补充2

margin-right/margin-left为负

对元素自身的影响：

当元素本身没有宽度时，会增加元素的宽度前提是，父元素的margin值要有子元素的margin那么大,否则，就会按照父元素的margin来偏移（如果父元素margin：0，那么就相当于没有）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>测试</title>
   <style>
       *{
           margin:0;
           padding: 0;
       }
       .wrap{
           width: 800px;
           height: 300px;
           margin: 100px;
           background-color: blue;
       }
       .box{
           margin-left: -100px;
           height: 100px;
           background-color: blueviolet;
       }
   </style>
</head>
<body>
   <div class="wrap">
       宽度800px
       <div class="box">
           宽度为800+margin的绝对值
       </div>
   </div>
</body>
</html>

当元素本身有宽度时，那么就会产生位移前提是，父元素的margin值要有子元素的margin那么大,否则，就会按照父元素的margin来偏移（如果父元素margin：0，那么就相当于没有）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>测试</title>
 <style>
     *{
         margin:0;
         padding: 0;
     }
     .wrap{
         width: 800px;
         height: 300px;
         margin: 100px;
         background-color: blue;
     }
     .box{
         margin-left: -100px;
         width: 700px;
         height: 100px;
         background-color: blueviolet;
     }
 </style>
</head>
<body>
 <div class="wrap">
     宽度800px
     <div class="box">
         向左/右位移相应大小
     </div>
 </div>
</body>
</html>

margin-top为负

不管有没有高度，都不会增加高度，只会向上位移前提是，父元素的margin值要有子元素的margin那么大,否则，就会按照父元素的margin来偏移（如果父元素margin：0，那么就相当于没有）

margin-bottom为负

不会发生位移，只会减少自身供css读取的高度

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>测试</title>
     <style>
         *{
             margin:0;
             padding: 0;
         }
         .wrap{
             width: 800px;
             height: 300px;
             margin: 100px;
             background-color: blue;
         }
         .box{

             width: 700px;
             height: 200px;
             margin-bottom: -100px;
             background-color: blueviolet;
         }
     </style>
 </head>
 <body>
     <div class="wrap">
         宽度800px
         <div class="box">
             具体没看懂
         </div>
     </div>
 </body>
 </html>

双飞翼布局要求：

header和footer各占领屏幕所有高度，高度固定
container是一个三栏布局
三栏布局两侧宽度固定不变，中间部分自动填充整个区域
中间部分是三栏中高度最高的

双飞翼布局的操作
```
<!DOCTYPE html>
<html lang="en">
```

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼</title> <style> body { min-width: 550px; }

    #header,
    #footer {
        background-color: rgb(90, 90, 95);
        text-align: center;
        height: 60px;
        line-height: 60px;
    }

    #center,
    #left,
    #right {
        float: left;
    }

    .column {
        text-align: center;
        height: 100px;
        line-height: 100px;
        /* background-color: lightslategray; */
    }

    #center {
        width: 100%;
        background-color: lightslategray;
    }

    #left {
        width: 180px;
        margin-left: -100%;
        background-color: rgb(0, 202, 252);
    }

    #right {
        width: 200px;
        margin-left: -200px;
        background-color: lightsalmon;
    }
    #content{
        margin: 0 200px 0 180px;
        height: 100px;
    }
    #footer{
        clear: both;
        height: 50px;
        background-color: darkgray;
        text-align: center;
    }
</style>

</head> <body> <div id="header">#header</div>

<div id="center" class="column">
    <div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>


<div id="footer">#footer</div>

</body> ```

码农公寓