CSS盒子模型
HTML每個元素都可以看做為一個盒子
具備四個屬性
? 內(nèi)容（content）
- 元素的內(nèi)容width/height
? 內(nèi)邊距（padding）
- 素和內(nèi)容之間的間距
? 邊框（border）
- 元素自己的邊框
? 外邊距（margin）
- 元素和其他元素之間的間距
? 因為盒子有四邊, 所以margin/padding/border都包括top/right/bottom/left四個邊:
內(nèi)容 - 寬度和高度
? 設置內(nèi)容是通過寬度和高度設置的:
- 寬度設置: width
- 高度設置: height
? 注意: 對于行內(nèi)級非替換元素來說, 設置寬高是無效的!
另外還可以設置如下屬性:
- min-width: 最小寬度
- max-width: 最大寬度
- 移動端適配時,可以設置最大寬度和最小寬度
下面兩個不太常用:
- min-height: 最小高度
- max-height: 最大高度
內(nèi)邊距 - padding
? padding屬性用于設置盒子的內(nèi)邊距, 通常用于設置邊框和內(nèi)容之間的間距;
? padding包括四個方向, 所以有如下的取值:
- padding-top：上內(nèi)邊距
- padding-right：右內(nèi)邊距
- padding-bottom：下內(nèi)邊距
- padding-left：左內(nèi)邊距
? padding單獨編寫是一個縮寫屬性：
-
padding-top、padding-right、padding-bottom、padding-left的簡寫屬性 - padding縮寫屬性是
從零點鐘方向開始, 沿著順時針轉動的, 也就是上右下左;
? padding并非必須是四個值, 也可以有其他值;
padding的其他值
邊框 border
- 邊框寬度
border-top-width、border-right-width、border-bottom-width、border-left-width-
border-width是上面4個屬性的簡寫屬性
- 邊框顏色
border-top-color、border-right-color、border-bottom-color、border-left-color-
border-color是上面4個屬性的簡寫屬性
- 邊框樣式
border-top-style、border-right-style、border-bottom-style、border-left-style-
border-style是上面4個屬性的簡寫屬性
邊框樣式的取值
- groove：凹槽, 溝槽, 邊框看上去好象是雕刻在畫布之內(nèi)
- ridge：山脊, 和grove相反，邊框看上去好象是從畫布中凸出來
同時設置的方式
-
如果我們相對某一邊同時設置 寬度 樣式 顏色 , 可以進行如下設置 :
- border top
- border right
- border bottom
- border left
- border ：統(tǒng)一設置 4 個方向的邊框
邊框顏色、寬度、樣式的編寫順序任意
圓角 – border-radius
這四個屬性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom,left-radius 簡寫為一個屬性。
? border-radius常見的值:
- 數(shù)值: 通常用來設置小的圓角, 比如6px;
- 百分比: 通常用來設置一定的弧度或者圓形;
外邊距 - margin
? margin屬性用于設置盒子的外邊距, 通常用于元素和元素之間的間距;
? margin包括四個方向, 所以有如下的取值:
-
margin-top：上內(nèi)邊距 -
margin-right：右內(nèi)邊距 -
margin-bottom：下內(nèi)邊距 -
margin-left：左內(nèi)邊距
? margin單獨編寫是一個縮寫屬性：
-
margin-top、margin-right、margin-bottom、margin-left的簡寫屬性 - margin縮寫屬性是
從零點鐘方向開始, 沿著順時針轉動的, 也就是上右下左;
? margin也并非必須是四個值, 也可以有其他值;
margin的其他值
上下margin的傳遞
? margin-top傳遞
- 如果
塊級元素的頂部線和父元素的頂部線重疊，那么這個塊級元素的margin-top值會傳遞給父元素
? margin-bottom傳遞
- 如果
塊級元素的底部線和父元素的底部線重寫，并且父元素的高度是auto，那么這個塊級元素的margin-bottom值會傳遞給父元素
? 如何防止出現(xiàn)傳遞問題？
- 給父元素設置padding-top\padding-bottom
- 給父元素設置border
- 觸發(fā)BFC: 設置overflow為auto
? 建議
- margin一般是用來設置兄弟元素之間的間距
- padding一般是用來設置父子元素之間的間距
上下margin的折疊
? 垂直方向上相鄰的2個margin（margin-top、margin-bottom）有可能會合并為1個margin，這種現(xiàn)象叫做collapse（折疊）
? 水平方向上的margin（margin-left、margin-right）永遠不會collapse
? 折疊后最終值的計算規(guī)則
- 兩個值進行比較，取較大的值
? 如何防止margin collapse？
- 只設置其中一個元素的margin
上下margin折疊的情況
? 兩個兄弟塊級元素之間上下margin的折疊
? 父子塊級元素之間margin的折疊
外輪廓 - outline
? outline表示元素的外輪廓
不占用空間- 默認
顯示在border的外面
? outline相關屬性有
-
outline-width: 外輪廓的寬度 -
outline-style：取值跟border的樣式一樣，比如solid、dotted等 -
outline-color: 外輪廓的顏色 -
outline：outline-width、outline-style、outline-color的簡寫屬性，跟border用法類似
? 應用實例
- 去除a元素、input元素的focus輪廓效果
盒子陰影 - box-shadow
- box-shadow屬性可以設置一個或者多個陰影
- 每個陰影用表示
- 多個陰影之間用逗號,隔開，從前到后疊加
? shadow的常見格式如下
- 第1個<length>：
offset-x, 水平方向的偏移，正數(shù)往右偏移 - 第2個<length>：
offset-y, 垂直方向的偏移，正數(shù)往下偏移 - 第3個<length>：
blur-radius, 模糊半徑 - 第4個<length>：
spread-radius, 延伸半徑 - <color>：陰影的顏色，如果沒有設置，就跟隨color屬性的顏色
- inset：
外框陰影變成內(nèi)框陰影
盒子陰影
在線測試陰影效果
https://html-css-js.com/css/generator/box-shadow/
文字陰影 - text-shadow
? text-shadow用法類似于box-shadow，用于給文字添加陰影效果
? shadow的常見格式如下
- 相當于box-shadow, 它沒有spread-radius的值;
? 我們可以通過一個網(wǎng)站測試文字的陰影:
https://html-css-js.com/css/generator/box-shadow
行內(nèi)非替換元素的注意事項
? 以下屬性對行內(nèi)級非替換元素不起作用
- width、height、margin-top、margin-bottom
? 以下屬性對行內(nèi)級非替換元素的效果比較特殊
- padding-top、padding-bottom、上下方向的border
CSS屬性 - box-sizing
? box-sizing用來設置盒子模型中寬高的行為
? content-box
- padding、border都布置在width、height外邊
? border-box
- padding、border都布置在width、height里邊
box-sizing: content-box
? 元素的實際占用寬度 = border + padding + width
? 元素的實際占用高度 = border + padding + height
box-sizing: border-box
? 元素的實際占用寬度 = width
? 元素的實際占用高度 = height
IE盒子模型
元素的水平居中方案
? 在一些需求中，需要元素在父元素中水平居中顯示（父元素一般都是塊級元素、inline-block）
? 行內(nèi)級元素(包括inline-block元素)
- 水平居中：在父元素中設置
text-align: center
? 塊級元素
- 水平居中：
margin: 0 auto
