1、padding與容器尺寸之間的關係
對於block水平元素:①padding值暴走,一定會影響尺寸;②width非auto,padding影響尺寸;③width為auto或box-sizing為border-box,同時padding值沒有暴走,不影響尺寸。
對於inline水平元素:水平padding影響尺寸,垂直padding不影響尺寸,但是影響背景色。當垂直padding大到超出父容器,會影響scrollheight。
2、padding負值和百分比值
關於padding負值:padding不支援任何形式的負值。
關於padding百分比值:padding百分比均是相對於寬度計算的。
inline水平元素的padding百分比值:①同樣相對於寬度計算;②預設的高度寬度細節有差異;③padding會斷行。
3、標籤元素的內建padding
ol/ul列表:ol/li元素內建padding-left,但是單位是px不是em,例如chrome瀏覽器下是40px,所以字型大小很小間距就會很大,字型大小很大序號就會爬出容器。小經驗:文字大小為12-14px時,padding-left取值22-25px會比較合適。
其他元素:①所有瀏覽器input/textarea輸入框內建padding;②所有瀏覽器button按鈕內建padding;③部分瀏覽器select下拉內建padding,如firfox ie8+可以設定padding;④所有瀏覽器radio/checkbox單核取方塊無內建padding;⑤button按鈕元素的padding最難控制。
button表單按鈕padding:
正因為如此,我們在做按鈕的時候多用標籤去模擬按鈕
4、padding與圖形繪製
5、padding與布局
使用百分比單位構建固定比例布局結構:
配合margin等高布局:
兩欄自適應布局:
學習筆記 CSS深入理解之float
張鑫旭的css深入理解之float浮動學習筆記float為產生文字環繞效果而生 包裹 即產生乙個bfc 破壞 使父容器塌陷,元素脫離文件流,產生inline boxes環繞 方式一 使用clear,類似於產生乙個連線索道,使前文和後文關聯,會產生margin重疊效果。方式二 父容器bfc或者hasl...
學習筆記 CSS深入理解之margin
張鑫旭的css深入理解之margin學習筆記前提 只應用於block元素 不考慮writing mode的情況下,只發生在垂直方向 場景 兄弟元素發生重疊 父元素和第乙個 最後乙個子元素發生重疊 margin bottom重疊 最後乙個子元素設定margin bottom相對于父元素設定margin...
CSS深入理解學習筆記之relative
1 relative和absolute的相煎關係 限制作用 限制left top right bottom定位 限制z index層級 限制在overflow下的囂張氣焰。relative和fixed限制作用 限制z index層級。2 relative和定位 特性 相對自行進行定位 無侵入,不影響...