元素類別
1.塊元素 （換行）
特點：可以設定寬高，無寬高時預設佔一行，換行
2.行內（內嵌）元素（不換行）
特點：不可以設定寬高，寬高就是內容，不換行
span 常用於段落特定文字樣式
img input 是乙個有塊元素屬性的內嵌元素
**書寫時，標籤換行，會導致相鄰元素出現間隙（空格）
浮動（float）
網頁布局第一準則：
多個塊級元素縱向排列-標準流，多個塊級元素橫向排列-浮動
浮動元素特性：
1.浮動元素會脫離標準流/文件流（脫標） （浮動的盒子不在保留原先的位置）
2.浮動元素會一行內顯示並且頂部對齊
3.浮動的元素會具有行內塊元素的特性
***任何元素使用 浮動後 具備行內塊元素的特點 可以設定寬高
***通欄的盒子（與瀏覽器一樣寬） 不需要設定寬度 只設定高度即可
***大盒子裡 一般一浮動全浮動
父元素裡的子元素全部浮動，父元素高度塌陷
解決辦法，清除浮動：
1.給父元素設定高度
2.新增額外的最後的子標籤 div 並設定css屬性：clear:both;
3.給父元素設定 overflow:hidden
4.父級偽元素清除
.cleardiv:after.clearfix:before,
.clearfix:after
.clearfix:after
/*適配ie6,ie7*/
.clearfix
每乙個布局元素都可以看做乙個盒子（容器）
從內到外：內容–>內邊距–>邊框–>外邊距
padding：內邊距 border：邊框 改變容器大小 如果子元素沒有設定width/height 則不會改變父元素盒子大下
margin：外邊距 改變盒子位置
margin 左右相加 上下取最大值（文件流） 如果脫標：依舊是相加
百分比 相對于父元素的寬度（padding margin 的上下左右）
寬度高度的百分比 相對於 父元素的寬高
合併相鄰的邊框：border-collapse : collapse ;
圓角矩形設定：border-radius: 寬度的一半 50%
子元素 未浮動時 設定margin-top 會把父元素下拉（margin-top 會作用于父元素上）：
解決辦法：
1.子元素浮動
2.父元素overflow:hidden;
3.父元素新增內容
4.父元素新增上內邊距
5.父元素新增邊框
div水平居中的方式：
margin:auto; （div必須設定寬度）
盒子模型 層模型 浮動模型以及清除浮動流方法
組成成分 外邊距 margin 邊框線 boder 內邊距 padding 內容 content height width 視覺化部分高度 2 邊框線 2 內邊距 內容 高 視覺化部分高度 2 邊框線 2 內邊距 內容 寬 用法 div divmargin塌陷解決方法 如何觸發乙個盒子的bfc po...
CSS浮動 盒子模型
因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...
2浮動 盒子模型
讓豎著排列的元素橫著排列 float none 不浮動 left 左浮動 right 右浮動 影響 1.讓元素橫著排列 2.脫離文件流 3.左浮動找左邊，右浮動找右邊 4.貼靠現象，父元素寬度不夠，子元素換行 5.混排 注 子元素新增浮動，父元素要清除浮動 float脫離文件流，但是它在其他盒子內的...