CSS布局实现方式（一）

一 两栏布局(左边固定右边自适应)

1 通过浮动实现（float）:需要两个div实现，一个div设置浮动，并设置宽度，另一个div可以不用设置任何东西

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>两栏布局——float</title>
 7   <style>
 8     div {
 9       height: 300px;
10     }
11 
12     .left {
13       width: 200px;
14       background-color: gray;
15       float: left;
16     }
17 
18     .main {
19       background-color: pink;
20       margin-left:200px;
21       /* 或者overflow:hidden; */
22     }
23   </style>
24 </head>
25 
26 <body>
27   <div class='left'></div>
28   <div class='main'></div>
29 </body>
30 
31 </html>
View Code

2position：relative与position：absolute布局。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>两栏布局——absolue</title>
 6     <style>
 7             .outer{
 8                     position:relative;
 9                     height:300px;
10             }
11             .left{
12                     position:absolute;
13                     width:300px;
14                     background-color:blue;
15                     height:100%;
16             }
17             .main{
18                     background-color:yellow;
19                     position:absolute;
20                     left:300px;
21                     right:0;
22                     height:100%;
23 
24             }
25     </style>
26 </head>
27 <body>
28     <div class = 'outer'>
29             <div class = 'left'></div>
30             <div class = 'main'></div>
31     <div>
32 </body>
33 </html>
View Code

 3.通过弹性盒子flex实现:需要三个div，其中一个div是父容器，包含两个子元素。 

 1     div{
 2         height:300px;
 3     }
 4     .parent{
 5         display:flex;
 6     }
 7     .left{
 8         flex:0 0 100px;
 9     }
10     .right{
11         flex:1 1 auto;
12     }
View Code

 二 三栏布局(左右固定，中间自适应)：

1浮动布局：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三栏布局——float</title>
 6     <style>
 7         div {
 8             height: 200px;
 9         }
10 
11         .left {
12             float: left;
13             width: 100px;
14         }
15 
16         .right {
17             float: right;
18             width: 100px;
19         }
20 
21         .center {
22             margin-left: 100px;
23             margin-right: 100px;
24         }
25     </style>
26 </head>
27 
28 <body>
29     <div class="left" style="background-color:rgb(6, 235, 44)"></div>
30     <div class="right" style="background-color:rgb(9, 134, 236)"></div>
31     <div class="center" style="background-color:red"></div>
32 </body>
33 
34 </html>
View Code

2 BFC三栏布局：原理: BFC规则有这样的描述：BFC 区域不会与浮动元素重叠, 因此我们可以利用这一点来实现 3 列布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三栏布局——BFC</title>
 6     <style>
 7         div {
 8             height: 200px;
 9         }
10 
11         .left {
12             float: left;
13             width: 100px;
14         }
15 
16         .right {
17             float: right;
18             width: 100px;
19         }
20 
21         .center {
22             overflow: hidden;
23         }
24     </style>
25 </head>
26 
27 <body>
28     <div class="left" style="background-color:rgb(6, 235, 44)"></div>
29     <div class="right" style="background-color:rgb(9, 134, 236)"></div>
30     <div class="center" style="background-color:red"></div>
31 </body>
32 
33 </html>
View Code

3双飞翼布局：原理：给center添加一个容器元素container，设置center的margin值避开侧边栏，让left、right飘在两边

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三栏布局——双飞翼</title>
 7     <style>
 8         .container {
 9             float: left;
10             width: 100%;
11         }
12 
13         .center {
14             margin-left: 100px;
15             margin-right: 100px;
16             height: 100px;
17         }
18 
19         .right {
20             float: left;
21             margin-left: -100px;
22             /*自身宽度*/
23             width: 100px;
24             height: 100px;
25         }
26 
27         .left {
28             float: left;
29             margin-left: -100%;
30             /*基于父元素百分比的外边距*/
31             width: 100px;
32             height: 100px;
33         }
34     </style>
35 </head>
36 
37 <body>
38     <div class="container">
39         <div class="center" style="background-color:red"></div>
40     </div>
41     <div class="left" style="background-color:rgb(6, 235, 44)"></div>
42     <div class="right" style="background-color:rgb(9, 134, 236)"></div>
43 </body>
44 
45 </html>
View Code

