贛州朝揚網(wǎng)絡(luò)科技有限公司貫徹做廣告不如做品牌，做品牌以回頭為本的經(jīng)營理念。一心只做為客戶賺錢的網(wǎng)站，為客戶提供營銷方案，解決網(wǎng)絡(luò)營銷疑問。
建站常識
朝揚解讀前沿 資訊，分享互聯(lián)網(wǎng)時代精英智慧
CSS盒子模型的概念丨贛州網(wǎng)站建設(shè)
發(fā)布時間：2018-03-20 作者： 來源： http://m.yqhuitong.cn/ 瀏覽：
一個盒子模型由 content (內(nèi)容)、border(邊框)、padding(間隙)和margin(間隔) 這四個部分組成
一、border
border一般用于分離元素，border的外圍一般是指元素的最外圍
border的屬性只要有三個 color(顏色) width(粗細) style(樣式)
color的設(shè)置和文字的設(shè)置一樣，有256種顏色，通常用16進制表示，比如：#cc55aa
width即為border的粗細，可以設(shè)置為thin、medium、thick和<length>，其中<length>表示具體的數(shù)值，如5px等
width默認為medium，一般瀏覽器解析為2px的寬度。
style屬性可以設(shè)置為 none、hidden、dotted、dashed、solid、double、groove、ridge、insert、outset
其中hidden 和 none 都不顯示 border 效果一樣，在實際運用中用 hidden 來解決邊框沖突問題。
例：<style type="text/css">
div{
border-width:6px;
border-color:#000000;
background-color:#FFFFCC;
}</style>
<body>
<div style="border-style:dashed">The border-style of dashed.</div>
<div style="border-style:dotted">The border-style of dotted.</div>
<div style="border-style:double">The border-style of double.</div>
<div style="border-style:groove">The border-style of groove.</div>
<div style="border-style:inset">The border-style of inset.</div>
<div style="border-style:outset">The border-style of outset.</div>
<div style="border-style:ridge">The border-style of ridge.</div>
<div style="border-style:solid">The border-style of solid.</div>
</body>
二、padding
padding 用于控制 content 與 border之間的距離
例：<style type="text/css">
.outside
{ padding:10px 30px 50px 100px; /* 同時設(shè)置，順時針 */
border:1px solid #000000; /* 外邊框 */
background-color:#fffcd3; /* 外背景 */
}
.inside
{ background-color:#66b2ff; /* 內(nèi)背景 */
border:1px solid #005dbc; /* 內(nèi)邊框 */
width:100%; line-height:40px;
text-align:center;
font-family:Arial;
}
</style>
<body>
<div class="outside">
<div class="inside">padding</div>
</div>
</body>
三、margin
margin 是指元素與元素之間的距離，從直觀上來看就是指用于控制塊與塊之間的距離。
a. 當倆個行內(nèi)元素緊鄰的時候，他們之間的距離為第一個元素的 margin-right 加上第二個元素 margin-left的值
b. 若不是行內(nèi)元素，而產(chǎn)生換行效果的塊級元素，則兩個塊級之間的距離不是 margin-bottom 和 margin-top
的和，而是倆者中取較大的值作為兩個塊級之間的距離。
c. 父子關(guān)系，即當一個div塊包含在另一塊div中間時，其中子塊的 margin 將以父塊的 content 為參考。
注：在上述 C 的情況下當父 div 的高度設(shè)置的值小于子 div塊的高度加上 margin的值時，此時 IE 瀏覽器會自動擴大，
保持子元素的 margin-bottom的空間以及父元素自身的 padding-bottom ，但是 Firefox 就不會，它會保證父元素的
height 高度的完全吻合，這時子元素將超過父元素的范圍。
另外:margin 也可以設(shè)置成負數(shù)，當設(shè)置成負數(shù)時，會使得設(shè)置成負數(shù)的塊向相反的方向移動，甚至覆蓋在其他的塊上。
贛州網(wǎng)站建設(shè)|贛州網(wǎng)絡(luò)公司|贛州做網(wǎng)站|贛州網(wǎng)站建設(shè)價格|贛州網(wǎng)頁制作|贛州建網(wǎng)站公司|贛州微信二維碼平臺|贛州微信公眾號|贛州百度公|贛州百度推廣|贛州百度優(yōu)化|贛州朝揚網(wǎng)絡(luò)|朝揚網(wǎng)絡(luò)
<< 上一篇：贛州企業(yè)網(wǎng)站建站的幾種類型
