常见的主流基本页面布局方式

1. 经典行布局

1. 水平居中（自适应）

           .container{
               width:80%;
               max-width: 1000px;
               height:1000px;
               background: #4c77f2;
               margin:0 auto;
               text-align: center;
           }
           
   		<div class="container">页面内容</div>
   

2. 垂直水平居中（先absolute+lrtb再margin位移）

          .container{
               width:800px;
               height:200px;
               background: #4c77f2;
               position:absolute;
               top:50%;
               left:50%;
               margin-top:-100px;
               margin-left:-400px
           }
   		<div class="container">页面内容</div>
   

2. 经典三列布局

• 	       .nav{
  	            width:100%;
  	            height:100px;
  	            background: darkgrey;
  	        }
  	        .container{
  	            height:1000px;
  	            width:80%;
  	            margin:0 auto;
  	        }
  			.left{
  	            width:40%;
  	            height:1000px;
  	            background: #1a5acd;
  	            float:left;
  	        }
  	        .middle{
  	            width:20%;
  	            height:1000px;
  	            background: #5880f9;
  	            float:left;
  	        }
  	        .right{
  	            width:40%;
  	            height:1000px;
  	            background: #1a5acd;
  	            float:left;
  	        }
  	        
  		    <div class="nav">nav</div>
  		    <div class="container">
  		        <div class="left">左侧</div>
  		        <div class="right">右侧</div>
  		    </div>
  

3. table表格布局

1. 特点：文字自动垂直居中
2. 用div表现成table的形式（display和vertical-align）：

   	.table{
           margin-top:20px;
           display: table;
           width:800px;
           height:200px;
       }
       .table-row{
           display: table-row;
       }
       .table-cell{
           vertical-align: middle;
           display: table-cell;
       }
   <div class="table">
       <div class="table-row">
           <div class="left table-cell">左</div>
           <div class="right table-cell">右</div>
       </div>
   </div>
   

2. float浮动+margin

1. diplay:float会使inline元素变成block，可以设定宽高,不会影响其他元素的布局，是独立于布局的，但是会影响其他元素的文本
2. float会使自己的位置尽量考上，尽量靠左（右）
3. float可能会使父级元素高度塌陷，解决办法：
   1. 给用float的元素的父元素添加overflow:auto或overflow:hidden
   2. 清除左右浮动：

       .container2:after{
           content: 'aaa';
           clear:both;
           display: block;
           visibility: hidden;
           height:0;
       }
       
   <div class="container container2">
       <span>写几个字</span>
       <span class="p1">float</span>
       <span class="p1">float</span>
   </div>
   

   - 使用伪元素选择器，自动添加一个after
   - clear:both 将after容器的左右浮动都清除，这样下一个容器就会独自占一行
   - 所有属性都是需要的
   

4. float两页布局

       .container{
           width:800px;
           height:200px;
       }
       .left{
           background:red;
            float:left;
           /* height:100%; */
           width:200px;
           height:200px;
       }
       .right{
           background:blue;
           height:100%;
       }
   
   <div class="container">
       <div class="left">左</div>
       <div class="right">右</div>
   </div>
   

    - right会独占整行，而float会偏离文档流但会影响文本流，会把文字挤压到右边
    - 当right加了margin后就会在左边空出margin的位置然后占据剩下的整个行
   

5. float三页布局

       .container{
        	width:800px;
           height:200px;
       }
       .left{
           background:red;
            float:left;
            height:100%;
           width:200px;
       }
       .right{
           background:blue;
           float:right;
           width:200px;
           height:100%;
       }
       .middle{
           margin-left:200px;
           margin-right:200px;
       }
   
   <div class="container">
       <div class="left">左</div>
       <div class="right">右</div>
       <div class="middle">中间</div>
   </div>
   

    - middle要放在最后，如果middle放在中间，那么会占整行，right就会在middle下面一行靠右
    - 加不加margin和占一整行没影响，加了margin还是独占一行，只是自己的区域不包括margin以外的区域，最好还是把margin加上
    - left中的floa:left也可以换成position:absolute但是此时height不能用100%，而必须指定高度，否则就是对于body高度的100%；因为absolute是完全脱离文档流的，一般不使用
   

3. inline-block布局

1. 优点：多个块可以在一行并列
2. 缺点：块之间有间隙
3. 解决方法：

       .container{
           width:800px;
           height:200px;
           font-size:0;
       }
       .left{
           font-size:14px;
           background:red;
           display: inline-block;
           width:200px;
           height:200px;
       }
       .right{
           font-size:14px;
           background:blue;
           display: inline-block;
           width:600px;
           height:200px;
       }
   
   <div class="container">
       <div class="left">左</div>
       <div class="right">右</div>
   </div>
   

    - 父容器中font-size设为0，子容器中font-size设为想要的值
   

   2. 在body中的两个div元素，</div><div class="right">写在一行，不换行

4. flexbox布局

• 	    	
  	        .container{
  	            width:800px;
  	            height:200px;
  	            display: flex;
  	        }
  	        .left{
  	            background: red;
  	            width:300px;
  	        }
  	        .right{
  	            background: blue;
  	            flex:1;
  	        }
  	        .right1{
  	            background: green;
  	            flex:2;
  	        }
  
  	    <div class="container">
  	        <div class="left">左</div>
  	        <div class="right">右</div>
  	        <div class="right1">右</div>
  	    </div>
  

    - 父容器display:flex	子容器flex:1	表示占的分数
    - 若有一个子容器指定了宽度，则剩余的宽度作为flexbox
    - flex布局有浏览器兼容的问题
  

5. display

1. inline：内联元素，无法设置高度和高度
2. inline-block：既可以和其他并列一行，也可以设置高度
3. block：独占一行，有独立宽高

4. inline元素和inline-block在一行时，只有设置inline-block的vertical-align才能使inline元素对齐

6. position

1. static：静态,位移不生效
2. relative：相对于自身作位移，但是其他的布局不会改变
3. absolute：脱离其他布局，相对于父元素位移
4. fixed：脱离其他布局，相对于视窗位移

7. z-index：设定层级 relative absolute fixed可设