資源描述：
《cssmargin外邊距外間距即div與div間距》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。
1、CSSmargin外邊距外間距即div與div間距CSS?外邊距，div與div間距設(shè)置基礎(chǔ)之cssmargin?DIVCSSmargin外邊距外補(bǔ)白邊距樣式屬性margin用于設(shè)置對(duì)象標(biāo)簽之間距離間隔，比如2個(gè)上下排列的DIV盒子，我們就可以使用margin樣式實(shí)現(xiàn)上下2個(gè)盒子間距。Margin呈現(xiàn)是位于對(duì)象邊框外側(cè)，緊貼于邊框，marign與padding位置卻相反csspadding卻是緊貼邊框位于邊框內(nèi)側(cè)。目錄1.margin語(yǔ)法與應(yīng)用結(jié)構(gòu)2.cssmargin縮寫(xiě)簡(jiǎn)寫(xiě)3.常用的margin樣式4.cssmargin用
2、法案例5.cssmargin總結(jié)一、margin基礎(chǔ)語(yǔ)法與結(jié)構(gòu)??DIVCSS外邊距指CSS屬性單詞margin，margin是設(shè)置對(duì)象四邊的外延邊距，沒(méi)有背景顏色也無(wú)顏色。1、margin語(yǔ)法Margin:10pxMargin的值是數(shù)字+html單位，同時(shí)也可以為auto（自動(dòng)、自適應(yīng)）2、應(yīng)用結(jié)構(gòu)Div{margin:10px}設(shè)置div對(duì)象四邊間距為10px3、Margin說(shuō)明margin是設(shè)置對(duì)象外邊距外延邊距離。margin的值有三種情況，可以為正整數(shù)和負(fù)整數(shù)并加單位如PX像素（margin-left:20px）；可
3、以為auto自動(dòng)屬性(margin-left:auto自動(dòng))；可以為百分比（%）值（margin-left:3%）。Margin延伸（單獨(dú)設(shè)置四邊間距屬性單詞）margin-left?對(duì)象左邊外延邊距（margin-left:5px;左邊外延距離5px）margin-right?對(duì)象右邊外延邊距（margin-right:5px;右邊外延距離5px）margin-top?對(duì)象上邊外延邊距（margin-top:5px;上邊外延距離5px）margin-bottom?對(duì)象下邊外延邊距（margin-bottom:5px;下邊外延
4、距離5px）常見(jiàn)margin使用場(chǎng)景4、margin實(shí)際應(yīng)用地方兩個(gè)布局之間距離設(shè)置。如上圖中“CSS手冊(cè)”和“DIVCSS研教室”黃顏色的背景之間空隙（背景土紅）。二、cssmargin縮寫(xiě)簡(jiǎn)寫(xiě)?margin屬性CSS樣式，如遇到上下、左右、上下左右等情況我們可以縮寫(xiě)簡(jiǎn)寫(xiě)優(yōu)化。你可能需要了解：CSS優(yōu)化-CSS壓縮：http://www.divcss5.com/jiqiao/j97.shtml你可能需要了解：HTML優(yōu)化-HTML代碼優(yōu)化壓縮：http://www.divcss5.com/jiqiao/j326.shtml1
5、、只有上下情況縮寫(xiě)原始：margin-top:5px;margin-bottom:6px縮寫(xiě)簡(jiǎn)寫(xiě)為：margin:5px06px0或margin:5pxauto6pxauto2、只有左右情況縮寫(xiě)原始：margin-left:5px;margin-right:6px縮寫(xiě)簡(jiǎn)寫(xiě)為：margin:06px05px或margin:auto6pxauto5px3、只有三邊情況縮寫(xiě)原始：margin-top:5px;margin-bottom:6px;margin-left:4px縮寫(xiě)：margin:5px06px4px或margin:5p
6、xauto6px4px4、四邊相同值縮寫(xiě)原始：margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px縮寫(xiě)：margin:5px;5、四邊不同值縮寫(xiě)原始：margin-top:5px;margin-bottom:6px;margin-left:7px;margin-right:8px縮寫(xiě)：margin:5px8px6px7px;6、四邊其中上下值和左右值各相同縮寫(xiě)上下相同、左右相同原始：margin-top:5px;margin-bottom:5px;m
7、argin-left:7px;margin-right:7px縮寫(xiě)：margin:5px7px;Margin簡(jiǎn)寫(xiě)分析圖：cssdiv?margin樣式簡(jiǎn)寫(xiě)語(yǔ)法應(yīng)用分析圖三、常用的margin樣式?1、用margin設(shè)置對(duì)象盒子間距我們常用margin設(shè)置2個(gè)盒子之間距離，無(wú)論上下左右的距離我們均可以利用margin實(shí)現(xiàn)間隔。實(shí)際可用margin地方示圖2、利用margin實(shí)現(xiàn)布局居中，基礎(chǔ)單詞：marign:0auto;即可實(shí)現(xiàn)對(duì)象居中，但需要一個(gè)條件，那就是該對(duì)象上級(jí)一定要設(shè)置text-align:center內(nèi)容居中屬性樣
8、式。有的瀏覽器body標(biāo)簽不設(shè)置text-align:center內(nèi)容居中樣式，其下級(jí)包含對(duì)象設(shè)置了margin:0auto也會(huì)讓其布局居中，但為了兼容各大瀏覽器建議對(duì)body設(shè)置一個(gè)text-align:center屬性樣式，這里divcss5提供一個(gè)css初始化模板為DI
