目錄
css盒子模型
1、內容得寬度和高度：
2、元素的寬度和高度：
3、元素空間得寬度和高度
css定位流 了解
->相對定位
->了解
->相對定位的應用：
->絕對定位
->了解
->固定定位
->靜態定位
浮動與清除浮動 了解
一、標準流中的兩種排版方式
1、垂直排版
2、水平排版 浮動
->浮動流排版方式
->特點：
->什麼是浮動元素的脫標
->浮動元素排序規則
清除浮動
第一種：給後面的盒子新增clear屬性
第二種：隔牆法
1、外牆法
2、內牆法
3、外牆法和內牆法的區別：
注意：企業開發種，不常用隔牆法清楚浮動。因為會存在大量的無意義的標籤
第三種：利用偽元素選擇器和隔牆法相結合
盒子模型得寬度和高度
通過標籤的width和height屬性設定的寬度和高度
圖中藍色區域即內容的寬度和高度
寬度：左邊框+左內邊距+width+右內邊距+右邊框
高度：上邊框+上內邊距+height+下內邊距+下邊框
圖中紅線部分即元素的寬度和高度
寬度：左外邊距+左邊框+左內邊距+width+右內邊距+右邊框+右外邊距
高度：上外邊距+上邊框+上內邊距+height+下內邊距+下邊框+下外邊距
圖中紅線部分
定位流分類：相對定位、絕對定位、固定定位、靜態定位
新增屬性：position:relative;
->什麼是相對定位：相對於自己以前在標準流種的位置來移動。
->相對定位是不脫離標準流的，會繼續在標準流種占用乙份空間
->在定位中，同乙個方向上的定位屬性只能使用乙個。
->由於相對定位不脫離標準流，所以在相對定位中是區分塊級元素/行內元素/行內塊級元素。
->由於相對定位是不脫離標準流的，並且相對定位的元素會占用標準流中的位置，所以當給相對定位的元素設定margin/padding等屬性的時候會影響到標準流的 布局
->用於微調
->配合絕對定位使用
絕對定位是相對於body定位。
新增屬性：position:absolute;將標籤變成絕對定位。
->絕對定位的元素是脫離標準流的
->絕對定位不區分塊級元素/行內元素/行內塊級元素，可以設定寬高
->如果乙個絕對定位元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點(只要這個絕對定位元素的祖先元素都可以;定位流是指：絕對定位/相對定位/固定定位;定位流中只有靜態定位不行。)
設定絕對定位水平居中：
設定絕對定位元素的left：50%；
設定絕對定位元素的margin-left:負的元素寬度的一半；
如：元素寬度是300px;設定這個元素水平具中
left:50%;
margin-left:-150px;
設定屬性：position:fixed;
固定定位的元素脫離標準流，不會占用標準流的空間
預設元素為靜態定位
css中元素分為：塊級元素、行內元素、行內塊級元素
元素是塊級元素，會垂直排版
元素是行內元素，或行內塊級元素，會水平排版
1、浮動流是一種「半脫離標準流」的排版方式
2、浮動流只有一種排版方式，就是水平排版，只能設定某個元素左對齊或右對齊。
3、在浮動流中：margin: 0 auto; 無效，不能使用
1、在浮動流中不區分塊級元素、行內元素、行內塊級元素
無論什麼元素都水平排版，顯示在同一行。
2、浮動流中，塊級元素、行內元素、行內塊級元素都可以設定寬高
脫標：脫離標準流
當某乙個元素浮動之後，那麼這個元素看上去就像從標準流中刪除了一樣，這個就是浮動元素的脫標。
->浮動元素脫標之後有什麼影響？
如果前面乙個元素浮動了，而後面乙個元素沒有浮動，前面的乙個元素就會蓋住後面的乙個元素。
1、相同方向上的浮動元素，先付東的元素會顯示在前面，後浮動的元素會顯示在後面
2、不同方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動
3、浮動元素浮動之後的位置，由浮動元素浮動之前在標準流中的位置來確定
clear取值：
none：預設取值，按照浮動元素的排序規則來排序
left:不要找前面的左浮動元素
reght:不要找前面的右浮動元素
在兩個盒子中間新增乙個額外的塊級元素
給這個額外新增的塊級元素設定clear：both;屬性
外牆法可以讓第二個盒子使用margin-top屬性，但是不能給第乙個盒子使用margin-bottom屬性
在第乙個盒子中所以在子元素最後新增乙個額外的塊級元素
給這個額外新增的元素設定clear：both；屬性
內牆法可以讓第二個盒子使用margin-top屬性，也可以第乙個盒子使用margin-bottom屬性
外牆法不能撐起第乙個盒子的高度，而內牆法可以撐起第乙個盒子的高度
偽元素選擇器：css3種新增內容
作用：給指定標籤的內容前面新增乙個子元素或者給制定標籤的內容後面新增乙個子元素
格式：在指定標籤前面新增乙個子元素
標籤名稱::before標籤名稱::after由於偽元素選擇器是css3新增內容，所以不相容ie6
需要設定相容ie6的屬性,對指定標籤設定以下屬性後，即可相容ie6
標籤名稱css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
css樣式之 浮動 盒子模型 定位
1.塊級元素 1.1 常用的塊級元素 div p h1 h6 ul ol li hr table 1.2 塊級元素的特點 1.2.1 塊級元素預設顯示在父標籤的左上角。1.2.2 塊級元素預設沾滿一行 沾滿整個文件流 1.2.3 塊級元素可以變為行內元素 display inline 變為行內元素 ...
CSS浮動 盒子模型
因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...