阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 全屏布局

      (1)使用position实现▲

      html代码:

      <body>
      <div id="parent">
          <div id="top">top</div>
          <div id="left">left</div>
          <div id="right">right</div>
          <div id="bottom">bottom</div>
      </div>
      </body>
      

      css代码:

      html, body, #parent {height: 100%;overflow: hidden;}
      #parent > div {border: 1px solid #000;}
      #top {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 100px;
      }
      #left {
          position: absolute;
          top: 100px;  /*值大于等于#top的高度*/
          left: 0;
          bottom: 50px;  /*值大于等于#bottom的高度*/
          width: 200px;
      }
      #right {
          position: absolute;
          overflow: auto;
          left: 200px;  /*值大于等于#left的宽度*/
          right: 0;
          top: 100px;  /*值大于等于#top的高度*/
          bottom: 50px;  /*值大于等于#bottom的高度*/
      }
      #bottom {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 50px;
      }
      

      原理:计算好盒子的宽度和间隔去设置位置

      优缺点:

      优点:容易理解;兼容性好 缺点:代码繁多;需要计算好各个盒子的位置;

      (2)使用flex实现

      html代码:

      <body>
      <div id="parent">
          <div id="top">top</div>
          <div id="middle">
              <div id="left">left</div>
              <div id="right">right</div>
          </div>
          <div id="bottom">bottom</div>
      </div>
      </body>
      

      css代码:

      *{
          margin: 0;
          padding: 0;
      }
      html,body,#parent{height:100%;}
      #parent {
          display: flex;
          flex-direction: column;
      }
      #top {height: 100px;}
      #bottom {height: 50px;}
      #middle {
          flex: 1;
          display: flex;
      }
      #left {width: 200px;}
      #right {
          flex: 1;
          overflow: auto;
      }
      

      原理:flex设置排列方式、对齐方式罢了,请查阅文末flex阅读推荐

      优缺点

      优点:简单灵活;功能强大 缺点:PC端兼容性不好,移动端(Android4.0+) flex务必带上兼容,写法请参考文末阅读推荐,也可以使用autoprefixer

      (3)使用Grid实现

      html代码:

      <body>
      <div id="parent">
          <div id="top">top</div>
          <div id="left">left</div>
          <div id="right">right</div>
          <div id="bottom">bottom</div>
      </div>
      </body>
      

      css代码:

      *{
          margin: 0;
          padding: 0;
      }
      html, body, #parent {
          height: 100%;
      }
      #parent {
          width: 100%;
          height: 100%;
          display: grid;
          /*分成2列,第一列宽度200px,第二列1fr平分剩余的部分,此处换成auto也行*/
          grid-template-columns: 200px 1fr;  
          /*分成3行,第一行高度100px,第二行auto为自适应,此处换成1fr也行,第3行高度为50px*/
          grid-template-rows: 100px auto 50px; 
          /*定义网格区域分布*/
          grid-template-areas:
              "header header"
              "aside main"
              "footer footer";
      }
      #parent>div{border: 1px solid #000;}
      #top{grid-area: header;  /*指定在哪个网格区域*/}
      #left{grid-area: aside;  /*指定在哪个网格区域*/}
      #right{grid-area: main;  /*指定在哪个网格区域*/}
      #bottom{grid-area: footer;  /*指定在哪个网格区域*/}
      

      原理:css grid布局,请查看文末的阅读推荐

      优缺点

      优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

      清浮动

      <!DOCTYPE html>
      
      <html>
          <head>
              <meta charset="utf-8" />
              <title>清除浮动</title>
             <style>
                .div1{
                    width: 500px;
                    border:3px solid #999999;
                }
                .div2{
                    width: 200px;
                    height: 200px;
                    background-color: green;
                    float: left;
                }
                .div3{
                  width: 200px;
                  height: 300px;
                  background-color: pink;
                  float: left;
                }
                /* 清浮动 */
                .clfolat:after{
                    content: "";
                    display: block;
                    clear: both;
                }
             </style>
      
          </head>
      
          <body>
              <!-- 清除浮动的样式 要加在 浮动元素的父元素上 -->
             <div class="div1 clfolat">
                 <!-- 元素浮动的时候,脱离常规的文档流,不占据原来的空间了 -->
                 <div class="div2"></div>
                 <div class="div3"></div>
             </div>
             <p>jigoewjiogjoi</p>
      
          </body>
      
      </html>
      
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录