本章摘要 : 主要是了解盒子模型的基礎(chǔ)知識(shí),了解相關(guān)的概念.
1, 什么是盒子模型?
網(wǎng)頁上的每一個(gè)標(biāo)簽都是一個(gè)盒子,每個(gè)盒子都有四個(gè)屬性內(nèi)容（content）
盒子里裝的東西
網(wǎng)頁中通常是指文字和圖片填充（padding，內(nèi)邊距）
比如說是我們買酒,怕酒在物流過程中損壞，而添加的泡沫或者其它抗震的輔料邊框（border）：盒子本身
邊界（margin，外邊距）
盒子擺放的時(shí)候的不能全部堆在一起，盒子之間要留一定空隙保持通風(fēng)，同時(shí)也為了方便取出-
標(biāo)準(zhǔn)的盒子模型圖 (注意:它和IE瀏覽器的標(biāo)準(zhǔn)不同):
標(biāo)準(zhǔn)的盒子模型圖.png -
2, 盒子模型幾個(gè)屬性的介紹
-
1, 內(nèi)容屬性
內(nèi)容屬性.png
-
-
2, 內(nèi)邊距
內(nèi)邊距.png -
注意內(nèi)邊距的書寫格式需要掌握,它和iOS中設(shè)置內(nèi)邊距一樣(注意是:上右下左,而且參數(shù)之間是沒有逗號(hào)的)
內(nèi)邊距屬性的書寫格式.png -
3, 邊框
邊框.png 注意 : 設(shè)置圓角有幾種方式,詳情可以去看官網(wǎng)
-
4, 設(shè)置外邊距
外邊距.png-
注意 :設(shè)置外邊距也有幾種方式,需要去官網(wǎng)上了解一下,和內(nèi)邊距一樣,需要知道外邊距的幾種寫法所表示的什么意思.
外邊距的格式.png
-
4, 簡(jiǎn)單使用上述幾個(gè)概念
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型的幾個(gè)基本概念</title>
<style>
div{
/*設(shè)置背景顏色*/
background-color: red;
/*設(shè)置寬高*/
width: 250px;
height: 250px;
/*設(shè)置外邊距*/
margin: 130px;
/*設(shè)置邊框的:邊框的寬度 邊框的樣式 邊框的顏色*/
border: 10px solid green;
/*設(shè)置內(nèi)邊距:上,右,下,左*/
padding: 20px 40px 50px 100px;
}
</style>
</head>
<body>
<div>ALEXWilliam</div>
</body>
</html>
5, 居中顯示
<!DOCTYPE html>
<!--設(shè)置居中需要注意幾點(diǎn): 1:首先需要判斷它是什么樣的類型,不同的類型,設(shè)置的屬性可能不一樣
標(biāo)簽水平居中
行內(nèi)標(biāo)簽 以及行內(nèi)-塊級(jí)標(biāo)簽使用的是:text - align: center
塊級(jí)標(biāo)簽使用的是:margin:0px ayto
標(biāo)簽的垂直居中
line-height : 400px
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>居中顯示</title>
<style>
.William{
color: cadetblue;
background-color: red;
width: 400px;
height: 300px;
/*文字居中*/
text-align: center;
}
.Alex{
/*水平居中*/
margin: 0px auto;
/*垂直居中*/
line-height: 300px;
}
span{
/*水平居中(在父類中)*/
/*垂直居中*/
line-height: 300px;
}
button{
line-height: 300px;
}
</style>
</head>
<body>
<div class="William">
<!--塊級(jí)標(biāo)簽-->
<!--<div class="Alex">大半夜了,我真的好累,但是還是想學(xué)習(xí)</div>-->
<!--行內(nèi)標(biāo)簽-->
<!--<span>堅(jiān)持就是勝利,高薪不是羨慕出來,是自己努力出來的</span>-->
<button>谷歌一下吧</button>
</div>
</body>
</html>
