左侧固定,右侧自适应的布局

2018-06-24 02:26:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:入门——Bootstrap栅格系统

下一篇:Sublime text3学习小记(macOS系统下的安装使用)