★文章內容學習來源：拉勾教育大前端就業集訓營
上篇我們了解了盒模型的前3種應用：
【23】CSS核心樣式（4）——盒模型的5種應用①（3/5）
這篇我們繼續講解2種盒模型的應用：
四、父子盒模型
1.問題
- 一般情況下，一個父元素內部可以放一個或多個子元素；
- 而且如果多個子元素要排成一行顯示，必須保證父元素的寬度一定要足夠（不考慮溢位情況），需要遵循置尺寸的規律：所有子元素的寬度加在一起不能大于父元素的寬度 width，即父元素的
width≥ 所有子元素width + padding + border + margin； - 如果不滿足條件：要么多余的子元素掉下來不能在一排，要么溢位父元素，
如下：
問題示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>問題示例1</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 1000px;
height: 100px;
border: 1px solid #f00;
}
.box1 p {
float: left;
width: 250px;
height: 100px;
margin-right: 50px;
margin-bottom: 10px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
</html>
問題示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>問題示例2</title>
<style>
*{
margin: 0;
padding: 0;
}
.box2 {
width: 200px;
height: 200px;
border: 10px solid #f00;
}
.box2 p {
width: 160px;
height: 200px;
padding: 20px;
border: 20px dashed #00f;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box2">
<p>1</p>
</div>
</body>
</html>
2.解決方法
（1）普通情況解決方法：精確計算
計算或量取尺寸時一定要計算準確，一像素都不能偏差，
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決方法1示范（精確計算）</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 1000px;
height: 100px;
border: 1px solid #f00;
}
.box1 p {
float: left;
width: 200px;
height: 100px;
margin-right: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
</html>
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決方法1示范（精確計算）</title>
<style>
*{
margin: 0;
padding: 0;
}
.box2 {
width: 200px;
height: 200px;
border: 10px solid #f00;
}
.box2 p {
width: 120px;
height: 120px;
padding: 20px;
border: 20px dashed #00f;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box2">
<p>1</p>
</div>
</body>
</html>
（2）特殊情況解決方法：盒模型自動內減
①適用特殊情況★：（父子盒模型中，只有一個子元素），且子元素是類似 <div>標簽必須占一行的，
（比如問題示例2）
②方法詳情：
不設定子元素的 width屬性，子元素的width屬性值會自動加載父級元素的 width， 如果同時設定了子元素水平方向的padding 和 border、margin，不需要手動去進行內減，子元素的 width會自動收縮尺寸，
子元素所有的水平方向的位置所有屬性的加和等于父元素的width ，
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊情況解決方法：盒模型自動內減示例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box2 {
width: 200px;
height: 200px;
border: 10px solid #f00;
}
.box2 p {
padding: 20px;
border: 20px dashed #00f;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box2">
<p>1</p>
</div>
</body>
</html>
五、margin塌陷現象
1.問題情況：
（1）問題描述
在垂直方向如果有兩個元素的外邊距（margin）有相遇的，瀏覽器中加載的真正的外邊距不是兩個間距的加和，而是兩個邊距中值較大的，邊距值小的塌陷到 了邊距值大的值內部，
★注意：水平方向的 margin 沒有塌陷現象，
（2）問題分類
①同級元素塌陷
上面的元素有下邊距，下面的元素有上邊距，兩個邊距相遇，真正的盒子間距離是 較大的那個值，
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同級margin塌陷示例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
margin-bottom: 40px;
background-color: skyblue;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
1
</div>
<div class="box2">
2
</div>
</body>
</html>
、
————————————————————————————————
②父子元素塌陷
②-①
父子元素之間也會出現 margin 塌陷，父元素和子元素都設定了同方向的 margin-top 值，兩個屬性之間沒有其他的內容進行隔離，導致兩個屬性相遇，發生margin 塌陷，
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子元素margin塌陷示例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box3 {
width: 100px;
height: 100px;
margin-top: 40px;/*父元素的margin-top值比子元素的小，塌陷進了子元素的值中*/
background-color: pink;
}
.box3 p {
width: 50px;
height: 50px;
margin-top: 80px;/*子元素的margin-top值比父元素更大*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="box3">
<p></p>
</div>
</body>
</html>
②-②
父子元素塌陷本身父元素與上一個元素的距離是0，子元素如果設定了垂直方向的上邊距，會帶著父級一起掉下來，
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子元素margin塌陷示例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box3 {
width: 100px;
height: 100px;
background-color: pink;
}
.box3 p {
width: 50px;
height: 50px;
margin-top: 20px;/*子元素設定margin-top父元素也有了這個值*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="box3">
<p></p>
</div>
</body>
</html>
——————————————————————————
2.解決 margin 塌陷問題的方法
（1）同級元素
如果兩個元素垂直方向有間距，只需要設定給一個元素，不要進行拆分，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同級margin塌陷解決方法示例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
margin-bottom: 90px;/*只設定給一個元素*/
background-color: skyblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
1
</div>
<div class="box2">
2
</div>
</body>
</html>
（2）父子元素
①解決父子元素margin塌陷方法1：
讓兩個邊距不要相遇，中間可以使用父元素 border或 padding 將邊距分隔開；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子元素margin塌陷解決方法1</title>
<style>
*{
margin: 0;
padding: 0;
}
.box3 {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red; /*父級元素設定一個邊框*/
}
.box3 p {
width: 50px;
height: 50px;
margin-top: 10px;/*子級設定需要的margin值*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="box3">
<p></p>
</div>
</body>
</html>
②解決父子元素margin塌陷方法2：
更加常用的方法：父子盒模型之間的距離就不要用兒子的 margin 去“踹”出來，而是父級的 padding“ 擠”出來，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子元素margin塌陷解決方法2</title>
<style>
*{
margin: 0;
padding: 0;
}
.box3 {
width: 100px;
height: 100px;
background-color: pink;
padding-top: 10px;/*父級設定padding，子級不用再設定距離*/
}
.box3 p {
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box3">
<p></p>
</div>
</body>
</html>
下篇繼續：
【25】CSS核心樣式（5）——顯示模式(display)（上）補充知識：標準檔案流
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271367.html
標籤：其他
下一篇：DOM的基本操作，節點的基本屬性