网页主流布局的类型
静态布局(static)
【一列布局】
1、页面内容区域有一个固定宽度
2、页面内容区域在浏览器窗口中自适应居中
3、实现办法
页面内容区域box{ 自定义宽度;margin:0 auto;}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>一列布局，一列自适应居中</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 html,body{ 12 height: 100%; 13 } 14 .container{ 15 background-color:#8FE083; 16 height:100%; 17 } 18 19 .container{ 20 width: 970px; 21 margin: 0 auto; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="container">页面主体内容最外围大盒子</div> 27 </body> 28 </html>
【两列布局】
1、一列固定宽，一列自适应宽
2、固定宽度的列:通常称为边栏(左右均可)，主要放置一些固定性的内容，如导航，菜单之类
3、自适应宽的列:根据浏览器窗口的大小自动判断宽度，主要放置主体内容
4、实现办法
固定列容器{固定数值;float:left/right;}
自适应列容器{margin-方向:数值=固定列宽;}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>两列布局:一列固定宽，一列自适应</title> 6 <style> 7 *{margin: 0;padding: 0; } 8 html,body{height: 100%} 9 aside,.main{height:100%;} 10 aside{background-color: #72C7A1;} 11 .main{background-color: #E0C569;} 12 13 aside{width: 200px;float: left;height: 200px;} 14 .main{margin-left:210px;padding-left: 10px;} 15 16 </style> 17 </head> 18 <body> 19 <aside>边栏导航</aside> 20 <div class="main">主体box</div> 21 </body> 22 </html>
【三列布局】
1、三列布局，中间宽度自适应，两边定宽
2、中间列放置主体内容，在浏览器中优先展示渲染
3、原理
当子元素处于浮动状态时，设置负margin >= 子元素宽度时，子元素会叠盖到兄弟元素之上
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三列布局:左右固定列宽，中间列自适应</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 html,body{height: 100%;} 9 .main,.sidebox-left,.sidebox-right{height: 100%;} 10 .main{background-color: #1A2F90;color:#fff;} 11 .sidebox-left{width:200px;background-color:#CDE36D; } 12 .sidebox-right{width:300px;background-color: #FB81E7;} 13 14 15 .main,.sidebox-left,.sidebox-right{float: left;} 16 .main{width:100%;box-sizing:border-box;padding-left: 200px;padding-right:300px;} 17 .sidebox-left{margin-left:-100%;} 18 .sidebox-right{margin-left:-300px;} 19 20 </style> 21 </head> 22 <body> 23 <div class="main">中间主体main内容</div> 24 <aside class="sidebox-left">左边的边栏</aside> 25 <aside class="sidebox-right">右边的边栏</aside> 26 </body> 27 </html>
响应式布局(Responsive)
弹性布局(Flexbox)