亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

padding詳解

tomener / 1483人閱讀 

padding屬性指定了盒的padding區(qū)的寬度。"padding"簡(jiǎn)寫(xiě)屬性一次性設(shè)置四周的padding，而其它padding屬性只設(shè)置它們各側(cè)的
padding與元素的尺寸

padding與block和inline元素尺寸

最后一個(gè)例子是用padding實(shí)現(xiàn)高度可控的分隔線(xiàn)

padding與百分比值

padding百分比值與block元素

padding百分比值與inline元素

在inline元素中,padding:50%產(chǎn)生的不是一個(gè)正方形,原因是根據(jù)CSS規(guī)范,inline元素的垂直padding會(huì)讓strut出現(xiàn),strut本質(zhì)上是一個(gè)inline文本,出現(xiàn)在content area區(qū)域,為了消除它,要使用font-size:0

標(biāo)簽元素的內(nèi)置padding ol/ul列表的內(nèi)置padding

ol/li元素內(nèi)置padding-left，但是單位是px不是em；

Chrome瀏覽器下是40px；

所以如果字號(hào)很小，間距就會(huì)很開(kāi)；字號(hào)很大，序號(hào)會(huì)爬到容器外面

開(kāi)發(fā)過(guò)程中為使序號(hào)與其他內(nèi)容對(duì)齊，文字大小12px或14px，padding-left為22px至25px

表單元素的內(nèi)置padding

所有瀏覽器input/textarea輸入框內(nèi)置padding

所有瀏覽器button按鈕內(nèi)置padding

部分瀏覽器select下拉內(nèi)置padding，如FireFox IE8+可以?xún)?nèi)置padding

所有瀏覽器radio/chexkbox單復(fù)選框無(wú)內(nèi)置padding

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

button在不同瀏覽器中高度不同現(xiàn)象及解決方案

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

padding與圖形繪制

三道杠以及眼睛效果

對(duì)于三道杠效果來(lái)說(shuō),透明區(qū)域是padding實(shí)現(xiàn)的,第一道杠使用border-top,第三道杠使用border-bottom,第二道杠使用background-color:currentColor,為了控制第二道杠不覆蓋padding背景色,使用CSS3屬性background-clip:content-box

第二個(gè)例子同上

padding與布局

移動(dòng)端1:1頭圖布局

div{padding:50%;}

配合margin實(shí)現(xiàn)等高布局

等高布局

兩欄自適應(yīng)布局

分別在容器上和子元素的兩欄自適應(yīng)布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111914.html

相關(guān)文章

  • border-sizing屬性詳解和應(yīng)用

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

    Batkid 評(píng)論0 收藏0

  • 詳解css盒模型與外邊距重疊

    摘要：如圖所示代表，代表，代表。以上例子中，和之間的折疊產(chǎn)生的，是個(gè)相鄰折疊的結(jié)果。將其值分為兩組正值，，負(fù)值，，根據(jù)有正有負(fù)時(shí)的計(jì)算規(guī)則，正值的最大值為，負(fù)值中絕對(duì)值最大的是，所以，最終折疊后的應(yīng)該是。 盒模型的構(gòu)成 之前寫(xiě)了一篇關(guān)于如何解決css的外邊距重疊問(wèn)題,可是后來(lái)發(fā)現(xiàn),我有些本末倒置了,對(duì)于一個(gè)問(wèn)題的正確的處理流程就應(yīng)該是先發(fā)現(xiàn)問(wèn)題,分析問(wèn)題,解決問(wèn)題,所以我在這篇文章中就對(duì)下c...

    roundstones 評(píng)論0 收藏0

  • 詳解css中的display屬性（行內(nèi)元素和塊級(jí)元素）

    摘要：在中，和就是典型的行內(nèi)元素元素。內(nèi)聯(lián)元素不單獨(dú)占一行，給他設(shè)置寬高是沒(méi)有用的。在中和就是塊級(jí)元素。此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。此元素會(huì)作為塊級(jí)表格來(lái)顯示類(lèi)似，表格前后帶有換行符。 display屬性 首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。默認(rèn)值：inline 我們常用的display屬性值...

    figofuture 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可以對(duì)比兩種實(shí)現(xiàn)方式...

    RobinQu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tomener

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<