一、CSS盒模型
定義：CSS盒模型四CSS可視化格式化系統的基石，是理解樣式表如何的核心
1、區域與邊界：
- 內容區：元素內容benshen
- 內邊距（padding）：內容區和邊框之間的區域
- 邊框(border)：一到多個圍繞元素內容和內邊距的線
- 外邊距（margin）：在元素邊框的外面。外邊距總是透明的
2、高度和寬度
使用width和height屬性可以設置塊級元素或者內嵌可替換元素（例如圖像）的大小
a、可設置：div、p、form、hr、h1-6、列表等（塊級元素）
img內嵌可替換元素
b、不可設置：a、span、label（內嵌文本元素）
3、外邊距（margin）
定義：圍繞在元素邊框之外的可選區域
屬性值：margin-top、margin-right、margin-bottom、margin-left
CSS代碼縮寫： //中間使用空格分開的
a、body { margin 2px ;} //所有的margin都設爲2px
b、body { margin 2px 4px ;} //上下margin爲2px，左右爲4px
c、body { margin 2px 4px 3px ;} //上margin爲2px，左右margin爲4px，下margin爲3px
d、body { margin 2px 4px 4px 3px;} //上下左右的margin分別爲：2px,4px,4px,3px
外邊距的通用規則
- 總是透明的
- 元素可以有負外邊距
- 正常文檔流值得相鄰塊級元素的垂直（top和bottom）外邊距將會重合，即兩元素之間空白是外邊距中較大的那一個
4、邊框（border）
定義：是圍繞着內容區和padding區畫的一條線
特徵：樣式、寬度、顏色
- 邊框顯示樣式
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
屬性值解釋：none : 無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲點線。否則爲實線
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲虛線。否則爲實線
solid : 實線邊框
double : 雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 根據border-color的值畫3D凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲點線。否則爲實線
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲虛線。否則爲實線
solid : 實線邊框
double : 雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 根據border-color的值畫3D凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
邊框樣式屬性：border-top-style
、border-bottom-style、 border-left-style 、border-right-style
屬性縮寫：border-style
- 邊框的寬度
邊框寬度屬性：border-top-width 、border-bottom-width、 border-left-width 、border-right-width
屬性縮寫：border-width
- 邊框顏色
邊框顏色屬性：border-top-color 、border-bottom-color、 border-left-color 、border-right-color
屬性縮寫：border-color
例題：
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
border-color: black;
border-width:4px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html></span>
5、內邊距（padding）
定義：是內容區和邊框之間的可選區域
注：padding不允許有負值，不會重合
二、百度首頁製作
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p2 {
float: right;
margin:18px 13px;
word-spacing: 20px;
}
.b {
float: right;
background-color: dodgerblue;
color: white;
padding: 6px 6px;
margin:12px 0 ;
}
.c {
margin: 0 auto;
width: 600px;
}
.d {
margin: 10px 280px;
height: 36px;
width: 600px;
}
.e {
float: right;
background-color: dodgerblue;
color: white;
padding: 12px 25px;
margin: -52px 339px 0;
}
.f {
margin:180px 499px;
}
.g {
margin: -170px 450px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<a class="b">更多產品</a>
</div>
<div class="p2">
<a href="#" style="color: black"><b>新聞</b></a>
<a href="#" style="color: black"><b>hao123</b></a>
<a href="#" style="color: black"><b>地圖</b></a>
<a href="#" style="color: black"><b>視頻</b></a>
<a href="#" style="color: black"><b>貼吧</b></a>
<a href="#" style="color: black">登錄</a>
<a href="#" style="color: black">設置</a>
</div>
<div class="c">
<img src="baidu.png">
</div>
<div>
<input type="text" class="d">
<a class="e">百度一下</a>
</div>
<div class="f">
<a style="color: blue" href="#" >把百度設爲主頁</a>
<a style="color: blue" href="#"> 關於百度</a>
<a style="color: blue" href="#">About Baidu</a>
</div>
<div class="g">
<p style="color: slategrey">©2015Baidu
<a href="#" style="color: grey">使用百度必讀</a>
<a href="#" style="color: grey">意見反饋</a>
<span style="color: slategrey">京ICP證030173號</span>
</p>
</div>
</div>
</div>
</body>
</html></span>