css和div都是頁面布局離不開的語言代碼，本文主要和大家分享div和css布局的基本知識，希望能幫助到大家。

1 p+css布局?
關鍵詞： 盒子 位置
margin
padding
float
position
學的是什么？從本質上來說 學會如何去擺放盒子（p）的位置就可以了

2 盒子模型？
width : 寬度
height: 高度
border: 邊框
margin: 外邊距
padding: 內邊距
作用：思想 用來擺放內容的位置

2.1 margin 外邊距

規律：border margin padding：四邊（上 下 左 右）
border-left
border-right
border-top
border-bottom

2.2 margin簡單注意問題：
body有默認的margin： chrome 8px
如果設置了上下兩個盒子的margin 兩個盒子的距離是以大的那個margin為準（margin的塌陷）
盒子居中： margin: 10px auto;

3 padding 內邊距
作用：用來調整盒子內部的內容的擺放
注意問題：設置了padding以后會把外層盒子整體撐大？影響：影響整個網頁的布局
盒子的總寬度：300(width) + padding-left/right(10+10) + border-left/right(5+5) = 330

4 塊級元素和行內元素
塊級元素：p h1 p li 等等 獨占一行 可以設置寬高
行內元素：span i a img 等等 在一行內顯示 一般情況不可以設置寬高
行內元素轉換成塊級元素：轉換以后就可以支持寬高

規律：p+css布局，margin 、padding、float、position都是和位置有關 把盒子擺放到合適的位置

5 float 浮動

普通流：不使用定位、浮動等特殊css規則的時候，元素的自然排序規則
浮動：脫離了普通流，元素可以左右移動
float:left
float:right
作用：做盒子的左右布局

浮動帶來的問題：有可能會影響到后面元素的布局
解決方案：在浮動過后的元素后面一定要清除浮動

float：左右布局
margin：調整盒子之間的距離
padding
position：定位 固定位置 作用-可以把元素擺放到任意位置

6 相對定位
postion:relative
參照物：根據誰來做這個定位的? 在沒有使用定位之前自身的初始位置
要使位置發生變化還需要有偏移量
left：100px
根據沒有使用定位之前的位置發生偏移 向右偏移100px

7 絕對定位
position:absolute
參照物：1 上級元素中有定位(position)屬性的 2 并且找的是最近的那個有定位屬性的父級
偏移量：left top right bottom

查找參照物的順序： 先找父級元素，如果有定位屬性（position）就以這個父級元素作為參照物發生偏移，
如果沒有找到就向外層逐一查找，直到找到有position屬性的元素，如果一直都沒有，那么就以最外層的html
元素為參照物發生偏移

8 固定定位
參照物：瀏覽器可視區

9 練習

10、其他選擇器
選擇器：選擇元素的方法 id ==> # class ==> . 標簽選擇器==> 標簽名稱

10.1 相鄰選擇器 ==> + 選擇某個元素后面相鄰的元素

10.2 多元素選擇器 ==> ， 應用場景：有多個元素具有相同的屬性（又很多代碼是重復的，可以提取出來做成公用的）

10.3 后代選擇器 ==> 空格， 應用場景：選擇符合條件的后代元素

10.4 子元素選擇器==> > ， 應用場景： 選擇符合條件的子元素

注意： 子元素只能選擇下一層元素 后代選擇器能選中下面n層元素
作用：都是用來方便的選擇元素

10.5 屬性選擇器 ==> 元素[屬性=屬性值] 應用場景：選擇具有某些屬性的元素
name
name = value
name ^= val
name $= val
可以理解為篩選的條件

11、偽類、偽元素

1 p+css布局?
關鍵詞： 盒子 位置
margin
padding
float
position
學的是什么？從本質上來說 學會如何去擺放盒子（p）的位置就可以了

2 盒子模型？
width : 寬度
height: 高度
border: 邊框
margin: 外邊距
padding: 內邊距
作用：思想 用來擺放內容的位置

2.1 margin 外邊距

規律：border margin padding：四邊（上 下 左 右）
border-left
border-right
border-top
border-bottom

2.2 margin簡單注意問題：
body有默認的margin： chrome 8px
如果設置了上下兩個盒子的margin 兩個盒子的距離是以大的那個margin為準（margin的塌陷）
盒子居中： margin: 10px auto;

3 padding 內邊距
作用：用來調整盒子內部的內容的擺放
注意問題：設置了padding以后會把外層盒子整體撐大？影響：影響整個網頁的布局
盒子的總寬度：300(width) + padding-left/right(10+10) + border-left/right(5+5) = 330

4 塊級元素和行內元素
塊級元素：p h1 p li 等等 獨占一行 可以設置寬高
行內元素：span i a img 等等 在一行內顯示 一般情況不可以設置寬高
行內元素轉換成塊級元素：轉換以后就可以支持寬高

規律：p+css布局，margin 、padding、float、position都是和位置有關 把盒子擺放到合適的位置

5 float 浮動

普通流：不使用定位、浮動等特殊css規則的時候，元素的自然排序規則
浮動：脫離了普通流，元素可以左右移動
float:left
float:right
作用：做盒子的左右布局

浮動帶來的問題：有可能會影響到后面元素的布局
解決方案：在浮動過后的元素后面一定要清除浮動

float：左右布局
margin：調整盒子之間的距離
padding
position：定位 固定位置 作用-可以把元素擺放到任意位置

6 相對定位
postion:relative
參照物：根據誰來做這個定位的? 在沒有使用定位之前自身的初始位置
要使位置發生變化還需要有偏移量
left：100px
根據沒有使用定位之前的位置發生偏移 向右偏移100px

7 絕對定位
position:absolute
參照物：1 上級元素中有定位(position)屬性的 2 并且找的是最近的那個有定位屬性的父級
偏移量：left top right bottom

查找參照物的順序： 先找父級元素，如果有定位屬性（position）就以這個父級元素作為參照物發生偏移，
如果沒有找到就向外層逐一查找，直到找到有position屬性的元素，如果一直都沒有，那么就以最外層的html
元素為參照物發生偏移

8 固定定位
參照物：瀏覽器可視區

9 練習

10、其他選擇器
選擇器：選擇元素的方法 id ==> # class ==> . 標簽選擇器==> 標簽名稱

10.1 相鄰選擇器 ==> + 選擇某個元素后面相鄰的元素

10.2 多元素選擇器 ==> ， 應用場景：有多個元素具有相同的屬性（又很多代碼是重復的，可以提取出來做成公用的）

10.3 后代選擇器 ==> 空格， 應用場景：選擇符合條件的后代元素

10.4 子元素選擇器==> > ， 應用場景： 選擇符合條件的子元素

注意： 子元素只能選擇下一層元素 后代選擇器能選中下面n層元素
作用：都是用來方便的選擇元素

10.5 屬性選擇器 ==> 元素[屬性=屬性值] 應用場景：選擇具有某些屬性的元素
name
name = value
name ^= val
name $= val
可以理解為篩選的條件

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com