阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 一行一列

      水平布局

      这是一行一列的常见效果,主要用于页面的header,中间底部三个区域,这三个区域,常见的效果又分为两种。

      • 第一种:header, content, footer 宽度相同,有一个 max-width;
      • 第一种:headerfooter 宽度占满浏览器,content 有一个 max-width;

      常用的操作

      下面的操作是常见的操作方法;

      第一种:上中下宽度相同,有最大宽度

      <style>
          .content {
              max-width: 1200px;
              margin-left: auto;
              margin-right: auto;
          }
      </style>
      <header>
          <div class="content" style="background-color: red;">
              Header
          </div>
      </header>
      <main>
          <div class="content" style="background-color: green;">
              Main
          </div>
      </main>
      <footer>
          <div class="content" style="background-color: yellow;">
              Footer
          </div>
      </footer>
      

      第二种:上下宽度 100%,中间有最大宽度

      <style>
          .content {
              max-width: 1200px;
              margin-left: auto;
              margin-right: auto;
          }
      </style>
      <header>
          <div style="background-color: red;">
              Header
          </div>
      </header>
      <main>
          <div class="content" style="background-color: green;">
              Main
          </div>
      </main>
      <footer>
          <div style="background-color: yellow;">
              Footer
          </div>
      </footer>
      

      上面两种方法的 BUG

      小伙伴如果跟着敲代码,亲自查看效果,会发现,上面的代码并不能让headerfooter 宽度占满浏览器,这是因为浏览器会给页面默认的效果,比如margin padding,我们需要对代码进行改造一下,添加下面的代码。

      <style>
          body {
              margin: 0px;
              padding: 0px;
          }
      </style>
      

      实际工作中我们为了让页面在不同浏览器上都保持相同的效果,会引入专门的reset相关代码,让不同的元素在浏览器上都默认显示的一样,这种效果类似做实验的归零操作,是一种非常实用的多浏览器兼容处理。

      flex 布局

      可以自己练习下

      网格布局

      可以自己练习下

        <div class="body">
          <div class="header"></div>
          <div class="section">
            <div class="left"></div>
            <div class="right"></div>
          </div>
          <div class="footer"></div>
        </div>
      

      垂直布局

      垂直常见的布局,是顶部和底部定高,中间自适应(剩余的部分能够根据浏览器的大小自适应其高度)。

      在现在浏览器中(包括 IE7+,Chrome,Firefox 等等),高度自适应可以利用绝对定位来解决。

      当一个元素的定位属性是 absolute 时,它将摆脱默认的文档流,其大小默认是元素内容的大小,除非手动给其设置宽高。此时我们亦可通过设置其位置属性(top,right,bottom,left)来间接改变元素的宽高。

      position 定位

      整个父元素相对定位,导航高固定,内容区域绝对定位,通过定位属性实现高度自适应。

      html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .body{
        position: relative;
        height: 100%;
      }
      .header{
        height: 80px;
        background-color: #ccc;
      }
      .section{
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 80px;
        background-color: #f8f8f9;
      }
      .footer{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background-color: #ccc;
      }
      

      垂直两项

      当然,这也可以两个元素操作

      示例代码如下,

      <div class="top">top</div>
      <div class="main">main</div>
      
      body,div {
          margin: 0;
          padding: 0;
      }
      .top {
          background-color: #00d;
          height: 100px;
      }
      .main {
          background-color: pink;
          position: absolute;
          top: 100px;
          bottom: 0;
          left: 0;
          right: 0;
      }
      

      flex 弹性布局

      利用 flex flex-direction:column属性,使元素自上往下排列,

      flex:1 占据除规定元素外的所有位置

      html,body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .body{
        height: 100%;
        background-color: #808695;
        display: flex;
        /*设置排列顺序*/
        flex-direction: column;
      }
      .header{
        height: 80px;
        background-color: #ccc;
      }
      .section{
        flex: 1;
        background-color: #f8f8f9;
      }
      .footer{
        height: 80px;
        background-color: #dcdee2;
      }
      

      混合布局

      最后来个前面的大综合。

      <div class="head">head</div>
        <div class="main">
          <div class="left">left</div>
          <div class="middle">middle</div>
          <div class="right">right</div>
        </div>
      <div class="footer">footer</div>
      
      body{
        text-align: center;
        font-size: 2em;
        margin: 0;
        padding: 0
      }
      .head,.main,.footer{
        width: 80%; margin:0 auto;
        }
      .head{
        background-color: #ccc; height: 100px
        }
      .footer{
        background-color: #9cc; height: 100px
        }
      .main{
        position: relative;
      }
      .left{
        width: 20%;
        height: 900px;
        background-color: #eee;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
      }
      .middle{
        height: 900px;
        background-color: #fcc;
        margin: 0 20%;
        overflow: hidden;
      }
      .right{
        width: 20%;
        height: 900px;
        background-color: #eee;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
      }
      
      卖前端学习教程

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

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

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

      目录
      目录