CSS布局

一 居中布局

         1水平居中，需求：里面元素宽度不定外面元素宽度不定

         <div class="parent">

                  <div class="child">DEMO</div>

</div>

         方案一：

.parent{text-align: center;}

                  .child{display: inline-block;} //宽度根据内容而定

         方案二：

.child{display: table;margin: 0 auto;} //display位table的元素宽度也跟着内容定

         方案三：

.parent{height:1.5em;}

                  .parent{position: relative;}

                  .child{position: absolute;left: 50%;transform: translateX(-50%);}

                   // 绝对定位宽度由内容撑开

         方案四：

.parent{display: flex;justify-content: center;}

.child{margin: 0 auto;} //flex宽度由内容撑开

 

         2垂直居中，需求：父容器高度不固定，子容器高度不固定

方案一：

.parent{width:4em;height:500px;}

                  .child{width:100%;}

                  .parent{display: table-cell;vertical-align: middle;} 

方案二：

.parent{width:4em;height:500px;}

         .child{width:100%;}

         .parent{position: relative;}

         .child{position: absolute;top: 50%;transform: translateY(-50%)};

         方案三：

.parent{width:4em;height:500px;}

                  .child{width:100%;}

                  .parent{position: relative;}

                  .child{position: absolute;top: 50%;transform: translateY(-50%);}

 

         3水平和垂直都居中，需求：父子宽高未定

方案一：

         .parent{width:200px;height:300px;}

         .parent{text-align: center;display: table-cell;vertical-align: middle;}

         .child{display: inline-block;}

方案二：

         .parent{width:200px;height:300px;}

         .parent{position: relative;}

         .child{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

         方案三：

         .parent{width:200px;height:300px;}

         .parent{display: flex;justify-content: center;align-items: center;}

 

 

二：多列布局

         需求1：定宽 + 自适应

<div class="parent">

         <div class="left">

                   <p>left</p>

         </div>

         <div class="right">

                   <p>right</p>

                   <p>right</p>

         </div>

</div>

1

         .left{float: left;width: 100px;}

         .right{margin-left: 120px;}

2

         .left{float: left; width: 100px;position: relative;}

         .right-fix{float: right; width: 100%;margin-left: -100px;}

         .right{margin-left: 120px;}

3

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

         .right{overflow: hidden;}

4

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

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

         .left{width: 100px;padding-right: 20px;}

 

需求2：两列定宽和一列自适应

         解决方案和一列定宽和一列自适应一样

 

需求3：一列不定款一列自适应

1

         .left{float: left;margin-right: 20px;}

         .right{overflow: hidden;}

         .left p{width: 200px;}

2

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

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

         .left{width: 0.1%;padding-right: 20px;}

         .left p{width:200px;}

3

         .parent{display: flex;}

         .left{margin-right: 20px;}

         .right{flex: 1;}

         .left p{width: 200px;}

4

         .left,.center{float: left;margin-right: 20px;}

         .right{overflow: hidden;}

         .left p,.center p{width: 100px;}

 

需求4：等分布局

<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>

1

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

         .column{float: left;width: 25%;padding-left: 20px;box-sizing: border-box;}

2

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

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

         .column{display: table-cell;padding-left: 20px}

3

         .parent{display: flex;}

         .column{flex: 1;}

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