前端編程基礎(chǔ)：CSS的盒子模型（Margin、Bor

前端編程基礎(chǔ)：CSS的盒子模型（Margin、Border、Padding）？

個(gè)網(wǎng)頁(yè)前端是由HTML DOM與嵌套組合形成視圖結(jié)加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請(qǐng)求，以事件機(jī)制來(lái)響應(yīng)用戶交互操作而形成的。CSS是前臺(tái)頁(yè)面形式最重要的部分，它負(fù)責(zé)控制DOM元素的頁(yè)面布局和顏色、大小的屬性。

在CSS中有一著名的盒子模型理論，可以用它來(lái)控制DOM的位置?；赿iv+css技術(shù)的“盒子模型”的出現(xiàn)大大代替了傳統(tǒng)的table表格嵌套。

雖然其十分好用，但是對(duì)于很多新手來(lái)說(shuō)，卻很難搞清楚它幾個(gè)屬性和內(nèi)容之間的聯(lián)系個(gè)區(qū)別。

盒子模型概念

所有頁(yè)面的元素都可以看做一個(gè)盒子，占據(jù)著一定的頁(yè)面空間。一般來(lái)說(shuō)這些被占據(jù)的空間往往會(huì)比單純的內(nèi)容要大。因此，可以通過(guò)盒子的邊框和距離等參數(shù)來(lái)控制內(nèi)容的位置。

Div+CSS 盒子模型

說(shuō)明：

1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區(qū)域，外邊距是透明的。

2、Border：中文叫邊框，是圍繞在內(nèi)邊距（Padding）和內(nèi)容外的邊框。注意，它不是透明的。

3、Padding：中文叫內(nèi)邊距，控制內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。

4、Content：內(nèi)容，盒子的內(nèi)容，顯示文本和圖像。

5、在Css文件中設(shè)置的Div的Css.width和Css. height就是內(nèi)容的寬和高。

6、盒子實(shí)際尺寸有可能大于內(nèi)容尺寸：

盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;

盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;

實(shí)例演示--原始樣式

接下來(lái)通過(guò)實(shí)例演示的方式來(lái)一一講解Margin、Border、Padding的作用和區(qū)別。

頁(yè)面如圖所示：

原始樣式

代碼：

HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}

Border

元素邊框：我們可以在CSS邊框?qū)傩灾性O(shè)置元素邊框的樣式和顏色。

按如下代碼設(shè)置Div(TsetMiddle)的Border（邊框）：

border-style:solid;
border-width: 10px;
border-color: aqua;

刷新頁(yè)面如下圖：此時(shí)TsetMiddle這個(gè)盒子的總寬度已經(jīng)變成200+30+30了，而且可以設(shè)置其底色和線條樣式。

Border

Margin

margin 控制周?chē)脑貐^(qū)域。margin 沒(méi)有背景顏色，是完全透明的。通過(guò)margin可以控制元素與四周元素的空隙距離；

按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：

margin: 30px auto;

刷新頁(yè)面如下圖：此時(shí)TsetMiddle這個(gè)盒子的總寬度已經(jīng)變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。

Margin

Padding

Padding：當(dāng)元素的 padding（填充）內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)受到元素背景顏色的填充。

按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：

padding: 30px;

刷新頁(yè)面如下圖：此時(shí)TsetMiddle這個(gè)盒子的總寬度已經(jīng)變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。

Padding

總結(jié)

1、各屬性的值可以用px為單位，也可以用em，百分比等。

2、可以利用盒子的各種屬性，調(diào)整其內(nèi)容在父容器中的位置。

例

給div元素添加圓角的邊框：

div

{

border:2px solid;

border-radius:25px;

}

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

屬性
border-image	4.0 -webkit-	9.0	4.0 -moz-	5.0 -webkit-	10.5 -o-

屬性定義及使用說(shuō)明

border-radius 屬性是一個(gè)最多可指定四個(gè) border -*- radius 屬性的復(fù)合屬性

提示： 這個(gè)屬性允許你為元素添加圓角邊框！

默認(rèn)值:	0
繼承:	no
版本:	CSS3
JavaScript 語(yǔ)法:	object object.style.borderRadius="5px"

語(yǔ)法

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

值	描述
length	定義彎道的形狀。
%	使用%定義角落的形狀。

例子 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

邊框可以是圖片img，也可以是div元素，也可以是table，也可以是span

一、邊框樣式的三要素：

1、邊框的寬度 border-width

2、邊框的外觀 border-style

3、邊框的顏色 border-color

二、邊框?qū)傩?/p>

語(yǔ)法：

border-width：像素值；
border-style: 屬性值；none 無(wú)樣式、dashed虛線、solid實(shí)線
border-color:關(guān)鍵字或者RGB值。

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
	width=100px;
	height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;	
}
</style>
	</head> 
	<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>

	</body>
</html>

邊框三個(gè)屬性簡(jiǎn)寫(xiě)

語(yǔ)法：

border:1px solid red;
等價(jià)于
border-width:1px;
border-style: solid;
border-color:red;

舉例：

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
	</head> 
	<body>
<div>你好，嘻嘻</div>
	</body>
</html>

三、局部樣式

一個(gè)框有四個(gè)邊，如果想單獨(dú)設(shè)置一個(gè)邊就需要單獨(dú)設(shè)定

1、上邊框border-top

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡(jiǎn)寫(xiě)為：
border-top: 1px solid red;

2、下邊框border-bottom

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡(jiǎn)寫(xiě)為：
border-bottom: 1px solid red;

3、左邊框border-left

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡(jiǎn)寫(xiě)為：
border-left: 1px solid red;

4、右邊框border-right

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡(jiǎn)寫(xiě)為
border-right: 1px solid red;

整體舉例

在線咨詢

上一篇：用Python識(shí)別和提取pdf中的文字，并寫(xiě)入 CS
下一篇：HTML的延遲加載屬性defer的使用技巧

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

前端編程基礎(chǔ)：CSS的盒子模型（Margin、Bor

盒子模型概念

實(shí)例演示--原始樣式

Border

Margin

Padding

總結(jié)

您的項(xiàng)目需求