布局搭框架###
浮動(dòng) vs 負(fù)margin
對(duì)于相鄰的兩個(gè)浮動(dòng)元素，如果因?yàn)榭臻g不夠?qū)е碌诙€(gè)浮動(dòng)元素下移，可以通過(guò)給第二個(gè)浮動(dòng)元素設(shè)置 margin-left: 負(fù)值 來(lái)讓第二個(gè)元素上移，其中 負(fù)值 大于等于元素上移后和第一個(gè)元素重合的臨界值
單列布局
一欄布局
<style>
.layout{
width: 960px;
margin: 0 auto;
} #header{
height: 60px;
background: red;
} #content{
height: 400px;
background: blue;
} #footer{
height: 50px;
background: yellow;
}
</style>
<div id="header" class="layout">頭部</div>
<div id="content" class="layout">內(nèi)容</div>
<div id="footer" class="layout">尾部</div>
通欄布局優(yōu)化
<style>
.layout{
width: 960px;
margin: 0 auto;
}
body{
min-width: 960px;
}#header{
height: 60px;
background: red;
}#content{
height: 400px;
background: blue;
}#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header">
<div class="layout">頭部</div>
</div>
<div id="content" class="layout">內(nèi)容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
內(nèi)部元素水平居中
.parent{text-align:center;}
.child{display: inline-block;}
雙列布局(一列固定寬度唤崭，另外一列自適應(yīng)寬度)
左固定聘惦，右自適應(yīng)——注意清父容器的浮動(dòng) 注意margin-left的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兩列</title>
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}#footer{
background: #ccc;
}
</style>
</head>
<body>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
三列布局
兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列</title>
<style> #content:after{
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-left: 110px; /為什么要加margin-left/
margin-right: 210px;
height: 400px;
background: red;
}#footer{
background: #ccc;
}</style>
</head>
<body>
<div id="content">
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>
通用九宮格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.ct{
overflow:hidden;
width: 640px;
border:dashed 1px orange;
margin: 0 auto;
}
.ct .item{
float: left;
width:200px;
height:200px;
margin-right: 20px;
margin-top: 10px;
background: red;
}
.ct>ul{
margin-right: -20px;
}</style>
<div class="ct">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
</body>
</html>
圣杯布局:缺點(diǎn)瀏覽器拉小會(huì)出現(xiàn)問(wèn)題
注意寫(xiě)法 margin-left:-100%
.aside{
width: 100px; /1/
height: 300px; /1/
background: red; /1/
margin-left: -100%; /4/
position: relative; /6/
left: -100px; /6/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style> #content:after{
content: ''; /8/
display: block; /8/
clear: both; /8/
} #content{
padding-left: 100px; /5/
padding-right: 150px; /5/
}
.aside, .main, .extra{
float: left; /2/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
</head>
<body>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
</body>
</html>
雙飛翼布局
<style> #content:after{
content: ''; /8/
display: block; /8/
clear: both; /8/
}#content{
}
.aside, .main, .extra{
float: left; /2/
}
.aside{
width: 100px; /1/
height: 300px; /1/
background: red; /1/
margin-left: -100%; /4/
}
.extra{
width: 150px; /1/
height: 300px; /1/
background: yellow; /1/
margin-left: -150px; /5/
}
.main{
/* background: blue; / /第1步添加蝗碎，第7步注釋掉/
/ height: 350px; / /第1步添加，第7步注釋掉/
width: 100%; /3/
}
.wrap{
margin-left: 100px; /6/
margin-right: 150px; /6/
background: blue; /7/
height: 350px; /7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
