左侧固定,右侧自适应的布局
程序员文章站
2022-07-07 19:42:47
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; 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>
上一篇： css代码添加背景图片常用代码