box-sizing屬性用於改變元素width和height值的具體意義
段落p、標題h1或div等元素是塊級元素，它們生成塊級框，各個框體是縱向堆疊的（即「換行」）。任何元素可以由display:block宣告為塊級元素。
注：通過css的display屬性，是可以改變html文件中元素預設的布局方式的，比如：p 也可以宣告為行內元素。
橫向格式化：
容納塊寬度 = margin-left + border-left + padding-left + width + padding_right +border-right +margin-right
其中，縱向格式化：
同橫向格式化，只不過外邊距可以摺疊。
strong或span等元素是行內元素，它們生成的框體前後不「換行」。。任何元素可以由display:inline宣告為行內元素。
1）非置換元素
2）置換元素
由display:inline-block宣告的元素。
行內塊級元素與其他元素和內容的關係按行內框處理，實際上是當做置換元素進行格式化的；而行內塊級元素中的內容是視作塊級元素進行格式化的，width、height或box-sizing屬性都可以應用到行內塊級元素中。
通過float屬性來宣告乙個元素作為浮動元素，浮動元素脫離常規的文件流，處在單獨的平面上，使其他元素的內容在浮動元素的周圍流動。
清除浮動
像上圖中，段落3的內容也流動在影象右邊。若不希望浮動元素從段落2區域探出，進入段落3的區域，可以使用clear：left作用到段落3元素上，意為「確保p元素的左邊遠離浮**像」，這樣段落3的位置就會下移到浮動元素下方。如下圖所示：
css 標準流 盒模型 浮動
一 盒模型 1.1 盒子的區域 乙個盒子的主要屬性5個 width height padding border margin padding 內邊距 border 邊框 margin 外邊框 1.2 認識width height 乙個盒子的真實占有的寬度 左border 左padding width...
盒模型與浮動布局
盒子由幾部分組成 物品 填充物 外包裝 外邊距 content padding border margin margin 後面接多個值 上 右 下 左 margin 50px 30px 40px 20px 上 左右 下 margin 50px 30px 40px 上下 左右 margin 50px ...
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...