盒子模型
-
頁面布局的三大核心，盒子模型，浮動和定位
-
網頁布局程序
- 先準備好相關網頁元素，網頁元素基本都是盒子Box
- 利用CSS設定好盒子樣式，然后放到相應位置
- 往盒子里面裝內容
-
盒子模型的組成
-
所謂盒子模型：就是把HTML頁面中的布局元素看做是一個矩形的盒子，也就是 一個盛裝內容的容器，CSS盒子包括：邊框、外邊距、內邊距、和實際內容
-
border：邊框
-
組成：邊框寬度、邊框樣式 、邊框顏色
-
border：border-width|border-style|border-color-
屬性 作用 border-with 定義邊框粗細，單位是px border-style 邊框樣式：solid：實線邊框、dashed：虛線邊框、dotted：點線邊框 border-color 邊框顏色
-
-
邊框簡寫
-
border：1px solid red； #沒有順序
-
-
表格邊框的粗細
-
border-collapse：collapse； -
collapse：合并
-
border-collapse：collapse；表示相鄰邊框并在一起
-
【注意】
- 邊框會額外增加盒子的實際 大小，兩種解決方案
- 測量盒子大小的時候不量邊框
- 如果測量的時候包含了邊框，則需要width\height減去邊框寬度
- 邊框會額外增加盒子的實際 大小，兩種解決方案
-
-
content：內容
-
padding：內邊距
-
用于設定內邊距，即邊框與內容之間的距離
-
屬性 作用 padding-left 左內邊距 padding-right 右內邊距 padding-top 上內邊距 padding-bottom 下內邊距
-
-
簡寫
-
值的個數 表達的意思 padding：5px； 1個值，代表上下左右都有5像素內邊距 padding：5px 10px； 2個值，代表上下5像素，左右10像素內邊距 padding：5px 10px 20px； 3個值，代表上5像素，左右10像素內邊距，下內邊距20像素 padding：5px 10px 20px 30px； 3個值，代表上5像素，左10像素右20像素內邊距，下內邊距30像素
-
-
【注意】
- 內容和邊框有了距離，添加了內邊距
- padding影響了盒子的實際大小
-
-
margin：外邊距
-
用于設定外邊距，即控制盒子與盒子之間的距離
-
屬性 作用 margin-left 左外邊距 margin-right 右外邊距 margin-bottom 下外邊距 margin-top 上外邊距
-
-
外邊距的典型應用：外邊距可以讓塊級盒子水平居中，但需要滿足兩個條件
- 盒子必須指定寬度（width）
- 盒子左右的外邊距都設定為auto
-
外邊距合并
- 相鄰塊元素垂直外邊距的合并
- 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，去兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并
- 解決方案
- 盡量只給一個盒子添加外邊距
- 嵌套塊元素垂直外邊距的塌陷
- 對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值
- 解決方案
- 可以為父元素定義上邊框
- 可以為父元素定義上內邊距
- 可以為父元素添加overflow：hidden；
- 相鄰塊元素垂直外邊距的合并
-
清除內外邊距
-
網頁元素很多都帶有默認的內外邊距，而且不同的瀏覽器默認的也不一致，因此我們在布局前，首先要清除網頁元素的內外邊距
-
*{ padding：0； margin：0； } -
【注意】行內元素為照顧兼容性，盡量只設定左右內外邊距，不要設定上下內外邊距，但是轉換為快級和行內塊元素就可以了
-
-
-
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109886.html
標籤：Html/Css