CSS常用布局的实现

1. 幻灯片

1 <div class="slide">
2     <!-- 图片省略 -->
3     <!-- 以下是指示器 -->
4 <div class="pointer"><i class="current"></i><i></i><i></i></div>
 1 .slide{
 2     position: relative;            
 3     width: 200px;
 4     height: 100px;
 5     background-color: #bdd7ee;
 6     margin: 0;
 7 }
 8 .slide .pointer{
 9     position: absolute;
10     right: 10px;
11     bottom: 10px;
12     line-height: 10px;
13 }
14 .slide .pointer i{
15     display: inline-block;
16     width: 10px;
17     height: 10px;
18     margin: auto 5px;
19     border-radius: 10px;
20     background-color: black;
21 }
22 .slide .pointer i.current{
23     background-color: white;
24 }

 2. 水平居中

1 <div class="parent">
2     <div class="child">DEMO</div>
3 </div>

1）第一种方法

1 .parent{
2     text-align: center;
3 }
4 .child{
5     display: inline-block;
6 }

 2）第二种方法

1 .child{
2     display: table;
3     margin: 0 auto;
4 }

3）第三种方法

1 .parent{
2     height:1.5em;
3     position: relative;
4 }
5 .child{
6     position: absolute;
7     left: 50%;
8     transform: translateX(-50%);
9 }

4）第四种方法

1 .parent{
2     display: flex;
3     justify-content: center;
4 }
5 .child{
6     margin: 0 auto;
7 }

3.垂直居中

1 <div class="parent">
2     <div class="child">DEMO</div>
3 </div>

1）第一种方法

 1 .parent{
 2     width:4em;
 3     height:500px;
 4 }
 5 .child{
 6     width:100%;
 7 }
 8 .parent{
 9     display: table-cell;
10     vertical-align: middle;
11 }

2）第二种方法

 1 .parent{
 2     width:4em;
 3     height:500px;
 4 }
 5 .child{
 6     width:100%;
 7 }
 8 .parent{
 9     position: relative;
10 }
11 .child{
12     position: absolute;
13     top: 50%;
14     transform: translateY(-50%);
15 }

3）第三种方法

 1 .parent{
 2     width:4em;
 3     height:500px;
 4 }
 5 .child{
 6     width:100%;
 7 }
 8 .parent{
 9     display: flex;
10     align-items: center;
11 }

4. 居中（水平垂直都居中）

1 <div class="parent">
2     <div class="child">DEMO</div>
3 </div>

1）第一种方法

 1 .parent{
 2     width:200px;
 3     height:300px;
 4 }
 5 .parent{
 6     text-align: center;
 7     display: table-cell;
 8     vertical-align: middle;
 9 }
10 .child{
11     display: inline-block;
12 }

2）第二种方法

 1 .parent{
 2     width:200px;
 3     height:300px;
 4 }
 5 .parent{
 6     position: relative;
 7 }
 8 .child{
 9     position: absolute;
10     left: 50%;
11     top: 50%;
12     transform: translate(-50%,-50%);
13 }

3）第三种方法

1 .parent{
2     width:200px;
3     height:300px;
4 }
5 .parent{
6     display: flex;
7     justify-content: center;
8     align-items: center;
9 }

5. 多列布局——定宽与自适应

1 <div class="parent">
2     <div class="left">
3         <p>left</p>
4     </div>
5     <div class="right">
6         <p>right</p>
7         <p>right</p>
8     </div>
9 </div>

1）第一种方法

1 .left{
2     float: left;
3     width: 100px;
4 }
5 .right{
6     margin-left: 120px;
7 }

2）第二种方法

1 <div class="parent">
2     <div class="left"><p>left</p></div>
3     <div class="right-fix">
4         <div class="right">
5             <p>right</p><p>right</p>
6         </div>
7     </div>
8 </div>
 1 .left{
 2     float: left; width: 100px;
 3     position: relative;
 4 }
 5 .right-fix{
 6     float: right; width: 100%;
 7     margin-left: -100px;
 8 }
 9 .right{
10     margin-left: 120px;
11 }

3）第三种方法

1 .left{
2     float: left;
3     width: 100px;
4     margin-right: 20px;
5 }
6 .right{
7     overflow: hidden;
8 }

