網頁标簽可以看成是一個個盒子,頁面設計就像壘積木一樣,在網頁中将盒子擺好顯示出來。在浏覽器中可以很清楚的去看到一個标簽的盒子,具體方法如下:
打開浏覽器的開發人員工具,在Elements中選中一個标簽,在右側的styles拉倒最後可以看到這個标簽的盒子模型。具體如下圖所示:
1、邊框 border : border-width || border-style || border-color
border-style 代表邊框的樣式,常用的樣式有以下幾種
- none:無邊框
- hidden:與none類似,不過應用于表格時時解決邊框沖突。
- dotted:點狀邊框
- dashed:虛線邊框
- solid:實線
- double:雙線
- groove:凹槽邊框,主要取決于border-color的取值
- ridge:3D壟狀邊框
- inset :3Dinset邊框
- outset:3Doutset邊框
邊框的樣式既可以單獨指定每條線,也可以一起指定上下左右四條線。具體用法如下
單獨指定可以使用border-left(bottom | right |top)-style(color | width)
一起指定:
- border-style:上 右 下 左
- border-style:上 左右 下
- border-style: 上下 左右
p.p1 {
border-style: none;
}
p.p2 {
border-style: hidden;
}
p.p3 {
border-width: 3px;
border-style: solid;
border-color: red;
}
p.p4 {
border-width: 1px 2px 3px 4px;
border-style: dashed;
border-color: orange;
}
p.p5 {
border-width: 3px;
border-color: black;
border-style: dotted;
}
p.p6 {
border-width: 3px;
border-color: black blue red green;
border-style: double;
}
p.p7 {
border-width: 3px;
border-color: green;
border-style: groove;
}
p.p8 {
border-width: 3px;
border-color: orange red green;
border-style: ridge;
}
p.p9 {
border-width: 3px;
border-color: orange green;
border-style: inset;
}
p.p10 {
border-width: 3px;
border-color: orange blue red green;
border-style: outset;
}
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<p class="p5">p5</p>
<p class="p6">p6</p>
<p class="p7">p7</p>
<p class="p8">p8</p>
<p class="p9">p9</p>
<p class="p10">p10</p>
結果如下:
在Css3中有一種新的邊框:圓角邊框,border-radius後邊指定百分數或像素;
這個與邊框類似都可以同時制定四個角也可以單獨指定每一個角。
div {
width: 200px;
height: 200px;
border: 1px solid red
}
div:first-child {
border-radius: 20px;
}
div:nth-of-type(2) {
border-radius: 20%;
}
div:nth-of-type(3) {
border-radius: 50%;
}
div:nth-of-type(4) {
border-radius: 10px 50px;
}
div:nth-of-type(5) {
border-radius: 10px 50px 100px;
}
div:nth-of-type(6) {
border-radius: 10px 30px 60px 90px;
}
div:nth-of-type(7) {
border-radius: 100px;
height: 100px;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
2、内邊距 padding
内邊距的指定和邊框的指定類似,可以使用padding-left(top|right|bottom)一一指定,也可以直接同時指定四個邊距,同時指定時與border-style同時指定時的規律一緻。
div {
width: 200px;
height: 200px;
border: 1px red solid;
/* padding-left: 10px;
padding-right: 30px;
padding-top: 50px;
padding-bottom: 100px; */
padding: 50px 30px 100px 10px;
}
此時盒子模型為:
,border框出的大小為240*350。
3、外邊距 margin
margin指定方式與padding類似 可以指定單個,也可以同時指定多個邊距
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px;
/* margin-left: 100px;
margin-top: 100px; */
}
此時盒子模型為
可以通過設定margin的左右都是auto來使盒子水準居中(必須是塊元素,且設定了寬度)。
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
/* margin-left: 100px;
margin-top: 100px; */
}
外邊距注意事項:
(1)、行内元素隻有左右外邊距沒有上下外邊距,指定内邊距時也會出現問題。
(2)、上下垂直放置的兩個盒子,如果設定上盒子的margin-bottom和下盒子的margin-top,則在顯示效果上兩個邊距會合并為一個,顯示較大的那個邊距。
(3)、嵌套的兩個盒子,如果設定内盒子的外邊距,則顯示效果是是整體的外邊距,而不是内部盒子與外部盒子的邊距。解決方案:
- 給外盒子設定邊框
- 給外盒子設定内邊距
- 設定overflow:hidden
4、盒子大小的計算方法
(1)、空間尺寸:内容的寬(高) padding的寬(高) border的寬(高) margin的寬(高)
(2)、可見尺寸:内容的寬(高) padding的寬(高) border的寬(高)
(3)、如果一個盒子沒有給定寬度或高度大小,或者是從父元素繼承寬或高,則padding的寬或高不會影響盒子的大小。
更多專業前端知識,請上 【猿2048】www.mk2048.com