盒子模型
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
定位技術(shù)
div是行級元素，定位技術(shù)有兩種：float，position
float
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>采用div浮動對div進(jìn)行排版</title>
</head>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
.father{
background-color: #ffff99;
width: 100%;
height: 100px;
border:1px dashed green;
}
.son1{
float: left;
}
.son2{
float: left;
}
.son3{
float: left;
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbbbbbbb</div>
<div class="son3">cccccccccccccccccc</div>
</div>
</body>
</html>注意問題
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>div浮動引發(fā)的問題</title>
</head>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
.father{
background-color: #ffff99;
width: 100%;
height: 100px;
border:1px dashed green;
}
.son1{
float: left;
}
.son2{
float: left;
}
.son3{
float: left;
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbbbbbbb</div>
<div class="son3">cccccccccccccccccc</div>
<div class="son4">dddddddddddddddddd</div> <!-- son4沒有浮動，但它會受上面浮動的影響，也跟著浮動了 -->
</div>
</body>
</html>清除浮動
.clear{
clear: both;
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbbbbbbb</div>
<div class="son3">cccccccccccccccccc</div>
<div class="clear">
<div class="son4">dddddddddddddddddd</div>
</div>
</div>position
包括相對定位(relative)和絕對定位(absolute)
相對定位(relative)
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>相對定位</title>
</head>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
.father{
background-color: #ffff99;
width: 100%;
height: 100px;
border:1px dashed green;
}
.son1{
position: relative;
left: 60%;
}
.son2{
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbbbbbbb</div>
</div>
</body>
</html>絕對定位(absolute)
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>絕對定位</title>
</head>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
.father{
background-color: #ffff99;
width: 100%;
height: 100px;
border:1px dashed green;
}
.son1{
position: absolute;/* 相對于瀏覽器邊框定位 */
right: 0px;
}
.son2{
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbbbbbbb</div>
<div class="son3">ccccccccccccccc</div>
</div>
</body>
</html>注意：相對定位沒有脫離文檔流，div還占用那個(gè)“坑”。絕對定位脫離了文檔流。
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>絕對定位</title>
</head>
<style type="text/css">
body{
margin: 0px 1px 2px 3px;
}
.father{
background-color: #ffff99;
width: 100%;
height: 100px;
border:1px dashed green;
position: relative;
}
.son1{
position: absolute;/* 相對于father定位 */
right: 0px;
}
.son2{
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbbbbbbb</div>
<div class="son3">ccccccccccccccc</div>
</div>
</body>
</html>兒子采用絕對定位，當(dāng)爸爸設(shè)置了相對定位時(shí)，此時(shí)兒子的絕對定位就相對于爸爸定位了。當(dāng)爸爸沒有設(shè)置了相對定位，此時(shí)兒子的絕對定位就相對于瀏覽器定位了。
絕對定位應(yīng)用（照片簽名）
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>照片簽名</title>
</head>
<style type="text/css">
.image{
position: relative;
background-image: url(01.jpg);
width:600px;
height:1000px;
}
.name{
position: absolute;
right: 30px;
bottom:30px;
font-size: 30px;
color: red;
font:bold;
}
</style>
<body>
<div class="image">
<div class="name">美女</div>
</div>
</body>
</html>經(jīng)常用到的屬性
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>排版中經(jīng)常用到的屬性</title>
</head>
<style type="text/css">
.father{
background-color: #ffff99;
width: 100%;
height: 100px;
border: 1px dashed green;
}
.son1,.son2,.son3{
background-color: #cc99ff;
width: 100%;
margin-left: 5px;
margin-top: 5px;
display: inline; /* 三個(gè)div顯示成一行 */
}
.son3{
display: none;/* 第三個(gè)隱藏 */
}
.son2:hover {
background-color: #3300ff;
cursor:hand;
}
</style>
<body>
<div class="father">
<div class="son1">aaaaaaaaaaaaa</div>
<div class="son2">bbbbbbbbbbbbb</div>
<div class="son3">ccccccccccccc</div>
</div>
</body>
</html>網(wǎng)頁寬度，網(wǎng)頁居中
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>網(wǎng)頁寬度，網(wǎng)頁居中</title>
</head>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
font-size: 12px;
color: red;
}
.container{
margin: 0 auto;
text-align: left;
width: 980px; /* 960-1002 1024-1440 */
border: 1px solid red;
}
</style>
<body>
<div class="container">
這是一段網(wǎng)頁內(nèi)容<br> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> 這是一段網(wǎng)頁內(nèi)容<br data-tomark-pass> </div>
</body>
</html>