css方面的知识

一 清除浮动

1.添加一个clearfix类 

img{
  float:right;
}
.clearfix{
  overflow:auto;
  zoom:1;//为了兼容IE6
}

<div class="clearfix">
  <img></img>
</div>

2.clear属性  

clear：left;//清除左浮动
clear:right;//清除右浮动
clear:both;//全部清除

二 布局方式

1 使用float布局

2 使用百分比宽度布局

3 媒体查询（额外加分点：meta viewpoint）   

@media screen and (min-width:600px){
  nav{
   float:left;
   width:25%;
  }
  section{
   margin-left:25%;
  }
}

@media screen and (max-width:599px){
  nav li{//当窗口缩小时，变成了一列
   display:inline;
  }
}

4 inline-block 布局

   vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top；

  你需要设置每一列的宽度；

  如果HTML源代码中元素之间有空格，则列与列之间有间隙。

5 column布局

6 flex布局  

.container{
  display:-webkit-flex;
  display:flex;
}
.initial{
  -webkit-flex:initial;
   flex:initial;
  width:200px;//空间足够的时候200px
  min-width:100px;//空间不足够的时候最小100px
}
.none{
  -webkit-flex:none;
   flex:none;
  width:200px;//固定的200px
}
.flex1{
  -webkit-flex:1;
  flex:1;//占剩余空间的三分之一;
}
.flex2{
  -webkit-flex:2;
  flex:2;//占剩余空间的三分之二；
}

    使用flexbox的居中布局    

.vertical-container{
  height:300px;
  display:-webkit-flex;
  display:flex;
  align-items:center;//垂直方向居中
  justify-content:center;//水平方向居中
}

三 css多列布局

     定宽+自适应

  1.float+overflow（溢出部分遮藏） 

• 原理: 通过将左边子元素脱离文档流,设置右边子元素规定当内容溢出元素框时发生的事情以达到多列布局;
• 用法：先将左边子元素设置为float:left;再设置右边子元素为overflow:hidden; 

       .left{
            float: left;
            width: 200px;
            border: 1px solid grey;
        }
        .right{
            overflow: hidden;
            border: 1px solid grey;
        }

• 优点:简单。
• 缺点:不支持IE6。

  2 使用float + margin (改良版)

原理:在1的基础上,通过向右边子元素添加一个父元素,再加上设置左边子元素、右边父元素属性使之产生BFC以去除bug。

.left{
            float: left;
            width: 100px;
            position: relative;
            border: 1px solid grey;
        }
        .right-fix{
            float:right;
            width:100%;
            margin-left: -100px;
            border: 1px solid grey;
        }
        .right{
            margin-left: 120px;
            border: 1px solid grey;
        }

3使用table

• 原理:通过将父元素设置为表格,将左右子元素转化为类似于同一行的td,从而达到多列布局

• 用法:先将父元素设置为display:table;width:100%;table-layout:fixed;,再设置左右子元素display:table-cell;最后设置左子元素的width、padding-right;

        .parent{
            display: table;
            /*有父元素的一定要设置宽度*/
            width:100%;
            table-layout: fixed;
        }
        .left{
            display: table-cell;
            float: left;
            width: 100%;
            border:1px solid grey;
            padding-right:20px;

        }
        .right{
            display: table-cell;
            border: 1px solid grey;
            /*margin-right: 20px;*/
        }

 4 使用flex

• 原理:通过设置flex属性,从而达到多列布局

• 用法:先将父元素设置为display:flex;再设置左边子元素flex:1;最后设置左边子元素的width/margin-right;

        .parent{
            display: flex;
        }
        .left{
            width:100px;
            margin-right: 20px;
            border: 1px solid grey;
        }
        .right{
            /*占剩下的所有的空间*/
            flex:1;
            border: 1px solid grey;
        }

• 优点:flex很强大;
• 缺点:兼容性和性能方面存在一定问题;

两列定宽+一列自适应

  一列定宽一列自适应一样   

       .left,.center{
            float: left;
            width: 100px;
            border:1px solid grey;
            margin-right: 20px;
        }
        .right{
            overflow: hidden;
            border:1px solid grey;
        }

不定款+自适应

1.table 

• 原理: 通过将父元素改变为表格,将左右框转换为类似于同一行的td以达到多列布局,设置父元素宽度100%,给左框子元素一个固定宽度从而达到自适应.
• 用法: 将父元素设置为display:table;width:100%;再设置左右侧子元素display:table-cell;最后设置左侧子元素width:0.1%;padding-right:xx;以及左侧子元素中的内容宽度width:xxx;

       .parent{
            display: table;
            width:100%;
        }
        .left,.right{
            display: table-cell;
            background-color: oldlace;
        }
        .left{
            width: 0.1%;
            padding-right: 20px;
            background-color: cadetblue;
        }

 2 flex

• 原理: 通过设置CSS3中flex属性达到多列布局,加上给左侧子元素的内容定宽,给右侧子元素设置flex达到不定宽+自适应;
• 用法: 父元素设置display:flex;右侧子元素设置flex:1;左侧子元素margin-right:00px;内容设置宽度;

.parent{
            display: flex;
        }
        .right{
            flex: 1;
            background-color: oldlace;
        }
        .left{
            margin-right: 20px;
            background-color: cadetblue;
        }

等分分布

• 公式转化:
• 总宽度 = 子元素宽度 n + 间隙宽度 (n - 1)
• 总宽度 = 子元素宽度 n + 间隙宽度 n - 间隙宽度
• 总宽度 + 间隙宽度 =( 子元素宽度 + 间隙宽度 ) * n
• 两个问题: 如何让总宽度增加间隙宽度 如何让每个子元素宽度包含间隙宽度

1.float 

• 原理: 增大父元素的实际宽度,使用CSS3属性box-sizing进行辅助布局;
• 用法: 父元素margin-left:-px;子元素float:left;width:25%;padding-left:px;box-sizing:border-box;

  <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 class="parent-fix">
      <div class="parent">
          <div class="column">
              <p>111</p>
          </div>
          <div class="column">
              <p>222</p>
          </div>
          <div class="column">
              <p>333</p>
          </div>
          <div class="column">
              <p>444</p>
          </div>
      </div>
  </div>
  
  <style type="text/css">
          .parent-fix {
              margin-left: -20px;
          }
          .parent {
              display: table;
              width: 100%;
              table-layout: fixed;
          }
          .column {
              display: table-cell;
              padding-left: 20px;
          }
      </style>

• 优点: 结构和块数无关联;
• 缺点: 嵌套层数增加;

2 使用flex

• 原理: 通过设置CSS3中的flex属性达到等分布局;
• 用法: 父元素display:flex;子元素flex:1;并设置间距;

<div class="parent">
   <div class="column">
     <p>111</p>
   </div>
   <div class="column">
     <p>222</p>
   </div>
   <div class="column">
     <p>333</p>
   </div>
   <div class="column">
     <p>444</p>
   </div>
</div>

.parent {
  display: flex;
}
.column {
  flex: 1;
}
.column+.column {
  margin-left: 20px;
}

 定宽 + 自适应 + 两块高度相同

1 使用float

原理: 通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。

用法: 父元素overflow: hidden，左右子元素padding-bottom: 9999px、margin-bottom: -9999px，左子元素float: left、width、margin-right，右子元素overflow: hidden;

<div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>

p{
    background: none!important;
}
.left,.right{
    background: #444;
}
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    
    float: left; 
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

• 优点: 兼容性好;
• 缺点: 伪等高,不是真正意义上的等高;

2 使用table

• 原理：将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。
• 用法：父元素display:table、width:100%、table-layout:fixed，左右子元素display:table-cell，左子元素width、padding-right。

<div class="parent">
<div class="left">left</div>
<div class="right">.right</div>
</div>

.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left {
  width: 100px;
  padding-right: 20px;
}
.right,
.left {
  display: table-cell;
}

3 使用flex

• 原理: 通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。
• 用法：父元素display: flex，左子元素width、margin-right;右子元素flex:1。

.parent {
  display: flex;
}
.left {
  width: 100px;
  margin-right: 20px;
}
.right {
  flex: 1;
}

全屏布局

全屏布局的特点:

• 滚动条不是全局滚动条,而是出现在内容区域里,一般是主内容区域;
• 浏览器变大时,撑满窗口;

全屏布局的方法

使用position

• 原理: 将上下部分固定,中间部分使用定宽+自适应+等高;
• 用法: 见示例;

html,
body,
.parent {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  color: white;
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
}
.left {
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 50px;
  width: 200px;
  background-color: red;
}
.right {
  position: absolute;
  left: 200px;
  top: 100px;
  bottom: 50px;
  right: 0;
  background-color: pink;
  overflow: auto;
}
.right .inner {
  min-height: 1000px;
}
.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: black;
}

使用flex

• 原理: 通过CSS3中flex属性和flex-direction属性;
• 用法: 见示例;

• html,
  body,
  .parent {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body {
    color: white;
  }
  .parent {
    display: flex;
    flex-direction: column;
  }
  .top {
    height: 100px;
    background-color: blue;
  }
  .bottom {
    height: 50px;
    background-color: black;
  }
  .middle {
    flex: 1;
    display: flex;
  }
  .left {
    width: 200px;
    background-color: red;
  }
  .right {
    flex: 1;
    overflow: auto;
    background-color: pink;
  }
  .right .inner {
    min-height: 1000px;
  }

• 优缺点: 兼容性差,IE9及以下不兼容;