什么是盒模型
英語(yǔ)(box module)是w3c規(guī)定一個(gè)瀏覽器如何渲染，顯示一個(gè)元素笔横。
盒模型的分類(lèi)
塊級(jí)元素盒模型和行內(nèi)元素盒模型竞滓。
理解單個(gè)盒模型的內(nèi)部結(jié)構(gòu)
content 內(nèi)容 width寬 height高
寬高定義了一個(gè)元素內(nèi)容區(qū)的大小,內(nèi)容從元素盒子的左上角開(kāi)始排列
overflow:hidden;超出盒模型的部分隱藏
我們先來(lái)了解盒模型的組成
-
padding (內(nèi)邊距 )
把這個(gè)盒子 和 盒子里邊的內(nèi)容 隔開(kāi)
特點(diǎn):
- 把這個(gè)盒子撐大
- padding區(qū)域的顏色和內(nèi)容區(qū)的顏色保持一致
- padding用于設(shè)置盒子的邊框和內(nèi)容區(qū)的距離
- padding: --復(fù)合樣式 順時(shí)針?lè)较?/li>
?1個(gè)值: 上= 右=下=左
2個(gè)值: 上下-----左右
3個(gè)值: 上------左右 -----下
4個(gè)值:上---右----下----- 左
5.分樣式:
padding-top---上內(nèi)邊距
padding-right:---右內(nèi)邊距
padding-left --- 左內(nèi)邊距
padding-bottom: ---下內(nèi)邊距
-
margin 外邊距
盒子 與 盒子之間的 距離
復(fù)合樣式 分樣式與padding相同
特殊值: auto---自動(dòng) 瀏覽器會(huì)幫助你計(jì)算 左右一樣
-
border邊框線
?復(fù)合樣式 : border:20px solid red;
border的分樣式
?1. border-width ----邊框線大小
- border-style ----邊框線的樣式
?實(shí)線solid 虛線dashed 點(diǎn)線 dotted 雙邊框線 double- border-color: 邊框顏色 transparent 透明色
-
單個(gè)邊框復(fù)合樣式:
?border-top: 20px solid red; 上邊框線
border-left:左
?border-right:右
border-bottom:下
-
單個(gè)邊框分樣式:
border-top-width 上邊框?qū)挾?br> ?border-top-style 上邊框樣式
border-top-color 上邊框顏色
-
一個(gè)標(biāo)準(zhǔn)盒模型占據(jù)頁(yè)面的總空間大小
總寬: width = width(內(nèi)容) + padding(左,右) + border (左,右) +margin(左,右)
總高: height = height(內(nèi)容) +padding(上下 ) +border (上下 ) +margin (上下)
-
一個(gè)標(biāo)準(zhǔn)盒模型的 實(shí)際大小
寬 width = width(內(nèi)容) + padding(左,右) + border (左,右)
?高 height = height(內(nèi)容) +padding(上下 ) +border (上下 )
讓我們看圖來(lái)理解
標(biāo)簽類(lèi)型
1.塊級(jí)標(biāo)簽
? 特點(diǎn):獨(dú)占一行
? 例如:div p ul ol li h1~h6 dl dt dd
2.行級(jí)標(biāo)簽
? 特點(diǎn):橫排顯示
? 例如:span a em strong b i
怪異盒模型的整體概念
塊元素在網(wǎng)頁(yè)內(nèi)容中實(shí)際占據(jù)空間的大小在怪異盒模型和標(biāo)準(zhǔn)盒模型下是不一樣的：
-
標(biāo)準(zhǔn)盒模型下：
標(biāo)準(zhǔn)盒模型的實(shí)際寬度=width+左padding+右padding+左border+右border
標(biāo)準(zhǔn)盒模型的內(nèi)容區(qū)寬度=width -
怪異盒模型下：
怪異盒模型的實(shí)際寬尺寸=width
怪異盒模型的內(nèi)容區(qū)寬尺寸=width-左border-右border-左padding-右padding 高度同理可得咐吼。
怪異盒模型應(yīng)用場(chǎng)景
如果不想因?yàn)楦淖僷adding的時(shí)候盒子的大小也會(huì)跟著變化的話就可以使用怪異盒模型,而如果想讓盒子的大小被padding撐開(kāi)的話就可以使用標(biāo)準(zhǔn)盒模型
案例
<style>
#box{
width:200px;
height: 200px;
background-color: deeppink;
}
</style>
<body>
<div id="box">小明</div>
</body>
這里有個(gè)200px的盒子 我們?cè)龃蠛凶拥膒adding 讓文字距離左側(cè)右邊距 然后還不能改變盒子大小
此時(shí)就需要用到怪異盒模型
<style>
#box{
padding: 50px;
width:200px;
height: 200px;
background-color: deeppink;
box-sizing: border-box;
}
</style>
這里我們可以看到使用怪異盒模型既不會(huì)改變盒子大小 還完成了我們的需求
外邊距合并
外邊距 合并的兩種情況:
- 相鄰:
誰(shuí)的外邊距大就顯示誰(shuí)的外邊距值
解決問(wèn)題方案:中間加一個(gè)元素設(shè)置 border:1px solid transparent;
案例
<style>
#box{
width:200px;
height: 200px;
margin: 30px;
background-color: deeppink;
}
.text{
width: 100px;
height: 100px;
margin: 20px;
background-color: skyblue;
}
</style>
<body>
<div id="box"></div>
<div class="text"></div>
</body>
解決辦法
<style>
#box{
width:200px;
height: 200px;
margin: 30px;
background-color: deeppink;
}
.text{
width: 100px;
height: 100px;
margin: 20px;
background-color: skyblue;
}
.wrap{
border: 1px solid transparent;
}
</style>
<body>
<div id="box"></div>
<div class="wrap"></div>
<div class="text"></div>
</body>
- 嵌套:
誰(shuí)的外邊距大就顯示誰(shuí)的外邊距值
解決問(wèn)題方案:
1. 給父親添加邊框線 : border:1px solid red;
2. 給父親添加padding
3. 給父親添加 overflow:hidden;
案例
<style>
#box{
width:300px;
height: 300px;
margin: 30px 0;
background-color: deeppink;
}
.text{
width: 100px;
height: 100px;
margin: 100px 0;
background-color: skyblue;
}
</style>
<body>
<div id="box">
<div class="text"></div>
</div>
解決方法
<style>
#box{
width:300px;
height: 300px;
margin: 30px 0;
background-color: deeppink;
overflow: hidden;
}
.text{
width: 100px;
height: 100px;
margin: 100px 0;
background-color: skyblue;
}
</style>
