【學習筆記】CSS深入理解之padding

learn_shifeng 發布于2019-08-30 15:54 / 2535人閱讀

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據空間會顯示背景色負值與百分比單位不支持負值百分比相對于自身寬

張鑫旭的CSS深入理解之padding學習筆記

padding與容器的尺寸

block元素

padding值過大，一定影響元素尺寸

width為定值，padding會影響元素尺寸

width為auto或者box-sizing為border-box，同時padding值沒有暴走，不影響元素尺寸

inline元素：水平padding影響尺寸，垂直padding不影響尺寸，但是會影響占據空間（會顯示背景色）

padding負值與百分比單位

padding不支持負值

padding百分比相對于自身寬度計算

inline元素的padding有斷行效果

空的inline元素padding高寬不相等，因為inline的垂直padding會讓隱匿文本節點出現

標簽元素的內置padding

ol/ul

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

間距固定，字號過小顯得間距過大，字號過大會溢出容器

radio/checkbox

無法設置padding

button

FireFox下清空按鈕padding

button::-moz-focus-inner {
    padding: 0; 
}

FireFox下按鈕高度計算問題，導致不兼容問題，所以一般使用自定義按鈕

GPU云服務器云服務器深入理解webrtc之aec 如何深入理解深度學習深入理解系列深入理解linux

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

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

【學習筆記】CSS深入理解之margin

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...

stefan 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之overflow

摘要：張鑫旭的深入理解之學習筆記基本屬性屬性介紹默認當與值相同時，等同于當與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應方位的尺寸限制拉伸對于單元格等需要為狀態才可以與滾動條頁面默認滾動條來自與無《張鑫旭的CSS深入理解之overflow》學習筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認)|hidd...

Ali_ 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之vertical-align

摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設置為，即這個的高度為，位置處于中間。 vertical-align的值線類：baseline（默認）, top, bottom, middle 文字類：text-top, text-bottom 上標下標類：sub, super 數值：1px, 1em - 在baseline對齊的基礎上上下偏移一定數值百分...

ermaoL 2019-08-30 15:54 評論0 收藏0
CSS 深入理解之 border 【筆記】

摘要：本文是對慕課網張鑫旭的課程深入理解之的學習筆記，并結合了一些個人理解。本文是對慕課網張鑫旭的課程《CSS 深入理解之 border》的學習筆記，并結合了一些個人理解。 border-width 不支持百分比 border-width 不支持百分比單位，原因如下：在實際設計中，邊框一般是固定大小的，不會隨著盒子寬度的增加而增加 margin 和 padding 為百分比單位時，...

william 2019-08-30 15:52 評論0 收藏0
【學習筆記】CSS深入理解之border

摘要：張鑫旭的深入理解之學習筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。可以利用該特性實現圖標變色的效果與定位不計算區域，只限于以內的盒子。張鑫旭的CSS深入理解之border學習筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。因此從語義上來說，...

he_xd 2019-08-30 15:54 評論0 收藏0