margin可以改變容器的尺寸
margin與可視尺寸
（1）試用於沒有設定width/height的普通block水平元素。float元素/absolute/fixed元素/inline水平元素/table-cell元素 是不可以的。
（2）只試用於水平方向的尺寸
例：可以實現一側定寬的自適應布局
"150px" style=
"float:left;"
>
"margin-left:170px"
>這裡是內容<
/p>
百分比margin是相對於寬度的計算。
絕對定位的元素百分比margin是相對於第乙個定位祖先元素（relative/absolute/fixed）的寬度計算。
注1：只發生block水平元素，不包括float元素和absolute元素。
注2：不考慮書寫格式（writing-mode），只發生在垂直方向。
相鄰的兄弟元素,下面**中，兩個p元素中間的距離是20，而非30；
第一行<
/p>
第二行<
/p>
//css
p
//對比1
="father"
>
="son" style=
"margin-top:80px;"
>內容<
/div>
<
/div>
//對比二
="father" style=
"margin-top:80px"
>
="son" style=
"margin-top:80px;"
>內容<
3. 空的block元素
例：高度只有10px，而非20px。
.block
margin重疊的意義
元素有時候，就算沒有設定width或height，也會自動填充對應的方法。
例：會自動填充滿容器的寬度（陣對第乙個父級相對定位元素）
divblock定值，一側auto，那麼auto為剩餘空間大小。如果兩側均是auto，則平分剩餘空間。不會水平居中是因為此時是inline水平元素。
writing-mode:vertical-lr;屬性可以更改流的方向，實現垂直方向margin：auto;實現居中。
經典的彈窗居中:
.father
.son
ul下有多個li元素，每乙個都有設定右邊距10px;這時候就可以設定ul的maigin：-10px;來消除第乙個多餘的邊距，且不會破壞布局（注：ul的寬度也要加上10px來容納邊距）
inline水平元素的垂直margin無效。
注：非替換元素，例如不是元素
在display:table-cell/display:table-row等宣告的margin無效。
絕對定位元素的非定位方位的margin值「無效」。注：看似無效，其實可以和父元素產生聯絡，比如margin值設定超過父元素的高度，父元素依舊會出現滾動條。
距離不夠，無法移動元素。如：兩個寬度30px的塊元素float：left，右邊設定margin-left:20px;是沒有效果的，需要將20px提公升到30px以上才會移動右邊的塊元素。
深入理解 margin
1.margin可以改變容器尺寸。2.margin與百分比單位。普通元素的百分比margin都是相對於父級的寬度計算的，絕對定位元素的百分比margin是相對於第乙個定位祖先元素 relative absolute fixed 的寬度計算的。例子 寬高2 1自適應矩形 box box div 3.正...
學習筆記 CSS深入理解之margin
張鑫旭的css深入理解之margin學習筆記前提 只應用於block元素 不考慮writing mode的情況下，只發生在垂直方向 場景 兄弟元素發生重疊 父元素和第乙個 最後乙個子元素發生重疊 margin bottom重疊 最後乙個子元素設定margin bottom相對于父元素設定margin...
深入理解border屬性
定義 border thin,medium 預設值 thick 其他條件 border不支援百分比 border不會隨著裝置的放大縮小而改變 例項ie7 ie8實現圓角效果.parent parent childie7 ie8繪製列表 三 圖形divborder color 與圖形變色.parent...