CSS和模型概念以及企業應用規劃
1.什麼是盒模型
盒模型：是W3C規定一個瀏覽器如何渲染、顯示一個元素，根據元素的種類分爲塊級元素盒模型和行內元素盒模型。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6I4O1DQ6-1581235403062)(C:\Users\dell\Desktop\我的博客\圖片1.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200209160402654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
2.標準盒模型
<head>
<style>
div{
width:300px;
height:300px;
background-color:red;
boder:30px solid black;
/* 邊框：寬度 樣式 顏色 */
/* solid直線邊框 dashed虛線邊框 dotted點線邊框 double雙實線邊框 */
border-top-style: dashed;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: solid;
border-top-color: red;
border-right-color: gold;
border-bottom-color: blue;
border-left-color: silver;
/*內邊距*/
padding-top:30px;
padding-bottom:20px;
padding-left:20px;
padding-right:30px;
/*複合寫法和外邊距類似*/
}
</style>
</head>
<body>
<div>
文章”的“章”字，是個會意字，從音從十。古代奏音樂，連奏十段才能結束（十，數之終也），這十段樂就是一章。所以，文章文章，也有段落。文章既從“音樂”裏會意出來，應是用文字表達出來的東西，讀起來如音樂一樣美妙無窮、悅耳動聽的文字，傳誦開來，才配得上“文章”一詞的真正含義。
</div>
</body>
結果：![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bexTuGNu-1581235403064)(C:\Users\dell\Desktop\我的博客\QQ截圖20200209144519.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200209160337337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5MTUxMw==,size_16,color_FFFFFF,t_70)
3.怪異盒模型
怪異盒模型：
實際寬尺寸=width
內容區寬尺寸=width-左border-右border-左padding-右padding
怪異盒模型首先就定義了整個盒子的大小，包括邊框和內邊距，而標準盒模型則是在定義的內容區外添加邊框和內邊距。
<head>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
div {
margin: 0 auto;
}
.kiva {
width: 121px;
height: 140px;
background-color: pink;
box-sizing: border-box;
border: 10px solid black; /*怪異盒模型*/
padding: 20px;
}
.ixa {
width: 121px;
height: 140px;
background-color: pink;/*標準盒模型*/
border: 10px solid black;
padding: 20px;
/* margin-top: 100px; */
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="kiva">
<img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=961224733,2320658306&fm=179&app=42&f=JPEG?w=121&h=140" alt="">
</div>
<div class="ixa">
<img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=961224733,2320658306&fm=179&app=42&f=JPEG?w=121&h=140" alt="">
</div>
</body>
結果：![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-y70jY5Zh-1581235403065)(C:\Users\dell\Desktop\我的博客\QQ截圖20200209151647.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200209160417652.png)
4.企業級應用規劃
父子元素外邊距合併： 當將父盒子居中時，子盒子也居中，並且子盒子在父盒子中也居中時，用到該方法。若不使用下述4方法，則子盒子無法在父盒子中居中。
<head>
.father{
width: 300px;
height: 300px;
background-color: pink;
/* 1.給父級設置一個邊框 */
/* border: 1px solid transparent; */
/* 2.給父級設置內邊距 */
/* padding: 1px; */
/* 3.溢出隱藏 */
overflow: hidden;
/* 4.給子級或父級任何一方添加display:inlineblock; */
/* 5.給子級或父級任何一方添加浮動 */
/* 6.給子級或父級任何一方添加定位 */
}
}
.son {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 100px auto;
}
</head>
<body>
div class="father">
<div class="son"></div>
<!-- 溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏溢出隱藏 -->
</div>
</body>
兄弟元素外邊距合併：關於期中兩個margin值的關係，下面代碼中kiva中的margin-bottom>ixa的margin-top所以使用kiva的margin-bottom值。按照兩個值的大小關係，誰大取誰的值。另外還有兩個情況如下：
1兄弟元素之間，垂直方向外邊距如果有一個爲負數，會疊加，和普通加減計算一樣
2兄弟元素之間，垂直方向外邊距如果都爲負數，不會疊加，而會發生外邊距合併現象，並且外邊距最終會取絕對值較的。
另外在驗證的時候應先刪除原有默認的margin值，margin：0；
<head>
<style>
.kiva{
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 50px;
}
.ixa{
width: 200px;
height: 200px;
background-color: lightblue;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="kiva"></div>
<div class="ixa"></div>
</body>
-color: lightblue;
margin-top: 30px;
}
