HOME/Articles/

CSS布局

Article Outline

CSS布局

<!--more-->

###常见布局(PC)

  • 固定宽度布局 简单但是窗口宽度小的时候会出现滚动条

  • 弹性布局(fluid) 页面较为美观但是较为复杂

  • 响应式布局——多终端(PC,pad,Phone)

###单列布局

单列布局

  • 没有通栏的情况

实现方法:定宽 width:设置固定值,或者设置max-width 然后设置margin-left和margin-right为auto

<style type="text/css">
    .layout{
        /*width: 900px;*/
        max-width: 900px;
        margin: 20px auto;
    }
    .header{
        background: #fff564;
        height: 30px;
    }
    .content{
        background: #43fff8;
        height: 500px;
    }
    .footer{
        background: #bbff80;
        height: 30px;
    }
</style>

<div class="layout">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

width和max-width也有一定的区别,设置width当浏览器窗口过小时会出现滚动条. 上述代码html可以简化,省略主layout的div,将.layout的class加到里面子元素上也可以达到效果。

    <div class="header layout"></div>
    <div class="content layout"></div>
    <div class="footer layout"></div>
  • 有通栏的情况

    <style type="text/css">
      body{
          min-width: 960px;
      }
      .layout{
          width: 960px;
          /*max-width: 960px;*/
          margin: 0px auto;
          background: #ff32ea;
      }
      .header{
          background: #fff564;
          height: 30px;
      }
      .content{
          background: #43fff8;
          height: 500px;
      }
      .footer{
          background: #bbff80;
          height: 30px;
      }
    </style>
    
      <div class="header">
          <div class="layout">header</div>
          <!--有通栏时不能同时应用header和layout,要加个div把header的内容包裹起来,下面footer同理-->
      </div>
      <div class="content layout">content</div>
      <div class="footer">
          <div class="layout">footer</div>
      </div>
      <!--当出现浏览器窗口宽度导致页面出现滚动条或者header长度不够等情况时,可以给body设置mid-width去除背景色的bug-->
  • 内部元素水平居中

范例: 内部元素水平居中

一般思路有:

.parent{
        text-align: center;
    }
    .child{
        display: inline-block;
        /*设置为inline-block的时候,一般元素的高度如果不相等的话,还得设置其vertical-align使其垂直方向居中*/
        /*IE6不支持display: inline-block; 可以写为display: inline;*zoom: 1;*/
        /**zoom: 1;用来触发hasLayout,使得元素具有block的性质*/
    }

或者可以使内部元素浮动,用一个元素包裹住,设置margin: 0 auto;

范例代码:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .parent{
        width: 500px;
        margin: 50px auto;
        text-align: center;
        font-size: 0;
        /*消除inline-block的缝隙*/
    }
    .parent a{
        display: inline-block;
        /*设置为inline-block之后要注意inline-block的缝隙问题*/
        border: 1px solid #cccccc;
        color: #111;
        text-decoration: none;
        font-size: 16px;
        padding: 8px; 16px;
    }

</style>
    <div class="parent">
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaSctipt</a>
    </div>

###双列布局

一列固定宽度,另一列自适应宽度

双列布局

  • 实现方法:浮动元素+普通元素margin
    <style type="text/css">
      .clearfix:after{
          content: ' ';
          display: block;
          clear: both;
      }
      .aside{
          float: left;
          /*浮动元素+普通元素margin*/
          width: 200px;
          height: 500px;
          /*一般情况下高度不写死,是为了看代码效果写的height*/
          background: #4bff59;
      }
      .main{
          margin-left: 210px;
          /*浮动元素+普通元素margin*/
          height: 400px;
          background: #86cbff;
      }
      .footer{
          background: #ff9e44;
      }
    </style>
    
    

<div class="content clearfix"> <div class="aside">aside</div> <div class="main">main</div> </div> <div class="footer">footer</div> 而当aside在右边的时候,float:right,然后给main设置margin-right即可,但是这时候有一个需要注意的地方,就是**在写html结构的时候,必须要将aside的div写在main的div前面**,即: <div class="content clearfix"> <div class="aside">aside</div> <!--aside写在前面--> <div class="main">main</div> </div> <style type="text/css"> .aside{ float: right; width: 200px; height: 500px; background: #4bff59; } .main{ margin-right: 210px; height: 400px; background: #86cbff; } </style> ``` 因为如果先写main的div的话,浏览器解析的时候,main是一个正常流块级元素,会独占一行,使得aside被挤到下一行去

  • 两栏布局的flex写法

    <style type="text/css">
      .content{
          max-width: 800px;
          margin: 0 auto;
    
          display: flex;
          /*应用flex*/
      }
      .aside{
          width: 200px;
          min-height: 500px;
          /*一般情况下高度不写死,是靠内容撑起来的,是为了看代码效果写的height*/
          background: #4bff59;
      }
      .main{
          min-height: 400px;
          background: #86cbff;
    
          flex-grow: 1;
          /*撑开main*/
      }
      .footer{
          background: #ff9e44;
      }
    </style>
    <div class="content">
      <div class="aside">aside</div>
      <div class="main">main</div>
    </div>
    <div class="footer">footer</div>

三栏布局

两侧两列宽度,中间自适应宽度

三栏布局

<style type="text/css">
    .clearfix:after{
        content: " ";
        display: block;
        clear: both;
    }
    .left{
        width: 200px;
        height: 500px;
        /*同样写死height是为了体现效果*/
        background: #62fff7;
        float: left;
    }
    .right{
        width: 200px;
        height: 500px;
        background: #ffe767;
        float: right;
    }
    .main{
        margin-left: 210px;
        margin-right: 210px;
        /*设置左右margin留出部分空隙*/
        height: 400px;
        background: #a4ff64;
    }
    .footer{
        background: #f2ceff;
    }
</style>

<div class="content clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <!--同理,写html的时候,还是要将浮动的写到前面,正常普通流块级元素写到后面-->
    <div class="main">main</div>
</div>

<div class="footer">footer</div>

写三栏布局的时候,还是要注意html中left,rigfh和main的先后顺序,要考虑到浏览器的渲染顺序,将普通流的块级元素写在后面

  • 三栏布局的flex实现方法:
<style type="text/css">
    .content{
        max-width: 960px;
        margin: 0 auto;
        display: flex;
        /*应用flex*/
    }
    .left{
        width: 200px;
        height: 500px;
        /*同样写死height是为了体现效果*/
        background: #62fff7;
        order: 1;
        /*排第一列*/
    }
    .right{
        width: 200px;
        height: 500px;
        background: #ffe767;
        order: 3;
        /*排第三列*/
    }
    .main{
        height: 400px;
        background: #a4ff64;
        flex-grow: 1;
        /*宽度没给,所以给一行的宽度*/
        order: 2;
        /*排第二列*/
    }
    .footer{
        background: #f2ceff;
    }
</style>

<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</div>

<div class="footer">footer</div>