单列两列布局总结

作者: YM雨蒙 | 来源:发表于2017-08-15 12:05 被阅读204次

先做个题目:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>全等四宫格布局</title>
    <style type="text/css">
    * {margin: 0; padding: 0}
      
    html,body { height: 100%}
      
    .box {display: flex;
        /*列布局，两个类名column的div纵向排列*/
        flex-direction: column;
        width: 100%;height: 100%; }
      
    .column {        
        /*两个div都是占据剩余空间，所以纵向平分了*/
        flex: 1;
        /*设置column下面两个item也是弹性布局，flex-direction默认是row,即水平排列*/
        display: flex;}
      
    .column+.column {
        /*上下两个column中第二个的上外边距是10px，*/
        margin-top: 10px; }
      
    .item {
        /*两个item都占据剩余空间，所以水平平分。两个column都是。*/
        flex: 1;
        background: #009999;}
      
    .item+.item {
        /*左右两个item中的第二个item的左外边距是10px*/
        margin-left: 10px;}
    </style>
</head>
<body>
    <div class="box">
        <div class="column">
            <span class="item">1</span>
            <span class="item">2</span>
        </div>
        <div class="column">
            <span class="item">3</span>
            <span class="item">4</span>
        </div>
    </div>
</body>
</html>

HTML和CSS的学习也算是告了一个段落,后面就是JavaScript的学习了,在学习JS之前,把CSS布局总结一次

什么是布局呢?其实说白了,就是我们写的样式呈现给用户就是我们在文档中的布局,随着用户体验的提升,简单的样式不能满足用户的需求,所以需要我们对页面整体布局来提高用户体验

单列布局

一栏布局
- 实现方式:定宽+水平居中

<title>单列布局</title>
  <style>
    .layout{
     /* max-width:560px;用最大宽度,当宽度变小时会以浏览器真是宽度为基准*/
      width: 560px;  /* 定宽 */   /*用宽度,当宽度变小时会出现滚动条*/
      margin: 0 auto;   /* 水平居中 */
    }
    #header{
      height: 60px;    /* 高度,背景颜色 */
      background: red;
    }
    #content{
      position: relative;   /* 父元素设置相对定位 */
    }
    #content .aside {
     position: absolute;/* 子元素设置绝对定位 */
      right: 0;
      width: 100px;
      height: 300px;
      background: green;
    }
    #content .main {
      margin-right: 110px; /* 盒模型距离左边110px; */
      height: 500px;
      background: pink;
    }
    #footer{
      height: 50px;
      background: yellow;
    }
  
  </style>
</head>
<body>
  <div class="layout">
    <div id="header">头部</div>
    <div id="content">
      <div class="aside">aside</div>
      <div class="main">main</div>
    </div>
    <div id="footer">尾部</div>
  </div>
</body>

如果我们觉得多了一个div,嵌套比较麻烦,我们也可以用这个方法:

<title>单列布局2</title>
  <style>
    .layout{
      width: 960px;
      margin: 0 auto;
    }
    #header{
      height: 60px;
      background: red;
    }
    #content{
      height: 400px;
      background: blue;
    }
    #footer{
      height: 50px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div id="header"  >头部</div>
  <div id="content" class="layout">内容</div>
  <div id="footer" class="layout">尾部</div>
</body>

一栏布局(通栏)
- 实现方式:在头部和尾部元素加一个父元素div,设置div的颜色和尺寸来达到目的

 <title>单列布局-通栏</title>
  <style>
    body{
      /* min-width: 960px; 设置body最小宽度可以去掉滚动条*/
    }
    .layout{
      width: 600px;/* 头部定宽 居中*/
      margin: 0 auto;
      border: 1px solid;
    }
    #header{
      height: 60px;  /* 父元素是块级元素,充满一行 */
      background: red;
    }
    #content{
      height: 400px;
      background: blue;
    }
    #footer{
      height: 50px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div id="header">
    <div class="layout">头部</div>
  </div>
  <div id="content" class="layout">内容</div>
  <div id="footer">
    <div class="layout">尾部</div>
  </div>
</body>

多列布局

等分布局

`定宽+自适应`

