深入了解css padding

2022-08-11 08:45:14 字數 2249 閱讀 5405

目錄關係總結

對於inline內聯水平元素

padding負值和百分比值

css 標籤元素的內建padding

padding與圖形繪製

padding與布局

給元素新增padding值之後,對應的元素寬高會被撐大,就是padding值添加在元素原有的寬高之上

如果想保證盒子原本的寬高大小,就得減去新增的padding值和border值

在w3c的標準盒模型下,padding一般是給外面的大盒子或者父元素新增的,內填充,新增之後做減法

給加padding實現1px畫素的邊框

複雜關係

影響元素尺寸

不影響元素尺寸

最小寬度顯示

關係總結

複雜關係

水平padding影響尺寸

垂直padding影響背景色區域

padding不支援任何形式的負值

padding的百分比均是相對於寬度計算的

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

同樣是相對於寬度計算的

預設的高度寬度細節有差異,block水平元素的高寬是一樣的

padding會斷行,padding的背景色也會換行

空inline元素+padding高寬也不相等

空inline元素+padding+font-size為0,高寬就相等

額外高度產生的原因

inline元素的垂直padding會讓"幽靈空白節點"顯現,也就是規範中的"struct"出現

幽靈空白節點本質上是內聯元素文字的content-area區域,content-area區域只受fon-size大小的影響,可以通過font-size為0,讓其看不見

參考解答:

ol/ul列表的內建padding-left值

特例:元素很多內建的一些padding值,或者margin值,尤其是margin值,基本上是以em為單位,也就是說是相對於文字本身大小的,但是ol/li內建的padding-left,單位是以px為大小的,而不是em。使用固定的px padding-left,會有對齊的問題。

例如chrome瀏覽器下預設px

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

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

經驗:在開發的過程中使用的字型一般是12px14x,此時padding-left為22px25px是最合適的,可基本上實現下面的內容和上面的列表序號左對齊。如果字型較大,padding-left設定大一點,即可對齊

表單元素的內建padding值

button表單按鈕padding

![image-20200704005538354](筆記截圖/ button表單按鈕padding.png)

原生button

border-style:double可以畫三道槓,這個也可以。

padding在容器上

padding在子元素上

深入了解A

一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹,如果你還對a 演算法不清楚的話,請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式,使用這個源程式時,應該遵守一定的公約。二 a ...

深入了解A

一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹,如果你還對a 演算法不清楚的話,請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式,使用這個源程式時,應該遵守一定的公約。二 a ...

深入了解Dojo Data

譯自http www.sitepen.com blog 2010 10 13 dive into dojo data 使用dojo data有助於快速建立web應用的介面,且易於嵌入各種資料來源。它在使用者介面與底層資料之間提供了一層抽象層,使得使用者介面開發人員能夠專注於ui的開發,而無需擔心資料...