div和css佈局的基本知識分享

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
可以理解為篩選的條件

相關推薦：

六種css三欄佈局方法範例

CSS使用position:sticky實作黏滯佈局實例詳解

css網頁的幾個佈局實例

以上是div和css佈局的基本知識分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！