塊級元素
塊級元素是那些視覺上會被格式化成塊狀的元素，通俗一點來說就是那些會換新行的元素。例例如：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等
置換元素寬度定義
比如img 當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設定
比如iframe, canvas#####置換元素高度定義置換元素高度定義
非置換元素
瀏覽器中的大多數元素都是不可置換元素，即其內容直接展示給瀏覽器。
非置換元素，寬度設定是不適用bfc全稱」block formatting context」, 中文為「塊級格式化上下文」。
bfc就是頁面上的乙個隔離的渲染區域，容器裡面的子元素不會在布局上影響到外面的元素，反之也是如此觸發bfc
bfc布局規則
內部的盒子會在垂直方向，乙個個地放置
盒子垂直方向的距離由margin決定，屬於同乙個bfc的兩個相鄰box的上下margin會發生重疊
每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此
bfc的區域不會與float重疊
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之也如此
計算bfc的高度時，浮動元素也參與計算
ifc(inline formatting contexts)直譯為"內聯格式化上下文"。
ifc布局規則
在乙個ifc中，從父級元素的頂部開始，盒子乙個接乙個橫向排列
乙個line box總是足夠高對於包含在它內的所有盒子。然後，它也許比包含在它內最高的盒子高
當盒子的高度比包含它的line box的高度低，在line box內的盒子的垂直對齊線通過'vertical align'屬性決定
當在一行中行內級盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由'text align'屬性決定
當乙個行內盒子超過了line box的寬度，則它被分割成幾個盒子並且這些盒子被分配成幾個橫穿過的line boxs
同時設定float屬性不起作用
生成相對定位的元素，相對於其正常位置進行定位
生成絕對定位的元素，相對於瀏覽器視窗進行定位
預設值。沒有定位，元素出現在正常的流中
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位，如果元素沒有擁有position屬性的父級元素會根據標籤也就是頁面的根節點進行定位
語法：
clear: none | left | right | bothnone: 預設值。允許兩邊都可以有浮動物件
left: 不允許左邊有浮動物件
right: 不允許右邊有浮動物件
both: 不允許有浮動物件
額外標籤法
（缺點：不過這個辦法會增加額外的標籤使html結構看起來不夠簡潔。）
使用after偽元素
該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干畫素
.parent
.parent:after
.fixCSS 屬性之 position講解
postion 屬性定義了乙個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值 position static position inherit position relative position absolute position fixed 依次講解這5個值的應用。position...
CSS標籤屬性之position
position屬性規定元素的定位型別。所以的主流瀏覽器都能夠很好的支援position屬性。任何版本的ie瀏覽器 internet explorer 包括ie8都 不支援position屬性值 inherit 一下五個值是position屬性常用的 absolute 生成絕對定位的元素，相對於st...
CSS定位之position詳解
在前端中，position是很常見的屬性。通過這個屬性可以調整dom元素在瀏覽器中顯示的位置。它有幾個常用的屬性 其中relative position fixed比較難於理解，下面就介紹下這三個 看意思是相對定位，那麼是相對什麼進行定位呢？其實是相對它原本的位置。比如學生站隊，教練喊小明。小明出隊...