視訊資源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
視訊記錄 136-161
網頁布局過程
盒子模型組成
邊框 border
/* 實線邊框 */
border-style: solid;
/* 虛線邊框 */
border-style: dashed;
/* 點線邊框 */
border-style: dotted; border-color: blue; 邊框複合型寫法
border:5px solid blue
/*效果等同于下*/
border : 5px;
border-style: solid;
border-color: blue; border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
//效果等同于上
border: 1px solid blue;;
border-top: 1px solid red; 表格細線邊框
border-collapse: collapse;
#重疊的框會自動去取消重疊
邊框會影響盒子大小
Padding: 盒子内容與邊框的距離。
padding也會影響盒子實際大小。
盒子如果已經有了寬度和高度，再指定内邊框會撐大盒子。可以讓weight/height減去内邊距大小即可。
如果盒子本身沒有指定weigh/height屬性，此時padding不會撐開盒子大小。
div {
height: 200px;
width: 200px;
background-color: blue;
}
div p {
padding: 30px;
background-color: skyblue;
}
<div><p></p></div> #沒有指定weigh/height屬性，
h1 {
/* 不指定寬度，預設與父親一樣寬。h1的父親為body,寬度為body寬度。 */
height: 200px;
background-color: pink;
}
<body>
<h1></h1>
</body> h1 {
/* 不指定寬度，預設與父親一樣寬。h1的父親為body,寬度為body寬度。 */
height: 200px;
background-color: pink;
padding: 30px;
}
<body>
<h1></h1>
</body> # 寬度沒有變化，高度增加30px。寬度沒有改變，仍然為1904px。
指定width屬性之後，長度發生變化。1904px變成了1964px。
<style>
h1 {
width: 100%;
height: 200px;
background-color: pink;
padding: 30px;
}
</style>
<body>
<h1></h1>
</body> div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: red;
}
<div>
<p></p>
</div> # p作為div的孩子，沒有指定width/weight時，預設為父親寬度，且高度不會撐開盒子。
外邊距 margin:控制盒子與盒子之間距離。
外邊距可以讓盒子水準居中，需要滿足2個條件
- 盒子必須指定寬度width
- 盒子左右外邊距必須設定為auto
- 對于行内元素、行内塊元素無效。
span {
margin: 0 auto;
}
<span></span> //無效 - 針對于塊元素
/* 第一種寫法 */
margin-left: auto; margin-right: auto;
/* 第二種寫法 */
margin: auto;
/* 開發常用寫法 */
margin: 0 auto; - 行内或行内塊元素水準居中，給其父親添加text-align:center即可。
/* 行内元素或者行内塊元素水準居中給其父元素添加 text-align: center;即可 */
div {
width: 300px;
height: 100px;
background-color: purple;
text-align: center;
}
<div>
<img src="img/1.jpg" alt="Jack" />
</div> 外邊距合并
對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，則父元素會塌陷較大的外邊距值。
解決方案
- 方案一： 為父元素定義上邊框
- 方案二：為父元素定義上内邊距
- 方案三：為父元素添加overflow:hidden
清除内外邊距
網頁元素很多都帶有預設的内外邊距，不同浏覽器預設的也不一緻。在布局之前，首先需要清除網頁元素的内外邊距。
/*CSS的第一行代碼*/
* {
padding: 0; /*清除内邊距*/
margin: 0; /*清除外邊距*/
} 注：行内元素盡量隻設定左右的内外邊距，上下内外邊距一般不起效果。但是轉換塊級元素和行内塊元素就可以了。
PS學習
實戰練習
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0; /*清除内邊距*/
margin: 0; /*清除外邊距*/
}
body {
background-color: #f5f5f5; /*頁面背景顔色為灰色*/
}
a {
color: #333; /*統一網頁連結顔色*/
text-decoration: none; /*取消連結下劃線*/
}
.box {
width: 298px;
height: 415px;
background-color: #fff; /*白色*/
/* 讓塊級盒子水準居中對齊 */
margin: 100px auto;
}
.box img {
width: 100%; /*圖檔寬度超出盒子寬度，無法完全顯示。*/
}
.review {
height: 70px;
font-size: 14px;
margin-top: 30px;
/* 沒有指定width屬性，padding不會撐開盒子寬度。指定了高度，是以不能指定padding的top值。 */
padding: 0 28px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
display: inline-block; /*轉換為行内塊*/
font-weight: 400; /*取消字型加粗*/
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal; /*斜線改為豎線*/
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg" alt="">
<p class="review">米家飛行員太陽鏡 Pro 橢圓框 漸變灰</p>
<div class="appraise">不錯不錯</div>
<div class="info">
<!--h4屬于塊元素，自成1行-->
<h4><a href="#">尼龍偏光，輕巧佩戴</a></h4>
<em>|</em><!--傾斜的豎線-->
<span>169元</span>
</div>
</div>
</body>
</html>