目錄
1.畫盒子
?2.Pxcook軟件
3.盒子模型——組成
4.盒子模型 ——邊框線
?5.盒子模型——內外邊距
6.盒子模型——尺寸計算
7.清除默認樣式?
8.盒子模型——元素溢出
?9.外邊距問題
①合并現象
②塌陷問題?
10.行內元素——內外邊距問題?
11.盒子模型——圓角?
12.盒子模型——陰影
1.畫盒子
| 屬性名 | 作用 |
| width | 寬 |
| height | 高 |
| background-color | 背景色 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>.red{width: 100px;height: 100px;background-color: red;}.green{width: 200px;height: 200px;background-color: green;}</style>
</head>
<body><div class="red">div1</div><div class="green">div2</div>
</body>
</html>
效果圖：
?2.Pxcook軟件
（像素大廚）是一款切圖設計工具軟件。支持PSD文件的文字，顏色，距離自動智能識別，手動測量尺寸和顏色等。
官網鏈接：Pxcook
3.盒子模型——組成
①作用：布局網頁，擺放盒子和內容
②重要組成部分：
? ? ? ? 內容區域——width 與 height
? ? ? ? 內邊距——padding（出現在內容與盒子邊緣之間）
? ? ? ? 邊框線——border
? ? ? ? 外邊距——margin（出現在盒子外面）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>div{width: 200px;height: 200px;background-color: aqua;padding: 20px;border: 1px solid #ec9292;margin: 50px;}</style>
</head>
<body><div>div1</div>
</body>
</html>效果圖：
4.盒子模型 ——邊框線
| 屬性值 | 線條樣式 |
| solid | 實線 |
| dashed | 虛線 |
| dotted | 點線 |
? ? ? ? ? ? ? ? ②設置單方向邊框線
? ? ? ? ? ? ? ? 屬性名：border + 方位名詞
? ? ? ? ? ? ? ? （bd+方位名詞首字母，如：bdl）
??
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>div{width: 200px;height: 200px;background-color: aqua;border-top: 1px solid #f1b00c;border-bottom: 5px dotted #42dd0e;border-right: 2px dashed #9f05ec;border-left: 10px solid #e3e011;}</style>
</head>
<body><div>div1</div>
</body>
</html>?效果圖：
?5.盒子模型——內外邊距
①作用：設置內容與盒子邊緣之間的距離
②屬性名：
? ? ? ? 內邊距：padding?或 padding + 方位名詞
? ? ? ? 外邊距：margin
③padding與margin多值寫法：（2個屬性名的屬性寫法，含義一樣）
| 取值個數 | 示例 | 含義 |
| 一個值 | padding：10 px； | 四個方向內邊距均為10px。 |
| 兩個值 | padding：10px? 20px； | 上下10px，左右20px。 |
| 三個值 | padding：10px? 40px? 80px； | 上10px，左右40px，下80px |
| 四個值 | padding：10px? 20px? 40px? 80px | 上10px，右20px，下40px，左80px |
6.盒子模型——尺寸計算
①默認情況：盒子尺寸=內容尺寸+border尺寸+內邊距尺寸
②結論：給盒子加border/padding會撐大盒子
③解決：
? ? ? ? （1）手動做減法，減掉border/padding的尺寸
? ? ? ? （2）內減模式：box-sizing：border-box
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>div{width: 200px;height: 200px;background-color: aqua;padding: 20px;box-sizing: border-box;}</style>
</head>
<body><div>div1</div>
</body>
</html>?效果圖：
7.清除默認樣式?
例如京東
* {
? ? ? ? margin： 0；
? ? ? ? padding： 0；}
（具體見專欄中webstorm前端項目中的CSS選擇器中的部分！）
8.盒子模型——元素溢出
①作用：控制溢出元素的內容的顯示方式
②屬性名：overflow
| 屬性值 | 效果 |
| hidden | 溢出隱藏 |
| scroll | 溢出滾動（無論是否溢出，都顯示滾動條位置） |
| auto | 溢出滾動（溢出才顯示滾動條位置） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>div{width: 200px;height: 200px;background-color: aqua;overflow: scroll;}</style>
</head>
<body><div>div1</div>
</body>
</html>效果圖：
?9.外邊距問題
①合并現象
（1）場景：垂直排列的兄弟元素，上下margin會合并
（2）現象：取兩個margin中的較大值生效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>.one{width: 100px;height: 100px;background-color: aqua;margin-bottom: 80px;}.two{width: 100px;height: 100px;background-color: orange;margin-bottom: 50px;}</style>
</head>
<body><div class="one">div1</div><div class="two">div2</div>
</body>
</html>效果圖：
②塌陷問題?
（1）場景：父子級的標簽，子級的添加上外邊距會產生此問題
（2）現象：導致父級一起向下移動
（3）解決：
? ? ? ? Ⅰ.取消子級margin，父級設置padding
? ? ? ? Ⅱ.父級設置overflow：hidden
? ? ? ? Ⅲ.父級設置border-top
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>.father{width: 300px;height: 300px;background-color: aqua;border-top: 1px solid #f11f1f;}.son{width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
</head>
<body><div class="father">father<div class="son">son</div></div>
</body>
</html>效果圖：
10.行內元素——內外邊距問題?
（1）場景：行內元素添加margin和padding，無法改變元素垂直位置。
（2）解決方法：給行內元素添加line-height可改變垂直位置
11.盒子模型——圓角?
（1）作用：設置元素的外邊框為圓角
（2）屬性名：border-radius
（3）屬性值：數字+px/百分比
（4）提示：屬性值是圓角半徑
（5）常見應用：
? ? ? ? ①正圓形狀：屬性值為：寬高的一半/50%
? ? ? ? ②膠囊形狀：屬性值為：盒子高度的一半
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>img{background-color: orange;border-radius: 50%}div{width:200px;height: 80px;background-color: green;border-radius: 40px;}</style>
</head>
<body><img src="圖像/灰太狼.png" height="330" width="409"/><div></div></body>
</html>12.盒子模型——陰影
（1）作用：給元素設置陰影效果
（2）屬性名：box-shadow
（3）屬性值：X軸偏移量，Y軸偏移量。模糊半徑，擴散半徑，顏色，內外陰影。
注：X軸Y軸偏移量必須書寫！且默認是外陰影，內陰影需添加inset！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>網頁</title><style>div{width:200px;height: 80px;margin: 50px;background-color: #eee4a5;box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5)inset;}</style>
</head>
<body><div></div></body>
</html>效果圖：
：生命周期)
 環境安裝)