关灯
开启左侧

css常见布局

[复制链接]
doubleyong 发表于 2018-12-10 09:44:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
基础版

1.两列布局

两列布局是一侧固定,另一侧自适应。一般一个浮动,另一个设置margin,或者一个绝对定位,另一个设置margin,代码如下(浮动方法)

  1. <style>
  2.   .left{
  3.      float: left;
  4.      width: 200px;
  5.      background: green;
  6.      height: 200px;
  7.   }
  8.   .right{
  9.       margin-left:200px;
  10.       background: red;
  11.       height: 200px;
  12.   }
  13. </style>
  14. <body>
  15. <div class="left">左边左边左边左边左边左边</div>

  16. <div class="right">右边右边右边右边右边右边</div>
  17. </body>
复制代码

效果如下:

11.png

2.三列布局

三列布局特点是其中两列宽度固定,剩下一个自适应,方法是两个浮动自适应那个设置margin,比如左右固定,中间自适应可以左右分别设置float为left,right,然后中间那个设置margin left right分别为左右两栏宽度。代码如下

  1. <style>
  2.     .left{
  3.         float: left;
  4.         width: 200px;
  5.         background: green;
  6.         height: 200px;
  7.     }
  8.     .center{
  9.         margin: 0 300px 0 200px;
  10.         background: yellow;
  11.         height: 200px;
  12.     }
  13.     .right{
  14.         float: right;
  15.         width:300px;
  16.         background: red;
  17.         height: 200px;
  18.     }
  19.     </style>
  20. <body>
  21. <div class="left">左边左边左边左边左边左边</div>

  22. <div class="right">右边右边右边右边右边右边</div>

  23. <div class="center">中间中间中间中间中间中间</div>
  24. </body>
复制代码

效果如下:

12.png

其他三列布局思路和这个差不多,注意文档顺序即可。或者将浮动换成绝对定位,这样不需要注意文档顺序。

进阶版

1.两列布局
还是那个效果,这次改用flex布局来写,代码如下:

  1. <style>
  2.     body{
  3.         display: flex;
  4.         justify-content: flex-end;
  5.     }
  6.     .left{
  7.         flex: 1;
  8.         background: green;
  9.         height: 200px;
  10.     }
  11.     .right{
  12.         width:300px;
  13.         background: red;
  14.         height: 200px;
  15.     }
  16.     </style>
  17. <body>
  18. <div class="left">自适应自适应自适应自适应</div>

  19. <div class="right">固定固定固定固定固定固定</div>
  20. </body>
复制代码

效果如下:

13.png

对父元素设置flex布局主轴右对齐,有点类似文本的右对齐,这里为了让左边自动填充满屏幕,设置了一个flex
2.三列布局
不多说,代码如下:

  1. <style>
  2.     body{
  3.         display: flex;
  4.         justify-content: space-between;
  5.     }
  6.     .left{
  7.         width:200px;
  8.         background: green;
  9.         height: 200px;
  10.     }

  11.     .right{
  12.         width:100px;
  13.         background: red;
  14.         height: 200px;
  15.     }
  16.     .center{
  17.          flex: 1;
  18.          background: yellow;
  19.          height: 200px;
  20.      }
  21.     </style>
  22. <body>
  23. <div class="left">固定固定固定固定固定固定</div>

  24. <div class="center">自适应自适应自适应自适应</div>

  25. <div class="right">固定固定固定固定固定固定</div>
  26. </body>
复制代码

效果如下:

15.png

存在于面试中的版本

1.圣杯布局

特点是有个头部底部,中间是主要内容区,主要内容区又分成左中右三块,其中中间是最主要内容区,思路是朝一个方向浮动,再用负margin把挤下去的两侧给拉上来再设置相对定位,为了避免中间里面内容被拉上来的挡住再对中间内容设置padding。代码如下:

  1. <style>
  2.    header{
  3.        background: cadetblue;
  4.    }
  5.    footer{
  6.        background: antiquewhite;
  7.    }
  8.    .center{
  9.        width: 100%;
  10.        background: coral;

  11.    }
  12.    .main{
  13.         float: left;
  14.         width: 100%;
  15.         background: yellow;
  16.         height: 200px;
  17.     }
  18.    .main p{
  19.        padding: 0 100px 0 200px;
  20.    }
  21.     .left{
  22.         float: left;
  23.         margin-left: -100%;
  24.         width:200px;
  25.         position: relative;
  26.         left: 0;
  27.         background: green;
  28.         height: 200px;
  29.     }
  30.     .right{
  31.         float: left;
  32.         margin-left: -100px;
  33.         width:100px;
  34.         position: relative;
  35.         right: 100px;
  36.         background: red;
  37.         height: 200px;
  38.     }
  39.     </style>
  40. <body>
  41. <header>我是头部</header>

  42. <div class="center">
  43.     <div class="main"><p>我最重要</p></div>
  44.     <div class="left">左边边</div>
  45.     <div class="right">右边边</div>
  46. </div>

  47. <footer>我是底部</footer>
  48. </body>
复制代码

效果如下:

16.png

2.双飞翼布局
与圣杯布局类似,只是在中间内容区加了个父元素,这样可以省略对左右栏设置相对定位。代码如下:

  1. <style>
  2.     header{
  3.         background: cadetblue;
  4.     }
  5.     footer{
  6.         background: antiquewhite;
  7.     }
  8.     .center{
  9.         width: 100%;
  10.         background: coral;

  11.     }
  12.     .main-father{
  13.         width: 100%;
  14.         float: left;
  15.         background: blueviolet;
  16.     }
  17.     .main{
  18.         padding: 0 100px 0 200px;
  19.         background: yellow;
  20.         height: 200px;
  21.     }
  22.     .left{
  23.         float: left;
  24.         margin-left: -100%;
  25.         width:200px;
  26.         background: green;
  27.         height: 200px;
  28.     }
  29.     .right{
  30.         float: left;
  31.         margin-left: -100px;
  32.         width:100px;
  33.         background: red;
  34.         height: 200px;
  35.     }
  36. </style>
  37. <body>
  38. <header>我是头部</header>

  39. <div class="center">
  40.     <div class="main-father">
  41.         <div class="main">我最重要</div>
  42.     </div>
  43.     <div class="left">左边边</div>
  44.     <div class="right">右边边</div>
  45. </div>

  46. <footer>我是底部</footer>
  47. </body>
复制代码

效果如下:

17.png

转自:https://blog.csdn.net/liwei26/article/details/78976444


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )