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