css深入理解padding

2022-06-16 23:39:11 字數 1966 閱讀 1791

padding 中規中矩,性格溫婉平和!

css padding與容器的尺寸關係複雜

對於block水平元素 沒有padding的時候 .gay padding影響元素尺寸      (理解為人身體的脂肪,人和人之間的距離).gay

但是width:auto或box-sizing為border-box的時候 .gay

.text這個時候padding不會影響元素尺寸,但是當padding大小超過寬高的時候,.text這時候元素按內聯元素最小寬度顯示,此時padding同樣影響了元素的尺寸。

結論:對於block水平元素

1.padding值暴走,一定會影響尺寸;

2.width:auto,padding影響尺寸;

3.width為auto或box-sizing為border-box,同時padding值沒有暴走,不影響尺寸。

對於inline水平元素

水平padding影響尺寸,垂直padding不影響尺寸 .leader,但是會影響背景色(佔據空間)。大到比父元素還大的時候,設定overflow:auto會出現滾動條

如何利用這一特性

高度可控的分割線

1.直接使用字元:註冊|退出登入

2.inline-block控制:註冊|退出登入

3.使用inline padding:註冊|退出登入

註冊退出登入

span

1.關於padding的負值,padding不支援任何形式的負值。

2.關於百分比均是相對與寬度計算的。

如何實現這一特性,輕鬆實現乙個正方形 div:padding:50%(相對百分比計算)

真實案例

慕課網.container  .example實現乙個正方形的響應式布局。

3.inline水平元素的padding百分比值

1.同樣相對於寬度計算

2.預設的高度寬度細節有差異

3.padding會斷行

inline元素的padding斷行

span

內有文字若干

如果是空的inline元素,高度還是要比寬度高

設定fon-size:0px;得到乙個正方形。

為何會有額外的高度 

inline元素的的那個會讓「幽靈空白節點」顯現,也就是規範中的strut出現。content-area,可以通過font-size:0px;讓他不顯示。

1.ol/ul列表

1.1 ol/li元素內建padding-left,但是單位是px不是em;

1.2 例如chrome瀏覽器下是40px;

1.3 如果字型大小很小,間距就會很開;

1.4 如果字型大小很大,序號回爬到容器外面

margin等一般em的。

2.表單元素的內建padding值

所有的瀏覽器input/textarea輸入框內建padding

所有瀏覽器button按鈕內建padding

部分瀏覽器select下拉內建padding,如firefox ie8+可以設定padding

所有瀏覽器radio/checkbox單選框無內建padding

button按鈕元素的按鈕是最難控制的。

1.chrome瀏覽器是沒有問題的。

2.firefox瀏覽器  設定padding:0左右依然有padding! 需要設定button::-moz-focus-innerpadding才為0

3.ie瀏覽器 ie7文字越多,左右padding逐漸變寬。設定overflow:hidden以後就正常了。

4.padding與高度計算的不相容

button

讓button可見性隱藏。

實現3道槓——不借助偽元素,只用乙個div

實現示意

.line-tri

2.配合margin實現等高布局。

.box

.child-orange,.child-green

.auto{

padding-left:120px;

CSS深入理解學習筆記之padding

1 padding與容器尺寸之間的關係 對於block水平元素 padding值暴走,一定會影響尺寸 width非auto,padding影響尺寸 width為auto或box sizing為border box,同時padding值沒有暴走,不影響尺寸。對於inline水平元素 水平padding...

深入理解CSS背景

背景色background接受所有合法的顏色,還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent,如果乙個元素沒有指定的顏色,那麼背景就應當是透明的,這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...

深入理解CSS浮動

float 浮動 浮動元素脫離普通流,然後按照指定方向,向左或者向右移動,碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...