盒子模型
圖示
盒子模型
組成部分
盒子模型由margin、border浑吟、padding笙纤、content組成
- Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的组力。
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框省容。
- Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的燎字。
- Content(內(nèi)容) - 盒子的內(nèi)容腥椒，顯示文本和圖像。
盒子計(jì)算
一個(gè)盒子總大小的組成：
- 總大小 = 邊框 * 2 + padding * 2 + width(height)
- padding = (總大小 - width(height))/2-border
參考盒子模型的原理圖轩触，總大小 = 兩個(gè)border + 兩個(gè)padding + 一個(gè)寬度或高度
設(shè)置方式
示例代碼
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 10px;
當(dāng)只有一個(gè)參數(shù)的時(shí)候給上下左右同時(shí)設(shè)置外邊距
當(dāng)有兩個(gè)參數(shù)的時(shí)候第一個(gè)參數(shù)上下寞酿、第二個(gè)參數(shù)左右
當(dāng)有三個(gè)參數(shù)的時(shí)候
第一個(gè)參數(shù) 設(shè)置 上邊距
第二個(gè)參數(shù) 設(shè)置 左右邊距
第三個(gè)參數(shù) 設(shè)置 下邊距當(dāng)有四個(gè)參數(shù)的時(shí)候
分別為:上、右脱柱、下伐弹、左單獨(dú)設(shè)置四條邊外邊距
示例：
<style>
.d1{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
</style>
}
相鄰元素間距計(jì)算規(guī)則
上下外邊距
- 上下外邊距按照 最大的間距算
示例圖：
示例圖
解釋說(shuō)明:
d1這個(gè)盒子的margin-bottom為20px
d2這個(gè)盒子的margin-top為10px
最終的外邊距以最大的20px為準(zhǔn)
左右外邊距
- 左右外邊距按照 兩個(gè)外邊距之和計(jì)算
微信截圖_20220808235907.png
解釋說(shuō)明:
左邊這個(gè)盒子的margin-right為10px
右邊這個(gè)盒子的margin-left為10px
最終實(shí)際效果 間距 為 10+10 = 20px
2.border
邊框的css樣式
<style>
div{
width: 200px;
height: 200px;
/* 分別設(shè)置 */
/* 寬度 */
border-width: 5px;
/* 顏色 */
border-color: aquamarine;
/* 樣式-虛線 */
border-style:dashed;
/* 點(diǎn)狀線 */
border-style: dotted;
/* 雙實(shí)線 */
border-style: double;
/* 圓角 */
border-radius: 50%;
/* 盒子 本質(zhì)上 依據(jù)還是方形的
里面內(nèi)容區(qū)域的排列 依舊遵循方形盒子的排列規(guī)則
*/
/* 簡(jiǎn)化設(shè)置 */
border: 1px solid #000;
}
</style>
3.background
填充盒子
1張圖片-默認(rèn)充滿整個(gè)盒子
<style>
.bg{
width: 110px;
height: 110px;
border:1px solid #000;
background: url('../images/h.png') no-repeat;
background-size:100% 100%;
}
</style>
4張圖片
<style>
.bg{
width: 110px;
height: 110px;
border:1px solid #000;
background: url('../images/h.png') no-repeat;
background-size:50% 50%;
}
</style>
定位
使用background-position:x px ypx;
解釋：
Snipaste_2022-08-10_20-59-28.png