4）第四种方法

 1 .parent{
 2     display: table; width: 100%;
 3     table-layout: fixed;
 4 }
 5 .left,.right{
 6     display: table-cell;
 7 }
 8 .left{
 9     width: 100px;
10     padding-right: 20px;
11 }

5）第五种方法

 1 .parent{
 2     display: flex;
 3 }
 4 .left{
 5     width: 100px;
 6     margin-right: 20px;
 7 }
 8 .right{
 9     flex: 1;
10 }

6. 等分

1 <div class="parent">
2     <div class="column"><p>1</p></div>
3     <div class="column"><p>2</p></div>
4     <div class="column"><p>3</p></div>
5     <div class="column"><p>4</p></div>
6 </div>

1）第一种方法

1 .parent{
2     margin-left: -20px;
3 }
4 .column{
5     float: left;
6     width: 25%;
7     padding-left: 20px;
8     box-sizing: border-box;
9 }

2）第二种方法

1 <div class="parent-fix">
2     <div class="parent">
3         <div class="column"><p>1</p></div>
4         <div class="column"><p>2</p></div>
5         <div class="column"><p>3</p></div>
6         <div class="column"><p>4</p></div>
7     </div>
8 </div>
 1 .parent-fix{
 2     margin-left: -20px;
 3 }
 4 .parent{
 5     display: table;
 6     width:100%;
 7     table-layout: fixed;
 8 }
 9 .column{
10     display: table-cell;
11     padding-left: 20px;
12 }

3）第三种方法

1 .parent{
2     display: flex;
3 }
4 .column{
5     flex: 1;
6 }
7 .column+.column{
8     margin-left:20px;
9 }

7. 等高

1 <div class="parent">
2     <div class="left">
3         <p>left</p>
4     </div>
5     <div class="right">
6         <p>right</p>
7         <p>right</p>
8     </div>
9 </div>

1）第一种方法

 1 .parent{
 2     display: table; width: 100%;
 3     table-layout: fixed;
 4 }
 5 .left,.right{
 6     display: table-cell;
 7 }
 8 .left{
 9     width: 100px;
10     padding-right: 20px;
11 }

2）第二种方法

 1 .parent{
 2     display: flex;
 3 }
 4 .left{
 5     width: 100px;
 6     margin-right: 20px;
 7 }
 8 .right{
 9     flex: 1;
10 }

3）第三种方法

 1 .parent{
 2     overflow: hidden;
 3 }
 4 .left,.right{
 5     padding-bottom: 9999px;
 6     margin-bottom: -9999px;
 7 }
 8 .left{
 9     float: left; width: 100px;
10     margin-right: 20px;
11 }
12 .right{
13     overflow: hidden;
14 }

8. 全屏布局

1 <div class="parent">
2     <div class="top">top</div>
3     <div class="left">left</div>
4     <div class="right"><div class="inner">right</div></div>
5     <div class="bottom">bottom</div>
6 </div>

1）第一种方法

 1 html,body,.parent{margin:0;height:100%;overflow:hidden;}
 2 body{color:white;}
 3 .top{
 4     position:absolute;top:0;left:0;right:0;height:100px;
 5     background:blue;
 6 }
 7 .left{
 8     position:absolute;left:0;top:100px;bottom:50px;width:200px;
 9     background:red;
10 }
11 .right{
12     position:absolute;left:200px;top:100px;bottom:50px;right:0;
13     background:pink;overflow: auto;
14 }
15 .right .inner{min-height: 1000px;}
16 .bottom{
17     position:absolute;left:0;right:0;bottom:0;height:50px;
18     background: black;
19 }

2）第二种方法

1 html,body,.parent{margin:0;height:100%;overflow:hidden;}
2 body{color: white;} 
3 .parent{display: flex;flex-direction: column;}
4 .top{height:100px;background: blue;}
5 .bottom{height:50px;background: black;}
6 .middle{flex:1;display:flex;}
7 .left{width:200px;background: red;}
8 .right{flex: 1;overflow: auto;background:pink;}
9 .right .inner{min-height: 1000px;}

 

posted @ 2018-03-03 21:08  xlinli0213  阅读(177)  评论(0)    收藏  举报