摘要:垂直格式化,有一個很重要的方面是會造成垂直相鄰外邊距合并,解決這個的方式見想要清晰的明白一中的部分。參考資料權威指南第三版為負值產生的影響和常見布局應用布局圣杯布局雙飛翼布局深入理解和的基友關系深入理解中的行高
Block Box在上一篇想要清晰的明白(一): CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用,接下來就詳細的介紹兩種盒子的具體細節
(圖自《css權威指南》)
display : block 、 list-item 以及 table 會讓一個元素成為塊級元素。 在Block Box中,會被水平格式化,垂直格式化,那我們就分垂直和水平來講講水平格式化 如何計算其寬度
正常流中,塊級元素框的水平部分 = 其父元素的width = margin-left+margin-right + padding-left+padding-right+ border-left+border-right+自身width
width & margin & auto這個理解非常重要!是等于其父元素的width!
為什么.a中設置padding為auto,均invalid?
在padding-left/right,margin-left/right,border-left/right,width(我們簡稱下水平7大屬性)中只有margin和width的值可能為auto
設置margin-left為10px,顯示正確,為什么margin-right是剩余的所有寬度?
因為當margin-left/right,width三個值均設置有固定寬度的時候,margin-right會根據包含塊的width自動補齊
利用margin:0 auto 居中
所以,利用這種方式居中的時候,必須是要設置居中元素的寬度,這樣左右margin的值便會相等,從而引起的居中,這個和text-align:center只能塊級元素的內聯內容設置居中是不一樣的。
height與width一樣,height定義了內容區的高度,而不是元素框的高度。元素框上下的內邊距,邊距,都會增加到height值里。
只有三個屬性可以設置auto,height,和margin-top/bottom。注意!這里如果margin-top和margin-bottom同時設置為auto,也不會垂直居中,而是默認為零。
垂直格式化,有一個很重要的方面是會造成垂直相鄰外邊距合并,解決這個的方式見想要清晰的明白(一)中的BFC部分。
負margin 水平方向問: 水平7大屬性相加要等于父元素的width,那margin負值會造成什么?
若width不是固定值,那么width的值則會增大 因為要滿足條件等于父元素width,負margin相當于負值,width auto自動增大 若width為固定值,那么margin-right則會auto增大來滿足這個條件
灰色部分是body內的一個盒子,圖二,沒有定框使用負margin后,發生偏移,并且寬度增加,圖三,定寬,發生偏移但是,寬度不增加,我們常常會發現出現莫名的水平滾動條,這里很有可能就是margin這小子在作祟
垂直方向黑色是接在灰色div后的一個div,可以看到,margin-bottom為負值,不會造成元素本身的移動,而是造成兄弟元素往上移動,就像我不動,拉了下面的人一把,而margin-top為負值,就像我們排成一隊,然后像兔子跳一樣一起往前面跳了一步。
從圖二也可以看出來,黑色盒子對灰色盒子發生了覆蓋,因為瀏覽器總是按從前到后的順序顯示元素,所以文檔中后出現的正常流元素可能會覆蓋較早出現的元素。
可以發現,灰色盒子的高度依舊保持著并且渲染出來了,但是CSS讀取的高度已經減小,下面的元素自然往上移動了
負margin與float應用 ——雙飛翼不知道為啥每次看到這名字,就....莫名的想笑,雅蠛蝶
分析身子左邊小翅膀右邊小翅膀
margin負值導致兩個翅膀是覆蓋在div.main上,我們看到的藍色部分是.main-container,margin-left:-100%,相當于是把第二排的第一個,從后面拉動一個100%距離,也就是到了第一排和第一排第一個一起站著,第二排第一個走了,第二排第二個(也就是div.right)自動補到他的位置上,這時候又來了個margin-left:-200px利用到第二排第二個上,往前拉動200px的距離,于是就到了現在div.right的位置
總而言之,水平上的七個元素的寬度和一定會等于父元素的寬度
Line Box每一行稱為一條Line Box,它又是由這一行的許多inline-box組成,它的高度可以直接由line-height決定,line boxes的高度垂直堆疊形成了containing box的高度,就是我們見到的div或是p標簽之類的高度了。
基礎概念 匿名文本當你只有一把錘子一切看起來都像是顆釘子
未包含在行內元素的字符串(當你只有一把錘子,都像顆釘子)就叫匿名文本內容區 行內框 間距
內容區
css假設每個元素都會生成一個或者多個Box,稱為元素框,元素框中心有內容區,內容區外周圍包括了padding,border,margin,但是,替換元素是包括外邊距,內邊距,邊框的。
行間距
行間距是font-size與line-height的差值,被分成兩半在內容區的上下
行內框
非替換元素,行內框高度=line-height
替換元素,行內框高度=內容區寬度(行間距不應用到替換元素)
行高
兩行文字基線的距離
行框
一行有很多行內框,行框是包含這一行行內框最高點和最低點的
基線
不同元素的基線位置不同,整個行框會有一個基線,行內元素的位置是基于兩者基線對齊
該屬性 定義 行內元素的基線相對于該元素所在行的基線的垂直對齊的方式。
只有一個元素屬于inline或是inline-block(table-cell也可以理解為inline-block水平)水平,其身上的vertical-align屬性才會起作用.
同時也可以知道,改變其,會影響到行內框的位置,從而會影響到一整行行內元素的位置
需要注意vertical-align為數值時,會讓文字上下移動,當其為百分比時是針對font-size的百分比
line-height(行高)//這個div調整line-height不會發生變化,因為里面沒有文字 //span的高度會隨著line-height的變化而變化 //說明行內元素的高度是由line-height的支撐決定,行內框的高度也等于line-height管理line-height
因為line-height是根據自己font-size設置,而不是父元素,所以將line-height設置為1em,該元素的line-height則會與相同(em單位是一般是相對與父元素進行設置大小)
margin padding border對行高的影響嘿嘿嘿,這里的line-height值為15px
行內元素其padding、margin、border-top、border-bottom 不會增加行高。
padding會覆蓋;margin將重置為0;border-top和border-bottom同樣會覆蓋。
css2.1規定margin-top和margin-bottom可以運用到不是行內非替換元素的所有其他元素
行內替換元素(如:img)元素會影響行高
inline-block參考資料將對象呈現為inline對象,但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性。
《CSS 權威指南 第三版》
《The Definitive Guide to Using Negative Margins》
margin為負值產生的影響和常見布局應用
CSS布局 -- 圣杯布局 & 雙飛翼布局
CSS深入理解vertical-align和line-height的基友關系
深入理解CSS中的行高
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115272.html
摘要:并且這種過程遵循標準的描述只要不是和絕對定位方式布局的,都在普通流里面。定位相對定位在普通流之中,是相對于它在普通流中的位置中進行移動,元素占據原來位置絕對定位脫離普通流,不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。 視覺格式化模型 頁面(文檔樹)可以想象成是由一個個的Box組合而成的,而視覺格式化模型(Visual formatting model)是一套規則,將...
摘要:提供了糟糕的支持,而雖然接近標準,但依舊未能完全正確的支持標準。盡管修復了許多的問題,但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始,一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章,然而筆者在讀的時...
摘要:中各種布局的背后,實質上是各種的組合。相反,一些塊容器盒,比如非替換行內塊及非替換表格單元格,不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒,用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后,實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
閱讀 2595·2023-04-25 15:07
閱讀 704·2021-11-24 10:21
閱讀 2298·2021-09-22 10:02
閱讀 3517·2019-08-30 15:43
閱讀 3222·2019-08-30 13:03
閱讀 2287·2019-08-29 17:18
閱讀 3585·2019-08-29 17:07
閱讀 1872·2019-08-29 12:27