padding詳解

tomener 發布于2019-08-29 12:27 / 1414人閱讀

padding屬性指定了盒的padding區的寬度。"padding"簡寫屬性一次性設置四周的padding，而其它padding屬性只設置它們各側的

padding與元素的尺寸

padding與block和inline元素尺寸

最后一個例子是用padding實現高度可控的分隔線

padding與百分比值

padding百分比值與block元素

padding百分比值與inline元素

在inline元素中,padding:50%產生的不是一個正方形,原因是根據CSS規范,inline元素的垂直padding會讓strut出現,strut本質上是一個inline文本,出現在content area區域,為了消除它,要使用font-size:0

標簽元素的內置padding ol/ul列表的內置padding

ol/li元素內置padding-left，但是單位是px不是em；

Chrome瀏覽器下是40px；

所以如果字號很小，間距就會很開；字號很大，序號會爬到容器外面

開發過程中為使序號與其他內容對齊，文字大小12px或14px，padding-left為22px至25px

表單元素的內置padding

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

所有瀏覽器button按鈕內置padding

部分瀏覽器select下拉內置padding，如FireFox IE8+可以內置padding

所有瀏覽器radio/chexkbox單復選框無內置padding

button在各大瀏覽器中去除空隙

button在不同瀏覽器中高度不同現象及解決方案

我們使用button以及label標簽,將button使用絕對定位或者z-index隱藏,然后讓label標簽for="btnid"指向button的id

padding與圖形繪制

三道杠以及眼睛效果

對于三道杠效果來說,透明區域是padding實現的,第一道杠使用border-top,第三道杠使用border-bottom,第二道杠使用background-color:currentColor,為了控制第二道杠不覆蓋padding背景色,使用CSS3屬性background-clip:content-box

第二個例子同上

padding與布局

移動端1:1頭圖布局

div{padding:50%;}

配合margin實現等高布局

等高布局

兩欄自適應布局

分別在容器上和子元素的兩欄自適應布局

GPU云服務器云服務器 Pad padding padding屬性大屏 pad 交互控制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111914.html

border-sizing屬性詳解和應用

摘要：用于更改用于計算元素寬度和高度的默認的盒子模型。它有和三種取值。和屬性包括內容，內邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據項目中的使用經驗和的建議，推薦將屬性設置為。個人網站原文鏈接屬性詳解和應用 box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...

Batkid 2019-04-23 13:30 評論0 收藏0
詳解css盒模型與外邊距重疊

摘要：如圖所示代表，代表，代表。以上例子中，和之間的折疊產生的，是個相鄰折疊的結果。將其值分為兩組正值，，負值，，根據有正有負時的計算規則，正值的最大值為，負值中絕對值最大的是，所以，最終折疊后的應該是。盒模型的構成之前寫了一篇關于如何解決css的外邊距重疊問題,可是后來發現,我有些本末倒置了,對于一個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下c...

roundstones 2019-08-29 13:18 評論0 收藏0
詳解css中的display屬性（行內元素和塊級元素）

摘要：在中，和就是典型的行內元素元素。內聯元素不單獨占一行，給他設置寬高是沒有用的。在中和就是塊級元素。此元素會根據上下文作為塊級元素或內聯元素顯示。此元素會作為塊級表格來顯示類似，表格前后帶有換行符。 display屬性首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。默認值：inline 我們常用的display屬性值...

figofuture 2019-08-28 17:58 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

RobinQu 2019-08-02 13:55 評論0 收藏0