前端学习笔记_css常见布局(1)

一列布局-定宽

顾名思义定宽就是使用固定的宽度来布局，想要居中直接margin:0 auto;简单直接

<div class="wrap">
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
</div>

css代码如下：

.wrap{
      width: 960px;
      margin:0 auto;
 }

等分布局

下面来看html结构：

<div class="parent">
    <div class="item">
        <div>1</div>
    </div>
    <div class="item">
        <div>2</div>
    </div>
    <div class="item">
        <div>3</div>
    </div>
    <div class="item">
        <div>4</div>
    </div>
</div>

如果每个item的padding-left值是20px,那么最左边就会多出来20px，于是设置如下：

.parent{
     margin-left: -20px;
 }

.parent > .item{
     padding-left:20px;
     width: 25%;
     height: 300px;
     float: left;
     box-sizing: border-box;
 }
 .item > div{
      height:100%;
 }

或者直接使用flex布局：

.parent{
     display: flex; 
 }

 .parent > .item{
     flex:1;
     height: 300px;
 }

 .item + .item{
     margin-left: 20px;
  }

 .item > div{
     height:100%;
 }

如果想使用table布局只需在html结构中给parent添加一个父元素：

<div class="parent-fix">...</div>

css设置如下：

.parent-fix{
    margin-left:-20px;
 }

 .parent{
   display: table;
   width: 100%;
 }

 .parent > .item{
    display: table-cell;
    padding-left:20px;
    height: 300px;
 }

 .item > div{
    height:100%;
 }

以上三种方式都可以实现等分的效果，同样都随着浏览器的宽度变化而变化。

等高布局

宽度相同，一边的height发生变化，另一边也随之发生变化。
html结构如下：

<div class="parent">
    <div class="left">
        hello <br>
        hello <br>
    </div>

    <div class="right">
        hello <br>
        hello <br>
        hello <br>
    </div>
</div>

第一种方法如下：

.parent{
     overflow: hidden;
 }

 .left, .right{
     padding-bottom:9999px;
     margin-bottom: -9999px;
 }

 .left{
     float: left;
     background: deeppink;
     width: 100px;
     margin-right: 20px;
 }

 .right{
     overflow: hidden;
     background: pink;
 }

同样的它也可以使用flex来布局：

.parent{
     display: flex;
 }

 .left{
     background: deeppink;
     width: 100px;
     margin-right: 20px;
 }

 .right{
     flex:1;
     background: pink;
 }

还可以使用table布局：

.parent{
     display: table;
     width: 100%;
     table-layout: fixed;
 }

 .left, .right{
     display: table-cell;
 }

 .left{
     background: deeppink;
     width: 100px;
 }

 .right{
     background: pink;
 }

以上方法都能实现等高效果，flex在IE10以下是不被支持的，所以当视具体情况而选择合适的布局。

全屏布局

实现上下的宽自适应，中间的left定宽而right自适应，下面是html结构：

<div class="parent">
    <div class="top">top</div>
    <div class="lt">left</div>
    <div class="rt">
        <div class="inner">test</div>
    </div>
    <div class="bt">bt</div>
</div>

使用定位来实现该效果：

html,body, .parent{
        height: 100%;
        overflow: hidden;
    }

    .top,.bt{
        position: absolute;
        left:0;
        width:100%;
        height: 100px;
        background: pink;

    }

    .top{           
        top:0;
    }

    .bt{
        bottom:0;
    }

    .lt{
        position: absolute;
        width: 200px;
        top:100px;
        bottom:100px;
        background: deeppink;
    }
    
    .rt{
        position: absolute;
        left:200px;
        top:100px;
        bottom: 100px;
        right:0;
        overflow: auto;
    }

    .rt .inner{
        min-height: 1000px;
    }

这种方式并不是唯一，所以根据需求书写不同的布局即可。