整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多程序員朋友，在用CSS進行邊距調整時，老分不清楚外邊距margin和內邊距padding的區別，在我部門，就有兩個迷糊蟲。于是我上網找了一幅圖，一副不可描述的圖(你可不要想歪了)，他們一看就完全明白了，現在分享給你。
在什么場景中使用padding，在什么場景中使用margin，這是一個學問。你掌握了，學問就有了。
這是用padding的學問
（1）需要在border內側添加空白，在文字與邊框留有距離時；
（2）空白處需要背景色時；
（3）上下相連的兩個盒子之間的空白希望等于兩者之和時，比如15px+20px的padding，將得到35px的空白。
這是用margin的學問
（1）需要在border外側添加空白時;
（2）空白處不需要有背景色時;
(3）上下相連的兩個盒子之間的空白需要相互抵消時，比如15px+20px的margin，將得到20px的空白。
在CSS中，通過外邊距margin屬性，可設置元素周圍的空間。可用margin統一指定4邊，也可用margin-top等屬性，特指其中一邊。這種方案，在CSS中是很常見的。padding和margin的作用不同，但用法是一樣的。為了區分效果，我只在一個div中用了padding，通過比較，一目了然。
在CSS表文件ys2.css中的代碼
/*單獨指定一個邊距*/
.one-margin {
margin-left: 100px;
}
/*4個邊距*/
.four-margin {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
}
/*加上padding*/
.use-padding {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
padding-top: 20px;
}在HTML文件中的代碼
<div class="big-div">
<h1 class="one-margin">margin用法</h1>
<div class="four-margin">
margin一個值：4個邊距;<br/>
margin兩個值：上下邊距、左右邊距;<br/>
margin三個值：上邊距、左右邊距、下邊距;<br/>
margin四個值：上邊距、右邊距、下邊距、左邊距。
</div>
<div class="use-padding">
padding一個值：4個邊距;<br/>
padding兩個值：上下邊距、左右邊距;<br/>
padding三個值：上邊距、左右邊距、下邊距;<br/>
padding四個值：上邊距、右邊距、下邊距、左邊距。<br/>
為了區分margin和margin，我只用 padding-top,你能看出效果么?
</div>
</div>輸出結果
好了，有關CSS邊距的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##HTML5##CSS##程序員##Web#
篇中我們介紹了文本的一些樣式，這篇接著講文本樣式。
6.文本下劃線
一般文本下劃線都用在什么地方呢？我想到一個就是畫重點考前劃重點，有沒有畫面感，^v^。
用css來實現劃重點，也是別具風格呀。
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
span{
text-decoration:underline;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
</p>
</body>
</html>text-decoration可以給文本設置下劃線，上劃線，刪除線，取消線。
上面代碼實現效果如下：
這個效果看起來兩行之間的距離有點擁擠，我們可以調整的它們的距離，稍微遠一點，讓它們看起不那么擁擠。
7.文本的行間距
用line-height來指定行間距，因為文本都包含在p標簽中，所以我們給p標簽加了行間距為50px
調整后的效果如下：
看起來下劃線的文字還是不夠顯眼啊，我們再給它加點顏色上去，會更好。
這回好多了。夠顯眼，就絕對記得住。
text-decoration后面可以設置的值如下：
值 | 說明 |
none | 讓本身有劃線裝飾的文本取消掉 |
underline | 讓文本的底部出現一條下劃線 |
overline | 讓文本的頭部出現一條上劃線 |
line-through | 讓文本的中部出現一條刪除線 |
blink | 讓文本進行閃爍，基本不支持了 |
text-decoration：none這個會讓本身有劃線裝飾的文本取消掉的意思，例如a標簽，天生就帶下劃線，那要不想要自帶的下劃線就可以利用這個樣式給它去掉。
來嘗試一下
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
<br>
<a href="http://www.baidu.com">百度</a>
</p>
</body>
</html>百度兩個字下面天生就帶了下換線，要去掉請使用text-decoration：none
其余幾個大家可以自己動手嘗試一下效果。
8.設置英文文本轉換為大小寫
這個標題很好理解，就是專門針對英文的，如果想把英文文本轉換大小寫可以使用
<!DOCTYPE html>
<html>
<head>
<title>css顏色與度量單位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<p>
在做等離子物理對撞實驗的時候，如果把第三能量的極坐標，向負方向調整三個阿爾法單位，那么對最終的結果將會產生多少影響?
<br>
<span>2伽馬一步徐龍根號3</span>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<span class="english">
no zuo no die you why cry
<br>
you zuo you die don't ask why
</span>
</p>
</body>
</html>頁面效果如下：
這里的英文文本也是寫在了span標簽里面，受span標簽樣式的影響這里也變成了紅色，也加了下劃線。我們給它取消掉這些樣式。并給它設置讓英文單詞首字母變成大寫的樣式。
下面給出text-transform的值和作用的表格，大家可以自行動手嘗試效果。
值 | 說明 |
none | 將已被轉換大小寫的值恢復到默認狀態 |
capitalize | 將英文單詞首字母大寫 |
uppercase | 將英文轉換為大寫字母 |
lowercase | 將英文轉換為小寫字母 |
9.文本添加陰影
text-shadow:5px 5px 5px red;
這里有四個值（3個5px和一個red）：第一個值代表水平偏移；第二個值代表垂直偏移；第三個值代表陰影模糊度（可選）；第四個值代表陰影顏色（可選）。
10.設置文本的對齊方式
我們可以設置文本的對齊方式，如果你用過word文檔的話，那一定知道左對齊、右對齊、居中對齊。css里面同樣有
我們來嘗試一下居中對齊
值 | 說明 |
left | 靠左對齊，默認 |
right | 靠右對齊 |
center | 居中對齊 |
justify | 內容兩端對齊 |
start | 讓文本處于開始的邊界 |
end | 讓文本處于結束的邊界 |
start和end屬于css3新增的功能，IE和Opera瀏覽器可能不支持。
11.處理文本之間的距離（letter-spacing）
也就是兩個字間的距離，通過例子來感受一下
很明顯的可以看到字間距變大了。
12.設置英文單詞之間的距離（word-spacing）
13.文本首行的縮進（text-indent）
一般每個段落的首行都要縮進，這是書寫書信文件時的規定。
我們去掉了居中對齊的樣式，是為了更好地演示首行縮進的效果。
看效果圖紅框的地方，明顯有縮進。
好了，以上就是今天的內容了。
希望大家可以早日學會編程，踏上高薪之路，早日成為白富美、高富帥。動手練，聽我的沒錯。
景樣式
1.背景屬性縮寫
Background: 背景色 背景圖片 背景平鋪方式 背景定位
例：body {
background-color:# EDEDED;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
縮寫后：
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
尺寸樣式
1.寬度
width : auto | length
例：
p { width:300px;} div { width:50%;}
2.高度
height : auto | length
例：
img { height:200px;}
div { height:100px;}
邊框樣式
1.邊框線
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例：div { width:300px; height:100px; border-style:solid; ｝
border-top-style 設置上邊框線
border-bottom-style 設置下邊框線
border-left-style 設置左邊框線
border-right-style 設置右邊框線
2.邊框寬度
border-width : medium | thin | thick | length
例：
div { width:300px; height:100px; border-style:solid; border-width:1px; ｝
border-top-width 設置上邊框寬度
border-bottom-width 設置下邊框寬度
border-left-width 設置左邊框寬度
border-right-width 設置右邊框寬度
3.邊框顏色
border-color : color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
border-top-color 設置上邊框顏色
border-bottom-color 設置下邊框顏色
border-left-color 設置左邊框顏色
border-right-color 設置右邊框顏色
4.邊框樣式縮寫
border : border-width || border-style || border-color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
縮寫后：div {
width:300px;
height:100px;
border:1px solid #FF0000;
}
外邊距
margin : auto | length
例：div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
margin-top 設置上邊的外邊距
margin-bottom 設置下邊的外邊距
margin-left設置左邊的外邊距
margin-right設置右邊的外邊距
縮寫型式：
margin: 上邊距 右邊距 下邊距 左邊距
margin: 上下邊距左右邊距
margin: 上邊距 左右邊距 下邊距
內邊距
padding : length
例：
div { width:300px; height:100px; padding:10px;}
padding-top 設置上邊的內邊距
padding-bottom 設置下邊的內邊距
padding-left設置左邊的內邊距
padding-right設置右邊的內邊距
縮寫型式：
padding: 上邊距 右邊距 下邊距 左邊距
padding : 上下邊距左右邊距
padding : 上邊距 左右邊距 下邊距
列表樣式
1.項目符號
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
katakana | katakana-iroha | lower-latin | upper-latin
例：
ul { list-style-type:disc;}/*實心圓*/
ul { list-style-type:circle;}/*空心圓*/
ul { list-style-type:square;}/*實心方塊*/
ul { list-style-type:none;}/*不顯示項目符號*/
ol { list-style-type:decimal;}/*阿拉伯數字*/
ol { list-style-type:lower-roman;}/*小寫羅馬數字*/
ol { list-style-type:upper-alpha;}/*大寫英文字母*/
2.自定義項目符號
list-style-image : none | url ( url )
例：
ul {list-style-image:url(images/arrow.gif)}
鏈接樣式
1.鏈接沒有被訪問時的樣式
a:link
例： a:link { color:#ff0000; }
2.鏈接被訪問后的樣式
a:visited
例： a:link { color:#0000ff; text-decoration:none; }
3.鼠標懸停在鏈接上的樣式
a:hover
例： a:link { background-color:#ccc; }
4.鼠標點擊鏈接時的樣式
a:active
例：a:active { background-color:#ff0000;}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
