整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
例
設(shè)置一個P元素的填充：
p
{
padding:2cm 4cm 3cm 4cm;
}
屬性定義及使用說明
padding 簡寫屬性在一個聲明中設(shè)置所有填充屬性。該屬性可以有1到4個值。
實例:
padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px
padding:10px 5px 15px;
上填充是 10px
右填充和左填充是 5px
下填充是 15px
padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px
padding:10px;
所有四個填充都是 10px
注意： 負(fù)值是不允許的。
| 默認(rèn)值： | 0 |
|---|---|
| 繼承： | no |
| 版本： | CSS1 |
| JavaScript 語法： | object.style.padding="10px 5px" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
屬性值
| 值 | 說明 |
|---|---|
| length | 規(guī)定以具體單位計的填充值，比如像素、厘米等。默認(rèn)值是 0px |
| % | 規(guī)定基于父元素的寬度的百分比的填充 |
| inherit | 指定應(yīng)該從父元素繼承padding |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
SS Padding（填充）屬性定義元素邊框與元素內(nèi)容之間的空間。
Padding（填充）
當(dāng)元素的 Padding（填充）（內(nèi)邊距）被清除時，所"釋放"的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。
可能的值
| 值 | 說明 |
|---|---|
| length | 定義一個固定的填充(像素, pt, em,等) |
| % | 使用百分比值定義一個填充 |
填充- 單邊內(nèi)邊距屬性
在CSS中，它可以指定不同的側(cè)面不同的填充：
實例
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
填充 - 簡寫屬性
為了縮短代碼，它可以在一個屬性中指定的所有填充屬性。
這就是所謂的縮寫屬性。所有的填充屬性的縮寫屬性是"padding":
實例
padding:25px 50px;
嘗試一下 ?
Padding屬性，可以有一到四個值。
padding:25px 50px 75px 100px;
上填充為25px
右填充為50px
下填充為75px
左填充為100px
padding:25px 50px 75px;
上填充為25px
左右填充為50px
下填充為75px
padding:25px 50px;
上下填充為25px
左右填充為50px
padding:25px;
所有的填充都是25px
更多實例
在一個聲明中的所有填充屬性
這個例子演示了使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性，可以有一到四個值。
設(shè)置左部填充
這個例子演示了如何設(shè)置元素左填充。
設(shè)置右部填充
這個例子演示了如何設(shè)置元素右填充。.
設(shè)置上部填充
這個例子演示了如何設(shè)置元素上填充。
設(shè)置下部填充
這個例子演示了如何設(shè)置元素下填充。
所有的CSS填充屬性
| 屬性 | 說明 |
|---|---|
| padding | 使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性 |
| padding-bottom | 設(shè)置元素的底部填充 |
| padding-left | 設(shè)置元素的左部填充 |
| padding-right | 設(shè)置元素的右部填充 |
| padding-top | 設(shè)置元素的頂部填充 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
個網(wǎng)頁前端是由HTML DOM與嵌套組合形成視圖結(jié)加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應(yīng)用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負(fù)責(zé)控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術(shù)的“盒子模型”的出現(xiàn)大大代替了傳統(tǒng)的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內(nèi)容之間的聯(lián)系個區(qū)別。
所有頁面的元素都可以看做一個盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往會比單純的內(nèi)容要大。因此，可以通過盒子的邊框和距離等參數(shù)來控制內(nèi)容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區(qū)域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內(nèi)邊距（Padding）和內(nèi)容外的邊框。注意，它不是透明的。
3、Padding：中文叫內(nèi)邊距，控制內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
4、Content：內(nèi)容，盒子的內(nèi)容，顯示文本和圖像。
5、在Css文件中設(shè)置的Div的Css.width和Css. height就是內(nèi)容的寬和高。
6、盒子實際尺寸有可能大于內(nèi)容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區(qū)別。
頁面如圖所示：
原始樣式
代碼：
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;
}元素邊框：我們可以在CSS邊框?qū)傩灾性O(shè)置元素邊框的樣式和顏色。
按如下代碼設(shè)置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經(jīng)變成200+30+30了，而且可以設(shè)置其底色和線條樣式。
Border
margin 控制周圍的元素區(qū)域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經(jīng)變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當(dāng)元素的 padding（填充）內(nèi)邊距被清除時，所釋放的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>
按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經(jīng)變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調(diào)整其內(nèi)容在父容器中的位置。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
