- 盒子模型解釋
元素在頁面中顯示成一個(gè)方塊，類似一個(gè)盒子，CSS盒子模型就是使用現(xiàn)實(shí)中盒子來做比喻，幫助我們設(shè)置元素對應(yīng)的樣式。盒子模型示意圖如下：
image.png
把元素叫做盒子，設(shè)置對應(yīng)的樣式分別為：盒子的邊框(border)、盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設(shè)置邊框
- 設(shè)置一邊的邊框，比如頂部邊框，可以按如下設(shè)置：
border-top-color:red; /* 設(shè)置頂部邊框顏色為紅色 */
border-top-width:10px; /* 設(shè)置頂部邊框粗細(xì)為10px */
border-top-style:solid; /* 設(shè)置頂部邊框的線性為實(shí)線，常用的有：solid(實(shí)線)
dashed(虛線) dotted(點(diǎn)線); */
- 上面三句可以簡寫成一句：
border-top:10px solid red;
設(shè)置其它三個(gè)邊的方法和上面一樣，把上面的'top'換成'left'就是設(shè)置左邊，換成'right'就是設(shè)置右邊，換成'bottom'就是設(shè)置底邊。
- 四個(gè)邊如果設(shè)置一樣，可以將四個(gè)邊的設(shè)置合并成一句：
border:10px solid red;
- 上面的設(shè)置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個(gè)值按照順時(shí)針方向，分別設(shè)置的是 上 右 下 左
四個(gè)方向的內(nèi)邊距值。 */
盒子模型的尺寸
按照下面代碼制作頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真實(shí)尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
css元素溢出
當(dāng)子元素的尺寸超過父元素的尺寸時(shí)，需要設(shè)置父元素顯示溢出的子元素的方式，設(shè)置的方法是通過overflow屬性來設(shè)置。
- overflow的設(shè)置項(xiàng)：
1、visible 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
2、hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
4、auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
5、inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
