整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多程序員朋友，在用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#
)CSS 標準盒子模型(Box Model)
在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的
1.2Border(邊框)圍繞在內邊距和內容外的邊框
1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的
1.4Content(內容)盒子里填充的內容比如文本,圖像等
標準盒子模型
寬度為100px的div
根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px
2)DIV+CSS布局
Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等
DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both
clear屬性作用是清除浮動,其值為:1)left 2)right 3)both
d2向右浮動 float:right
因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置
d2設置為右浮動其他兩個div位置的變化:
1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示
2)d2脫離文檔流,d3自動填充到d2的位置
d1,d2全部設置為右浮動
1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖
2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置
3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 50%;
height: 100px;
}
</style>d2清除左浮動,d3設置為右浮動
當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖
當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div+CSS布局</title>
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 30%;
height: 100px;
float:left;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 40%;
height: 100px;
clear: left;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 30%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="d1"><span style="font-size: 50px;">d1</span></div>
<div id="d2"><span style="font-size: 50px;">d2</span></div>
<div id="d3"><span style="font-size: 50px;">d3</span></div>
</body>
</html>DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局
注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守
天在講塊級元素與行內元素區別的時候，我們有提到margin與padding這兩個值，這其實已經涉及到以后會和大家一起討論的css相關知識了。margin中文是‘邊’的意思，在css里面做為‘外邊距’的意思。padding中文有‘襯墊，填塞料’的意思，在css里面做為‘內邊距’的意思。
外邊距，內邊距？要了解這兩個，我們先說一下什么叫css，css英文全稱是cascading style sheets ，中文意思是層疊樣式表，它實際上的作用是用于控制html元素在頁面上的大小形狀，位置，顏色，布局等。通俗一點理解就是相當于在給html元素進行化妝修整一樣。外邊距和內邊距就是屬于css的，用來控制html元素的外邊距和內邊距。margin分上下左右四個值，即margin-top,margin-bottom,margin-left,margin-right四個值。同樣padding也是一樣，有padding-top,......padding-right四個值。
講了這么多，我們可能還是不知道margin與padding到底是什么樣的。現在就來詳細地分享一下，為了更好的理解，在html里面，大家把所有html元素都看做盒子，每一個元素都看做一個盒子，這個也稱為css盒子模型。既然是盒子，那么一個盒子如果要和它右邊的盒子有個50像素的距離，就可以設置一個margin-right值為50px就行了，這個就是所謂的外邊距margin。而padding從中文意思，我們可以理解相當于給這個盒子弄了填塞料，填塞料的厚度就相當于內邊距padding的值了。另外提一下，盒子不單有margin和padding，還有一個border值，就是盒子厚度的意思，同樣有border-top......border-right上下左右四個值。最后用一個圖來看下盒子模型是怎么樣的，如下圖
解釋一下，圖中的content指的是盒子里面的內容，即html元素里面包含的內容。今天就講到這里了，更多內容大家關注點點有我，后面會繼續更新。有什么問題也可以留言一起討論一下哦
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
