資訊專欄INFORMATION COLUMN
摘要：行內級元素與行內元素行內級元素行內級元素是那些不會為自身內容形成新的塊，而讓內容分布在多行中的元素。行內元素行內元素僅僅是屬性值為的元素。置換和非置換元素置換元素瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
參考鏈接:
https://segmentfault.com/a/11...
https://juejin.im/post/59b73d...
面試之CSS篇 - 邊距重疊與BFC
塊級元素是那些視覺上會被格式化成塊狀的元素，通俗一點來說就是那些會換新行的元素。例例如：display屬性為block, list-item, table, flex, grid。
塊元素塊元素是 display 屬性值為 block 的元素，它應該是 塊級元素 的一個子集。
行內級元素與行內元素 行內級元素行內級元素是那些不會為自身內容形成新的塊，而讓內容分布在多行中的元素。
例如：display屬性為inline, inline-table, inline-block, inline-flex, inline-grid。
行內元素僅僅是display屬性值為inline的元素。
置換和非置換元素 置換元素瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
常見的置換元素有這些：img,input,textarea,select,button等
若寬高的計算值都為 auto 且元素有固有寬度，則 width 的使用值為該固有寬度
若寬度的計算值為 auto 且元素有固有寬度，則 width 的使用值為該固有寬度
若寬度的計算值為 auto 且高度有 非auto 的計算值，并且元素有固有寬高比，則 width的使用值為“高度使用值 * 固有寬高比”
比如img 當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設置
除此之外，當 width 的計算值為 auto 時，則寬度的使用值為 300px
比如iframe, canvas#####置換元素高度定義
若寬高的計算值都為 auto 且元素有固有高度，則height的使用值為該固有高度
若高度的計算值為 auto 且元素有固有高度，則height的使用值為該固有高度
若高度的計算值為 auto 且寬度有 非auto 的計算值，并且元素有固有寬高比，則 height 的使用值為：寬度使用值/固有寬高比
若高度的計算值為 auto 且上述條件完全不符，則height的使用值不能大于150px，且寬度不能大于長方形高度的2倍
非置換元素瀏覽器中的大多數元素都是不可置換元素，即其內容直接展示給瀏覽器。
非置換元素，寬度設置是不適用BFC
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。
BFC就是頁面上的一個隔離的渲染區域，容器里面的子元素不會在布局上影響到外面的元素，反之也是如此觸發BFC
根元素
float的值不為none
overflow的值為auto,scroll或hidden
display的值為table-cell、table-caption、inline-block、flex 或 inline-flex
position的值不為relative和static
BFC布局規則內部的盒子會在垂直方向，一個個地放置
盒子垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊
每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此
BFC的區域不會與float重疊
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此
計算BFC的高度時，浮動元素也參與計算
IFCIFC(Inline Formatting Contexts)直譯為"內聯格式化上下文"。
IFC布局規則在一個IFC中，從父級元素的頂部開始，盒子一個接一個橫向排列
一個line box總是足夠高對于包含在它內的所有盒子。然后，它也許比包含在它內最高的盒子高
當盒子的高度比包含它的line box的高度低，在line box內的盒子的垂直對齊線通過"vertical align"屬性決定
當在一行中行內級盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由"text align"屬性決定
當一個行內盒子超過了line box的寬度，則它被分割成幾個盒子并且這些盒子被分配成幾個橫穿過的line boxs
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114407.html
摘要：完整的說法是屬于同一個的倆個相鄰的的會發生重疊，與方向無關。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...
摘要：完整的說法是屬于同一個的倆個相鄰的的會發生重疊，與方向無關。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規則。 （可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規則。 （可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...
閱讀 2269·2021-11-23 09:51
閱讀 5657·2021-09-22 15:39
閱讀 3343·2021-09-02 15:15
閱讀 3493·2019-08-30 15:54
閱讀 2355·2019-08-30 15:53
閱讀 1397·2019-08-30 14:04
閱讀 2446·2019-08-29 18:33
閱讀 2364·2019-08-29 13:08