4圣杯布局：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三栏布局——双飞翼</title>
 7     <style>
 8         .container {
 9             margin-left: 100px;
10             margin-right: 100px;
11         }
12 
13         .center {
14             float: left;
15             width: 100%;
16             height: 100px;
17         }
18 
19         .left {
20             float: left;
21             margin-left: -100%;
22             position: relative;
23             left: -100px;
24             width: 100px;
25             height: 100px;
26         }
27 
28         .right {
29             float: left;
30             margin-left: -100px;
31             position: relative;
32             right: -100px;
33             width: 100px;
34             height: 100px;
35         }
36     </style>
37 </head>
38 
39 <body>
40     <div class="container">
41         <div class="center" style="background-color:rgb(9, 134, 236)"></div>
42         <div class="left" style="background-color:red"></div>
43         <div class="right" style="background-color:rgb(6, 235, 44)"></div>
44     </div>
45 </body>
46 
47 </html>
View Code

5.flex原理： 设置父元素 display:flex;再设置子元素的flex；

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性：

flex-grow：项目将相对于其他灵活的项目进行扩展的量
flex-shrink：规定项目将相对于其他灵活的项目进行收缩的量
flex-basis：项目的默认长度
优点：可以先写center，让他先加载，然后用order属性，把他排到中间的位置

 1 .container{
 2     display:flex;
 3     width:100%;
 4     height:100px;
 5 }
 6 .left{
 7     flex:0 0 100px;
 8     order: 0 /*默认为0*/
 9 }
10 .right{
11     flex:0 0 100px;
12     order:2
13 }
14 .center{
15     flex:1 1 auto;
16     order:1
17 }
18 
19 <div class="container">
20         <div class="center" style="background-color:rgb(9, 134, 236)"></div>
21     <div class="left" style="background-color:red"></div>
22     <div class="right" style="background-color:rgb(6, 235, 44)"></div>
23 </div>
View Code

6. table布局 缺点：无法设置栏间距

 1 .container{
 2     display:table;
 3     width:100%;
 4 }
 5 .left,.center,.right{
 6     display:table-cell;
 7 }
 8 .left{
 9     width:100px;
10     height:100px;
11 }
12 .right{
13     width: 100px;
14     height:100px;
15 }
16 
17 <div class="container">
18     <div class="left" style="background-color:red"></div>
19     <div class="center" style="background-color:rgb(9, 134, 236)"></div>
20     <div class="right" style="background-color:rgb(6, 235, 44)"></div>
21 </div>
View Code

7.绝对定位布局

优点: 简单实用，并且主要内容可以优先加载。

 1 .container{
 2     position:relative;
 3 }
 4 .center{
 5     margin-left:100px;
 6     margin-right:100px;
 7     height:100px;
 8 }
 9 .left{
10     position:absolute;
11     left:0;
12     top:0;
13     width:100px;
14     height:100px;
15 }
16 .right{
17     position:absolute;
18     right:0;
19     top:0;
20     width:100px;
21     height:100px;
22 }
23 
24 <div class="container">
25     <div class="left" style="background-color:red"></div>
26     <div class="center" style="background-color:rgb(9, 134, 236)"></div>
27     <div class="right" style="background-color:rgb(6, 235, 44)"></div>
28 </div>
View Code

8.网格布局(Grid布局)

 1 .container{     
 2     display: grid;            
 3     grid-template-columns: 100px auto 100px;                     
 4     grid-template-rows: 100px;                
 5     }    
 6 
 7      <div class="container">
 8     <div class="left" style="background-color:red"></div>
 9     <div class="center" style="background-color:rgb(9, 134, 236)"></div>
10     <div class="right" style="background-color:rgb(6, 235, 44)"></div>
11 </div>
View Code

 

 

CSS常用布局的几种实现方式：https://blog.csdn.net/qq_39903567/article/details/114751532

Flex(弹性布局)实现五大常用布局：https://blog.csdn.net/qq_39903567/article/details/114754898

 

 

 

 

 

 

 

posted @ 2021-04-12 10:35  TerryMin  阅读(139)  评论(0)  编辑  收藏  举报