经典的行布局
1.基础的行布局
2.行布局自适应
3.行布局自适应限制最大宽
4.行布局垂直水平居中
<!DOCTYPE html><html><head> ???<title></title> ???<meta charset="utf-8"> ???<style type="text/css"> ???????body{margin:0;padding: 0;color:#fff; ?text-align: center;font-size: 16px} ???????.header{width: 100%;height: 50px;background: #333;margin: 0 auto; line-height: 50px; position: fixed;} ???????.banner{width: 800px;height: 300px;background: #30a457;margin: 0 auto;padding-top: 50px;} ???????.container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;} ???????.footer{width: 800px;height: 100px;background: #333;margin :0 auto;line-height: 100px;} ???</style></head><body> ???<div class="header">这是页面的头部</div> ???<div class="banner">这是页面的banner图</div> ???<div class="container">这是页面的内容</div> ???<div class="footer">这是页面的底部</div></body></html>经典的列布局
1.两列布局固定 width为px
2.两列布局自适应 width为%
3.三列布局固定
4.三列布局自适应
<!DOCTYPE html><html><head> ???<title></title> ???<meta charset="utf-8"> ???<style type="text/css"> ???????body{margin: 0;padding: 0;color: #fff;} ???????.container{width: 90%;height: 1000px;margin: 0 auto;} ???????.left{width: 60%;height: 1000px;background: #1a5acd;float: left;} ???????.right{width: 40%;height: 1000px;background: #5880f9;float: right;} ???</style></head><body> ???<div class="container"> ???????<div class="left">这是页面的左侧</div> ???????<div class="right">这是页面的右侧</div> ???</div></body></html>混合布局
<!DOCTYPE html><html><head> ???<title></title> ???<meta charset="utf-8"> ???<style type="text/css"> ???????body{margin: 0;padding: 0;font-size: 16px;color: #fff;text-align: center;} ???????.header{width: 100%;height: 50px;background: #5880f9;margin: 0 auto;line-height: 50px;} ???????.container{width: 100%;margin: 0 auto;height: 1000px} ???????.container .left{width: 40%;height: 1000px;background: #67b581;float: left;} ???????.container .right{width: 60%;height: 1000px;background: #123456;float: right;} ???????.footer{width: 100%;height: 100px;background: #ed817e;margin: 0 auto;line-height:100px; } ???</style></head><body> ???<div class="header">这是页面的头部</div> ???<div class="container"> ???????<div class="left">这是页面的左侧</div> ???????<div class="right">这是页面的右侧</div> ???</div> ???<div class="footer">这是页面的底部</div></body></html>圣杯布局
圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念
在国内由淘宝UED的工程师传播开来
布局要求
1.三列布局，中间宽度自适应，两边定宽
2.中间栏要在浏览器中优先展示渲染
3.允许任意列的高度最高
4.用最简单的CSS、最少的HACk语句
<!DOCTYPE html><html><head> ???<title></title> ???<meta charset="utf-8"> ???<style type="text/css"> ???????*{margin: 0;padding: 0;} ???????body{min-width: 700px;} ???????.header, ???????.footer{float: left;width: 100%;background: #ddd;height: 40px;line-height: 40px;text-align: center;} ???????.container{padding: 0 220px 0 200px;} ???????.left, ???????.middle, ???????.right{position: relative;float: left;min-height: 300px;} ???????.middle{width: 100%;background: #1a5acd;} ???????.left{width: 200px;background:#f00; margin-left: -100%;left: -200px;} ???????.right{width: 220px;background:#30a457;margin-left: -220px;right: -220px; } ???????</style></head> <body> ???<div class="header"> ???????<h4>header</h4> ???</div> ???<div class="container"> ???????<div class="middle"> ???????????<h4>middle</h4> ???????????<p>这是页面中间的内容这是页面中间的内容这是页面中间的内容</p> ???????</div> ???????<div class="left"> ???????????<h4>left</h4> ???????????<p>这是页面左侧的内容</p> ???????</div> ???????<div class="right"> ???????????<h4>right</h4> ???????????<p>这是页面右侧的内容</p> ???????</div> ???</div> ???<div class="footer"> ???????<h4>footer</h4> ???</div></body></html>圣杯布局的流程方式：
1.Middle部分首先要放在container的最前部分
2.然后是left right
双飞翼布局
经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局
去掉相对布局，只需要浮动和负边距
<!DOCTYPE html><html><head> ???<title></title> ???<meta charset="utf-8"> ???<style type="text/css"> ???????*{margin:0;padding: 0;} ???????.header, ???????.footer{width:100%;float:left; height: 40px;background: #ddd;text-align: center;line-height: 40px;} ???????.sub, ???????.main, ???????.extra{float: left;min-height: 300px;} ???????.main{width: 100%;min-height: 300px;} ???????.main-inner{margin-left: 200px;margin-right: 220px;background: #30a457;min-height: 300px;} ???????.sub{width: 200px;background: #f00;margin-left: -100%} ???????.extra{width: 220px;background: #1a5acd;margin-left: -220px;} ???</style></head><body> ???<div class="header"> ???????<h4>header</h4> ???</div> ???<div class="main"> ???????<div class="main-inner"> ???????????<h4>main</h4> ???????????<p>这是页面中间的内容这是页面中间的内容这是页面中间的内容</p> ???????</div> ???</div> ???<div class="sub"> ???????<h4>sub 替补</h4> ???????<p>这是页面左侧的内容</p> ???</div> ???<div class="extra"> ???????<h4>extra 多余</h4> ???????<p>这是页面右侧的内容</p> ???</div> ???<div class="footer"> ???????<h4>footer</h4> ???</div></body></html>双飞翼布局的流程方式：
main要放在最前边，其次是sub extra
圣杯布局<div class="container"> ???<div>中间</div> ???<div>左侧</div> ???<div>右侧</div></div>双飞翼布局<div class="main"> ???<div>中间</div></div><div>左侧</div><div>右侧</div>
css网页布局
原文地址：https://www.cnblogs.com/code1992/p/8387381.html