float+margin
- 优点:结构简单,容易懂
- 缺点:有一点兼容性问题

    <title>定宽加自适应</title>
    <style>
        *{margin: 0;padding: 0; }
        body{border: 2px solid #ccc;}
        .left{
            background: red;
            float: left;    /*别忘了清除浮动哦*/
            width: 300px;
        }
        .right{
            background: blue;
            margin-left: 310px;/*因为left浮动,right: 会环绕着left,所以给个大于或者等于宽度的margin值*/
        }
    </style>
</head>
<body>
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</body>

float + margin + (fix)
- 优点:兼容性特别好
- 缺点:样式比较麻烦

<title>多列布局</title>
<style type="text/css">
    body{margin:20px;}
    .parent{
        border: 2px solid #ccc;
    }
    .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
    .left{
        float: left; width: 100px;
        position: relative;  /*提升层级*/
        background: red;
    }
    .right-fix{    /*解决IE6不兼容的问题产生的bug问题*/
        float: right; width: 100%;   /*右浮动因为宽度100%,所以会掉下去*/
        margin-left: -100px;    /*设置margin负边距,右浮动元素会上去*/

    }
    .right{
        margin-left: 120px;
        background: blue;
    }
</style>
</head>
<body>
<div class="parent  clearfix">
    <div class="left"><p>left</p></div>
    <div class="right-fix">
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>
</body>

float + overflow
- 优点:样式简单
- 缺点:IE6不支持

<title>多列布局</title>
<style type="text/css">
    body{margin:20px;}
    
    .parent{
        border: 5px solid #ccc;
    }
    .left{
        float: left;
        width: 100px;
        margin-right: 20px;
        background: red;
    }
    .right{
        overflow: hidden;   会触发BFC(块级格式化文本)模式,bfc里面的容器跟外面隔离,外面的浮动不会影响里面的内容
        background: blue;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

table
- 缺点:代码较多

<title>多列布局</title>
<style type="text/css">
    body{margin:20px;}
    *{margin: 0;padding: 0; }
    .parent{
        display: table; width: 100%;    /*display:table;变成表格结构,设置成100%,是因为table宽度默认跟着内容走*/
        table-layout: fixed;   /* 1. 加速table的渲染 2. 实现了布局优先,要写上*/
        border: 5px solid #ccc;
    }
    .left,.right{
        display: table-cell; /*  变成水平排列单元格*/
    }
    .left{
        width: 100px;   /* table里每列的宽度之和等于表格,所以right是剩余的宽度*/
        padding-right: 20px;
        background: red;
    }
    .right{background: blue;}
</style>
</head>
<body>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

flex
- 缺点:兼容性问题,性能可能有问题,做一些小范围布局

<title>多列布局</title>
<style type="text/css">
    body{margin:20px;}
    
    .parent{
        display: flex; /* 弹性布局*/
    }
    .left{
        width: 100px;
        margin-right: 20px;
        background: red;
    }
    .right{
        flex: 1;   /*分配剩余宽度*/
        background: blue
    }
</style>
</head>
<body>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

`不定宽加自适应`

float + margin做不到
- width变化,margin值也需要变化,所以不能跟着内容走
float + margin +(fix)做不到
- 同上,width变化,margin也需要重新设置变化
float + overflow
- 可以实现跟着内容走

<title>多列布局</title>
<style type="text/css">
    body{margin:20px;}
    
    .parent{
        
    }
    .left{
        float: left;
        margin-right: 20px;
        background: red;
    }
    .right{
        overflow: hidden;
        background: blue;
    }
    .left p{width: 300px;}  /* 不管宽度怎么变,右边的元素始终距离它20px自适应*/
</style>
</head>
<body>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

table可以

<style type="text/css">
    body{margin:20px;}
    
    .parent{
        display: table; width: 100%;
        /*table-layout: fixed;*/       /*这句话需要去掉,因为它是布局优先,现在我们是内容优先*/
    }
    .left,.right{
        display: table-cell;
    }
    .left{
        width: 0.1%;   /*宽度由内容决定,left单元格宽度设置非常小,0.1%兼容性考虑,*/
        padding-right: 20px;
    }
    .left p{
        width:200px;   /*由内容撑开left*/
    }
</style>
</head>
<body>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

flex当然可以,就是有点兼容性问题

`等分布局`

我们先看一下原理

c是父容器宽度,w每一列宽度,g是每列中的宽度

)

我们来转化一下公式:
C = W * N + G * N -G 
C = (W + G) * N - G
C + G =  (W + G) * N,如果父元素增加一个G的宽度,等于后边的

float怎么弄?
- 缺点:结构和样式有点耦合性, 兼容性有点问题

<title>等分布局</title>
<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;color:#fff;}
    .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
    p{background:#666;}
    .parent{
        margin-left: -20px;
    }
    .column{
        float: left;
        width: 25%;
        padding-left: 20px;
        box-sizing: border-box;
    }
</style>
</head>
<body>
<div class="parent clearfix">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>
</body>

table怎么弄?

<title>等分布局</title>
<style type="text/css">
    body{margin:20px;}
    /*.parent{background:#ddd;color:#fff;}*/
    .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
    p{background:#666;color: #fff;}
    .parent-fix{ /*增加父容器的宽度*/
        margin-left: -20px;
    }
    .parent{
        display: table;
        width:100%;
        table-layout: fixed;
    }
    .column{
        display: table-cell;
        padding-left: 20px;
    }
</style>
</head>
<body>
<div class="parent-fix">
    <div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>
</div>
</body>

flex怎么做?

<title>等分布局</title>
<style type="text/css">
    body{margin:20px;}
    .parent{background:#ddd;color:#fff;}
    .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
    p{background:#666;}
    .parent{
        display: flex;
    }
    .column{
        flex: 1;
    }
    .column+.column{
        margin-left:20px;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>
</body>

最后来个DEMO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DEMO</title>
</head>
<body>
<style>
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct{
    overflow:hidden;
    width: 640px;
    border:dashed 1px orange;
    margin: 0 auto;
}

.ct .item{
    float: left;
    width:200px;
    height:200px;
    margin-right: 20px;
    margin-top: 10px;
    background: red;
}
.ct>ul{
  margin-right: -20px;
}

</style>
<div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul>
</div>
</body>
</html>

有些内容借鉴,不过每个内容我都在浏览器上跑了一遍,自己亲自用代码实现了一遍,如果有侵权的,请联系删除

单列两列布局总结

单列布局

多列布局

`定宽+自适应`

`不定宽加自适应`

`等分布局`

最后来个DEMO

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

单列 两列布局总结

单列布局

多列布局

定宽+自适应

不定宽加自适应

等分布局

最后来个DEMO

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

单列两列布局总结

`定宽+自适应`

`不定宽加自适应`

`等分布局`