HTML+CSS入门如何实现左侧固定右侧自适应的布局-职坐标

HTML+CSS入门如何实现左侧固定右侧自适应的布局

沉沙 2018-08-14 来源：阅读 3986 评论 0

摘要：本篇教程介绍了HTML+CSS入门如何实现左侧固定右侧自适应的布局，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门如何实现左侧固定右侧自适应的布局，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

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;
18         vertical-align: top;
19     }
20     .left{
21         width:100px;
22         height:200px;
23         background:pink;
24     }
25     .right{
26         width:calc(100% - 100px);
27         height:300px;
28         background:blue;
29     }
30     </style>
31 </head>
32 <body>
33     <div class="cont">
34         <div class="left"></div>
35         <div class="right"></div>
36     </div>
37 </body>
38 </html>