矩陣論 - 10 - 四個基本子空間
阿新 • • 發佈：2021-10-13
# 盒子模型
1.內邊距padding
---內邊距是元素的邊界與元素內部內容產生的距離
特點：
標準和模型當給予元素內邊距是整個元素會增大
內邊距是元素本身佔位的一部分，如元素有顏色,內邊距也會使用元素的顏色
---內邊距參照的是內容的邊界
-元素沒寬高參照子元素撐開的長度
# 子元素都在文件流佈局中設有脫離文件流 - 怪相一：塊級元素因為預設寬度是父元素的百分之百，如果沒有單獨設定寬度，則不會超出父元素百分之百的範圍，子元素只能撐開高度部分(在佈局中基本不存在) - 怪相二 ：當子元素小於父元素時，父元素增加內邊距，即使不會把子元素向某邊內擠壓，仍然會產生內邊距，最終使元素放大(在佈局中存在) # 子元素都在文件流佈局中設有脫離文件流
- 四個方向 padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; - 簡寫 padding:一個值代表四個方向值相同 padding:值1 值2; 上下和左右 padding:值1 值2 值3;上和左右和下 padding:值1 值2 值3 值4;上、右、下、左 長度單位,但%參照的是父元素的寬度 內邊距不能為負值
2.border 邊框線位於內邊距的外層，用於修飾元素外層邊框 border 樣式組合屬性: border-width: 邊框線寬度; (一般使用px) border-style: 邊框樣式;solid實線 dashed 虛線 dotted 點狀線 border-color: 色值; 邊框顏色
- 簡寫樣式 每個邊可以單邊設定以上三個屬性如：border - 四個邊的邊框相同:border:寬度 樣式; 顏色(省略 預設黑色) 下邊框：border-bottom:寬度 樣式 顏色; 上邊框：border-top：寬度 樣式 顏色; 左邊框: border-left：寬度 樣式 顏色; 右邊框: border-right：寬度 樣式 顏色;
- 常用的情況 元素的四個邊框線如:一個卡片,規格選項,啟用的圖或文字 下邊框線 如:分隔列表的專案,一行標題下 三角形
2.外邊距margin 外邊距位於外邊框外側 不在元素的範圍內 不會增加元素本身的大小 - 語法 四個方向 margin-top:上邊框 margin-right:右外邊距 margin-bottom:下外邊距 margin-left:左外邊距 - 簡寫方式：margin:一個值 代表四個方向 margin:值1 值2;上下、左右 margin:值1 值2 值3;上、左右、下 margin:值1 值2 值3 值4;上、右、下、左 值可以為負值，按照元素的座標 向下是top的正值 向上是top的正值 向左是top的正值 向右是top的正值 auto 屬性 margin:auto; 是讓已定義寬度的子元素在父級元素中水平的方式,auto只左右外邊距自適應父級元素寬度 margin:上下值 auto;常用用法
- 自帶外邊距的元素 body 8px的外邊距 ul p h1~h6 - 外邊距合併現象外邊距 前提，上下垂直的響鈴兄弟元素，當他們都有外邊距，上下重合時會發生合併 會取相對大的外邊距為兩個元素之間的距離 - 外邊距溢位現象 父元素的第一次和最後一個元素會有外邊距溢位情況 最後一個子元素的上邊距會和父元素的上外邊距發生重疊,導致父元素出現下外邊距而子元素無效 行內塊顯示的元素不會出現外邊距溢位(一般不會用行內塊佈局)
# 解決方案 - 給父級加，上內邊距，可以讓第一個元素和父元素上邊產生距離(常用) - 給父級元素加邊框線 讓兩個元素的邊上不重合，但實際需要邊框時可使用 - 利用BFC 給父級加,overflow:hidden/auto 觸發BFC,可以避免margin重疊問題,弊端超出父級的子元素會隱藏或出現拖拽條 - 在第一個子元素和父元素之間加一個<table></table>空標籤因table標籤的屬性可以是兩個元素之間產生距離(基本不用 會打亂佈局) - 利用偽元素模擬table出現讓兩個元素之間產生間隙 - .box::before{ content: ""; box前變成table 顯示 display: table;
# 下和右外邊距無效現象 - 當元素右外邊距導致自身發生位移只有左和上會讓當前元素髮生位移 - 下和右只能更讓當前元素和周圍的兄弟元素產生距離,當他旁邊沒有兄弟元素時,看上去無效,但盒子模型會體現
# 計算盒子模型 - 標準盒子模型 - 一個元素在頁面上佔據的位置,內聯元素上下內外邊距不生效 - 總體佔寬:左外邊距+左邊框+左內邊距+內容+右內邊框+右邊框+右外邊框 - 總共佔高:上外邊距+上邊框+上內框局+上內邊距+內容+下邊框+下外邊框 - 元素本身佔寬=左右邊框+左右內邊框+內容寬 - 元素本身的佔高=上下邊框+上下內邊距+內容高 box-sizing:content-box:指定元素為標準盒子模型的計算方式 box-sizing:border-box;指的是盒子的寬度就是content部分
# 怪異盒子模型 設定元素寬度和高度將被重新計算 設定寬度=邊框+內邊距+重新計算過的寬高 不會因為內邊距和邊框而放大元素 box-sizing:border-box;會將寬度重新計算後顯示 border-box;值指的是,盒子的寬度就是border以內的所有部分
# 子元素都在文件流佈局中設有脫離文件流 - 怪相一：塊級元素因為預設寬度是父元素的百分之百，如果沒有單獨設定寬度，則不會超出父元素百分之百的範圍，子元素只能撐開高度部分(在佈局中基本不存在) - 怪相二 ：當子元素小於父元素時，父元素增加內邊距，即使不會把子元素向某邊內擠壓，仍然會產生內邊距，最終使元素放大(在佈局中存在) # 子元素都在文件流佈局中設有脫離文件流
- 四個方向 padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; - 簡寫 padding:一個值代表四個方向值相同 padding:值1 值2; 上下和左右 padding:值1 值2 值3;上和左右和下 padding:值1 值2 值3 值4;上、右、下、左 長度單位,但%參照的是父元素的寬度 內邊距不能為負值
2.border 邊框線位於內邊距的外層，用於修飾元素外層邊框 border 樣式組合屬性: border-width: 邊框線寬度; (一般使用px) border-style: 邊框樣式;solid實線 dashed 虛線 dotted 點狀線 border-color: 色值; 邊框顏色
- 簡寫樣式 每個邊可以單邊設定以上三個屬性如：border - 四個邊的邊框相同:border:寬度 樣式; 顏色(省略 預設黑色) 下邊框：border-bottom:寬度 樣式 顏色; 上邊框：border-top：寬度 樣式 顏色; 左邊框: border-left：寬度 樣式 顏色; 右邊框: border-right：寬度 樣式 顏色;
- 常用的情況 元素的四個邊框線如:一個卡片,規格選項,啟用的圖或文字 下邊框線 如:分隔列表的專案,一行標題下 三角形
2.外邊距margin 外邊距位於外邊框外側 不在元素的範圍內 不會增加元素本身的大小 - 語法 四個方向 margin-top:上邊框 margin-right:右外邊距 margin-bottom:下外邊距 margin-left:左外邊距 - 簡寫方式：margin:一個值 代表四個方向 margin:值1 值2;上下、左右 margin:值1 值2 值3;上、左右、下 margin:值1 值2 值3 值4;上、右、下、左 值可以為負值，按照元素的座標 向下是top的正值 向上是top的正值 向左是top的正值 向右是top的正值 auto 屬性 margin:auto; 是讓已定義寬度的子元素在父級元素中水平的方式,auto只左右外邊距自適應父級元素寬度 margin:上下值 auto;常用用法
- 自帶外邊距的元素 body 8px的外邊距 ul p h1~h6 - 外邊距合併現象外邊距 前提，上下垂直的響鈴兄弟元素，當他們都有外邊距，上下重合時會發生合併 會取相對大的外邊距為兩個元素之間的距離 - 外邊距溢位現象 父元素的第一次和最後一個元素會有外邊距溢位情況 最後一個子元素的上邊距會和父元素的上外邊距發生重疊,導致父元素出現下外邊距而子元素無效 行內塊顯示的元素不會出現外邊距溢位(一般不會用行內塊佈局)
# 解決方案 - 給父級加，上內邊距，可以讓第一個元素和父元素上邊產生距離(常用) - 給父級元素加邊框線 讓兩個元素的邊上不重合，但實際需要邊框時可使用 - 利用BFC 給父級加,overflow:hidden/auto 觸發BFC,可以避免margin重疊問題,弊端超出父級的子元素會隱藏或出現拖拽條 - 在第一個子元素和父元素之間加一個<table></table>空標籤因table標籤的屬性可以是兩個元素之間產生距離(基本不用 會打亂佈局) - 利用偽元素模擬table出現讓兩個元素之間產生間隙 - .box::before{ content: ""; box前變成table 顯示 display: table;
# 下和右外邊距無效現象 - 當元素右外邊距導致自身發生位移只有左和上會讓當前元素髮生位移 - 下和右只能更讓當前元素和周圍的兄弟元素產生距離,當他旁邊沒有兄弟元素時,看上去無效,但盒子模型會體現
# 計算盒子模型 - 標準盒子模型 - 一個元素在頁面上佔據的位置,內聯元素上下內外邊距不生效 - 總體佔寬:左外邊距+左邊框+左內邊距+內容+右內邊框+右邊框+右外邊框 - 總共佔高:上外邊距+上邊框+上內框局+上內邊距+內容+下邊框+下外邊框 - 元素本身佔寬=左右邊框+左右內邊框+內容寬 - 元素本身的佔高=上下邊框+上下內邊距+內容高 box-sizing:content-box:指定元素為標準盒子模型的計算方式 box-sizing:border-box;指的是盒子的寬度就是content部分
# 怪異盒子模型 設定元素寬度和高度將被重新計算 設定寬度=邊框+內邊距+重新計算過的寬高 不會因為內邊距和邊框而放大元素 box-sizing:border-box;會將寬度重新計算後顯示 border-box;值指的是,盒子的寬度就是border以內的所有部分