css框模型（譯者注：也被稱為「盒模型」）是網頁布局的基礎 ——每個元素被表示為乙個矩形的方框，框的內容、內邊距、邊界和外邊距像洋蔥的膜那樣，一層包著一層構建起來。瀏覽器渲染網頁布局時，它會算出每個框的內容要用什麼樣式，周圍的洋蔥層有多大，以及框相對於其它框放在**。
文件的每個元素被構造成文件布局內的乙個矩形框，框每層的大小都可以使用一些特定的css屬性調整。
width和height
width和height設定內容框（content box）的寬度和高度。內容框是框內容顯示的區域——包括框內的文字內容，以及表示巢狀子元素的其它框。
paddingpadding表示乙個 css 框的內邊距 ——這一層位於內容框的外邊緣與邊界的內邊緣之間。該層的大小可以通過簡寫屬性padding一次設定所有四個邊，或用padding-top、padding-right、padding-bottom和padding-left屬性一次設定乙個邊。
border
css 框的邊界（border）是乙個分隔層，位於內邊距的外邊緣以及外邊距的內邊緣之間。邊界的預設大小為0——從而讓它不可見——不過我們可以設定邊界的厚度、風格和顏色讓它出現。border簡寫屬性可以讓我們一次設定所有四個邊，例如border: 1px solid black;但這個簡寫可以被各種普通書寫的更詳細的屬性所覆蓋：
marginmargin）代表 css 框周圍的外部區域，稱為外邊距，它在布局中推開其它 css 框。其表現與padding很相似；簡寫屬性為margin，單個屬性分別為margin-top、margin-right、margin-bottom和margin-left。
注意: 外邊距有乙個特別的行為被稱作外邊距塌陷（margin collapsing）：當兩個框彼此接觸時，它們的間距將取兩個相鄰外邊界的最大值，而非兩者的總和。
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
盒模型與浮動布局
盒子由幾部分組成 物品 填充物 外包裝 外邊距 content padding border margin margin 後面接多個值 上 右 下 左 margin 50px 30px 40px 20px 上 左右 下 margin 50px 30px 40px 上下 左右 margin 50px ...
CSS盒模型與布局
1.1兩種基本的盒模型 block型別 這種盒模型的元素不會佔據一行，允許通過 css設定寬度 高度。例如 元素。inline元素 這種盒模型的元素不會佔據一行 預設允許在一行放置許多元素 即使通過 css設定高度和寬度也不會起作用。例如,css為display屬性提供了block和inline兩個...