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

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

<

1.左侧盒子: 通过子绝父相定位,宽度固定; 右侧盒子: 宽度100%,再设置margin-left为左侧盒子的宽度大小

1 html>

2 

3

4 

5     

6     

7     

8     

Document

9     

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     

32 

33

34 

35     

36         

37         

38     

39 

40

41 

2.左侧盒子: 左浮动; 右侧盒子: 左浮动,再通过calc计算宽度

1 html>

2 

3 

4     

5     

6     

7     

Document

8     

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     

27 

28 

29     

30         

31         

32     

33 

34 

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

理解: 浮动会使得元素脱离文档流，后面元素进行布局时，前面的浮动元素就像不存在一样

1 html>

2 

3 

4     

5     

6     

7     

Document

8     

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     

29 

30 

31     

32         

33         

34     

35 

36 

4.包含左右盒子的大盒子: display: table; 宽度为100%;  左侧和右侧盒子: display: table-cell

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

1 html>

2 

3 

4     

5     

6     

7     

Document

8     

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     

30 

31 

32     

33         

34         

35     

36 

37 

5.左侧 右侧: 定位

理解: position:absolute;的流体性  一个盒子设置为: position:absolute; left:0; right:0; top:0; bottom:0; 会出现全屏的效果

1 html>

2 

3

4 

5     

6     

7     

8     

Document

9     

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     

27 

28

29 

30     

31     

32 

33

34 

6.flex布局

1 html>

2 

3

4 

5     

6     

7     

8     

Document

9     

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     

29 

30

31 

32     

33         

34         

35     

36 

37

38 

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 html>

2 

3 

4     

5     

6     

7     

Document

8     

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     

22 

23 

24     

25         

26         

27     

28 

29 

8.左右盒子为inline-block + 右侧calc

理解:

vertical-align避免基线对齐造成空白

font-size:0;避免空白字符的存在，使得整个宽大于100%，造成右边的div掉下来

1 html>

2 

3 

4     

5     

6     

7     

Document

8     

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     

31 

32 

33     

34         

35         

36     

37 

38 

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！