ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

前端3+1（Day1）

2022-01-04 21:36:22  阅读：152  来源： 互联网

标签：flex color 前端 height background Day1 margin left


前端3+1(Day1)

圣杯与双飞翼布局区别

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

  1. 圣杯布局要求：
  • 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

  1. flex:flex-grow,flex-shrink,flex-basis;三个属性的缩写

  2. flex-grow:自定义项目的放大比例

  • 默认为0即使存在剩余空间，也不会放大
  • 所有项目的flex-grow:1,等分剩余空间（自动放大）
  • 如果一个项目的flex-grow:2,那么他就是其他的两倍大
  1. flex-shrink:定义项目缩小比例
  • 默认为1如果空间不足，那么该项目将缩小
  • 项目所有的flex-shrink:1,当空间不足时，等比例缩小
  • 如果一个项目的flex——shrink：0，其他全为1，那么当空间不足时，前者不变，后面的缩小
  • flex-shrink对负值无效
  1. flex-basis自定义在分配多余空间之前，项目占据的主轴空间(main size)

补充2

margin-right/margin-left为负

  1. 对元素自身的影响：

  • 当元素本身没有宽度时，会增加元素的宽度前提是，父元素的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为负

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

margin-bottom为负

  1. 不会发生位移，只会减少自身供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>
  1. 双飞翼布局要求：

  • 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> ```

标签：flex,color,前端,height,background,Day1,margin,left
来源： https://www.cnblogs.com/summer-like-writing/p/15764105.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有