組成成分：外邊距（margin）、邊框線（boder）、內邊距（padding）、內容（content=height*width）
視覺化部分高度=2*邊框線+2*內邊距+內容（高）
視覺化部分高度=2*邊框線+2*內邊距+內容（寬）
用法：div
div如何觸發乙個盒子的bfc
position：absolute
display：inline
float:left/right
overflow:hidden 溢位部分
例如：
divtop從上至下定位
定義：脫離原來位置定位
相對於有定位的父級進行定位，如果沒有，那麼相對於文件定位
定義：保留原來位置定位
相對於自己進行定位來位置
定義：固定盒子位置，無論滾動條如何移動，都不會在螢幕中消失
注:父相子絕（父元素相對定位，子元素絕對定位）
1.將獨佔一行的元素按順序進行排序（從左或者從右）浮動
2.在浮動的基礎上可以進行外邊框（margin）的設定
3.浮動元素產生浮動流，所有產生了浮動流的元素，塊級元素看不到他們
4.產生了bfc的元素和文字類屬性（inline）的元素以及文字都能看到浮動元素
注：無視行級元素或者塊級元素
div.clearfix::afterp元素：span strong em a del....
特點：獨佔一行，可以通過css改變寬高
元素：div p ul li ol form address...
元素：img
bug:多個image並列時，會存在空格現象，直接將多個img標籤放在同一行即可
注：凡是帶有inline屬性的元素都帶有文字特性
改變塊級元素為行級元素：
div2.先寫css檔案，根據css檔案寫html（優先）
注：先看css庫，再編寫**
元素類別 清除浮動 盒子模型
元素類別 1.塊元素 換行 特點 可以設定寬高，無寬高時預設佔一行，換行 2.行內 內嵌 元素 不換行 特點 不可以設定寬高，寬高就是內容，不換行 span 常用於段落特定文字樣式 img input 是乙個有塊元素屬性的內嵌元素 書寫時，標籤換行，會導致相鄰元素出現間隙 空格 浮動 float 網...
CSS浮動 盒子模型
因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...
2浮動 盒子模型
讓豎著排列的元素橫著排列 float none 不浮動 left 左浮動 right 右浮動 影響 1.讓元素橫著排列 2.脫離文件流 3.左浮動找左邊，右浮動找右邊 4.貼靠現象，父元素寬度不夠，子元素換行 5.混排 注 子元素新增浮動，父元素要清除浮動 float脫離文件流，但是它在其他盒子內的...