資訊專欄INFORMATION COLUMN
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸可視尺寸對于沒有設(shè)定的塊元素，可改變元素水平方向的可視尺寸占據(jù)尺寸對于元素，可改變元素水平垂直方向的占據(jù)尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬
張鑫旭的CSS深入理解之margin學(xué)習(xí)筆記margin與容器的尺寸
可視尺寸：對于沒有設(shè)定width的塊元素，margin可改變元素水平方向的可視尺寸
占據(jù)尺寸：對于block/inline-block元素，margin可改變元素水平/垂直方向的占據(jù)尺寸
margin與百分比單位普通元素的百分比margin都是相對于容器的寬度計算的
絕對定位元素的百分比是相對于包含塊的寬度計算的
margin重疊前提
只應(yīng)用于block元素
不考慮writing-mode的情況下，只發(fā)生在垂直方向
場景
兄弟元素發(fā)生重疊
父元素和第一個/最后一個子元素發(fā)生重疊
margin-top重疊：第一個子元素設(shè)置margin-top相當(dāng)于父元素設(shè)置margin-top
父元素BFC
父元素沒有border-top
父元素沒有padding-top
父元素和第一個子元素之間沒有inline元素
margin-bottom重疊：最后一個子元素設(shè)置margin-bottom相對于父元素設(shè)置margin-bottom
父元素BFC
父元素沒有border-bottom
父元素沒有padding-bottom
父元素和最后一個子元素之間沒有inline元素
父元素沒有height, min-height, max-height限制
空block元素發(fā)生重疊（設(shè)置margin: 1em 0;只有1em高度）
元素沒有border設(shè)置
元素沒有padding設(shè)置
元素內(nèi)沒有inline元素
元素沒有height或者min-height
重疊計算
正正取大值
正負(fù)值相加
負(fù)負(fù)最負(fù)值
margin: auto作用前提和原理
前提block水平元素，未設(shè)置寬度的情況下元素會自動填充容器；margin的作用是分配元素寬度以外的剩余空間
垂直居中
writing-mode: vertical-lr
設(shè)置position:absolute;top:0;bottom:0;height，使元素垂直填充整個容器，這時候margin: auto在垂直方向上起作用
margin無效的可能非替換的內(nèi)聯(lián)元素，垂直方向的margin無效
margin重疊
table相關(guān)的元素，margin無效
絕對定位元素因無法與周邊元素產(chǎn)生間距，因此看似無效
跟隨浮動元素，有可能因margin值不夠，看似無效
內(nèi)聯(lián)特性導(dǎo)致margin失效
margin的其他屬性margin-start/margin-end:與流方向相關(guān)（direction, writing-mode）
margin-collapse: margin是否重疊，-webkit-margin-collapse: collapse（重疊）|discard（取消）|separate（分隔）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117040.html
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。 《張鑫旭的CSS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記 絕對定位的特性 絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應(yīng)用場景中也可用絕對定位替代 絕對定位的行為表現(xiàn) 無依賴絕對...
摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動的起因和浮動的實現(xiàn)后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現(xiàn)一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個BFC破壞：使父容器...
摘要：本文是對慕課網(wǎng)張鑫旭的課程深入理解之的學(xué)習(xí)筆記，并結(jié)合了一些個人理解。 本文是對慕課網(wǎng)張鑫旭的課程《CSS 深入理解之 border》的學(xué)習(xí)筆記，并結(jié)合了一些個人理解。 border-width 不支持百分比 border-width 不支持百分比單位，原因如下： 在實際設(shè)計中，邊框一般是固定大小的，不會隨著盒子寬度的增加而增加 margin 和 padding 為百分比單位時，...
摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據(jù)空間會顯示背景色負(fù)值與百分比單位不支持負(fù)值百分比相對于自身寬 張鑫旭的CSS深入理解之padding學(xué)習(xí)筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...
閱讀 1837·2021-11-25 09:43
閱讀 1347·2021-11-22 15:08
閱讀 3751·2021-11-22 09:34
閱讀 3232·2021-09-04 16:40
閱讀 3034·2021-09-04 16:40
閱讀 553·2019-08-30 15:54
閱讀 1342·2019-08-29 17:19
閱讀 1759·2019-08-28 18:13
