左側固定,右側自適應的佈局_ZenDei技術網路在線

2.左側盒子: 左浮動; 右側盒子: 左浮動,再通過calc計算寬度 3.左側盒子: float: left; 右側盒子: margin-left 理解: 浮動會使得元素脫離文檔流，後面元素進行佈局時，前面的浮動元素就像不存在一樣 4.包含左右盒子的大盒子: display: table; 寬度為1 ...

1.左側盒子: 通過子絕父相定位,寬度固定; 右側盒子: 寬度100%,再設置margin-left為左側盒子的寬度大小

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         * {
11             margin: 0;
12             padding: 0;
13         }
14         .cont{
15             position: relative;
16         }
17         .left {
18             width: 100px;
19             height: 600px;
20             position: absolute;
21             left:0;
22             top:0;
23             background: blue;
24         }
25 
26         .right {
27             margin-left: 100px;
28             height: 400px;
29             background: pink;
30         }
31     </style>
32 </head>
33 
34 <body>
35     <div class="cont clearfix">
36         <div class="left"></div>
37         <div class="right"></div>
38     </div>
39 </body>
40 
41 </html>

2.左側盒子: 左浮動; 右側盒子: 左浮動,再通過calc計算寬度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     *{
10         margin: 0;
11         padding: 0;
12     }
13     .clearfix{overflow:hidden;_zoom:1;}
14     .left{
15         width:100px;
16         height:200px;
17         background:pink;
18         float: left;
19     }
20     .right{
21         width:calc(100% - 100px);
22         height:300px;
23         background:blue;
24         float: left;
25     }   
26     </style>
27 </head>
28 <body>
29     <div class="cont clearfix">
30         <div class="left"></div>
31         <div class="right"></div>
32     </div>
33 </body>
34 </html>

3.左側盒子: float: left; 右側盒子: margin-left

理解: 浮動會使得元素脫離文檔流，後面元素進行佈局時，前面的浮動元素就像不存在一樣

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     *{
10         margin: 0;
11         padding: 0;
12     }
13     .clearfix{
14         overflow:hidden;
15         _zoom:1;
16     }
17     .left{
18         width:100px;
19         height:200px;
20         float: left;
21         background:blue;
22     }
23     .right{
24         margin-left:100px;
25         height:400px;
26         background:pink;
27     }
28     </style>
29 </head>
30 <body>
31     <div class="cont clearfix">
32         <div class="left"></div>
33         <div class="right"></div>
34     </div>
35 </body>
36 </html>

4.包含左右盒子的大盒子: display: table; 寬度為100%; 左側和右側盒子: display: table-cell

理解: 表格中的單元格的特性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     *{
10         margin: 0;
11         padding: 0;
12     }
13     .cont{
14         display: table;
15         width:100%;
16     }
17     .left,.right{
18         display:table-cell;
19     }
20     .left{
21         width:100px;
22         height:200px;
23         background:pink;
24     }
25     .right{
26         height:300px;
27         background:blue;
28     }
29     </style>
30 </head>
31 <body>
32     <div class="cont">
33         <div class="left"></div>
34         <div class="right"></div>
35     </div>
36 </body>
37 </html>

5.左側右側: 定位

理解: position:absolute;的流體性一個盒子設置為: position:absolute; left:0; right:0; top:0; bottom:0; 會出現全屏的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .left{
11             position: absolute;
12             left:0;
13             top:0;
14             bottom:0;
15             width:200px;
16             background:blue;
17         }
18         .right{
19             position:absolute;
20             left:200px;
21             right:0;
22             top:0;
23             bottom:0;
24             background:red;
25         }
26     </style>
27 </head>
28 
29 <body>
30     <div class="left"></div>
31     <div class="right"></div>
32 </body>
33 
34 </html>

6.flex佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         *{
11             margin:0;
12             padding:0;
13         }
14         .cont{
15             display: flex;
16         }
17         .left {
18             flex-basis: 200px;/*屬性定義了在分配多餘空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大小 它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。*/
19             height:200px;
20             background: blue;
21         }
22 
23         .right {
24             flex-grow:1;/*屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大 如果所有項目的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）*/
25             height:300px;
26             background: red;
27         }
28     </style>
29 </head>
30 
31 <body>
32     <div class="cont">
33         <div class="left"></div>
34         <div class="right"></div>
35     </div>
36 </body>
37 
38 </html>

7. BFC

(1)BFC觸發的條件：

根元素
浮動元素
絕對定位元素、固定定位元素
display屬性為inline-block,table-caption,table-cell
overflow:hidden;

(2)BFC的五大特性：

在一個bfc內部，盒子會在垂直方向上一個接一個的排列
在一個bfc內部，相鄰的margin-top和margin-bottom會疊加
在一個bfc內部，每一個元素的左外邊界會緊貼著包含盒子的左邊，即使存在浮動也是如此
在一個bfc內部，如果存在內部元素是一個新的bfc,並且存在內部元素是浮動元素，則該bfc的區域不會與float元素的區域重疊
bfc就是頁面上的一個隔離的盒子，該盒子內部的子元素不會影響到外面的元素

(3)BFC的用途：

創建bfc避免垂直外邊距疊加
清除浮動

自適應

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     .clearfix{overflow:hidden;_zoom:1;}
10     .left{
11         width:200px;
12         height:300px;
13         background:pink;
14         float: left;
15     }
16     .right{
17         overflow: hidden;
18         background:blue;
19         height:500px;
20     }
21     </style>
22 </head>
23 <body>
24     <div class="cont clearfix">
25         <div class="left"></div>
26         <div class="right"></div>
27     </div>
28 </body>
29 </html>

8.左右盒子為inline-block + 右側calc

理解:

vertical-align避免基線對齊造成空白

font-size:0;避免空白字元的存在，使得整個寬大於100%，造成右邊的div掉下來

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     *{
10         margin: 0;
11         padding: 0;
12     }
13     .cont{
14         font-size: 0;
15     }
16     .left,.right{
17         display:inline-block