-
標(biāo)簽元素的內(nèi)置padding 1、ol/ul列表 i.ol/ul元素內(nèi)置padding-left，但是單位是px而不是em； ii.所以如果字號(hào)很小/很大，間距就會(huì)很開 （平時(shí)開發(fā)font-size:是12/14，padding-left:22/25px相對合適） 2、所有瀏覽器input/textarea輸入框內(nèi)置padding 3、所有瀏覽器botton按鈕內(nèi)置padding 4、所有瀏覽器radio/checkbox單復(fù)選框無內(nèi)置padding 5、button按鈕元素的padding最難控制! 在不同瀏覽器上使用不同的padding i.chrome瀏覽器 padding:0;即可以 ii.FireFox瀏覽器設(shè)置padding:0 左右依然有padding! 可以設(shè)置 button:-moz-focus-inner{padding:0;} iii.IE瀏覽器下 按鈕文字越多，左右padding逐漸變大 button{overflow:visible;} padding與高度計(jì)算的不兼容 button{ line-height:20px; padding:10px; border:none;} ?。。「玫氖抢?lt;label>標(biāo)簽?zāi)M按鈕，但是有時(shí)需要button提交，所以，利用<button>的可用性并可訪問性隱藏 <button id="btn"></button> <label for="btn">按鈕</label> label{ display:inline-block; line-height:20px; padding:1px; } #btn{ z-inde:-1;//藏在背景色之下 } 或者#btn{ absolute:-999em;//藏在屏幕之外}查看全部
-
1、padding不支持任何形式的負(fù)值 2、padding百分比相對于寬度計(jì)算 1。block元素實(shí)現(xiàn)移動(dòng)端屏幕題圖占一半 <div class="container"> <div class="example"> <h2>你的指尖...</h2> <h3>慕課網(wǎng)...</h3> </div> </div> .container { padding:50%; background: url(exp.jpg); background-size: 100%; position:relatvie; } .example { position:absolute; top:0; right:0; bottom:0; left:0; } 3、inline水平元素的padding百分比值 .同樣相對于寬度計(jì)算 。默認(rèn)的高度寬度細(xì)節(jié)有差異 。padding會(huì)斷行 inline就算是空白元素，padding高和寬也不想等 是因?yàn)椋篿nline元素的垂直padding會(huì)讓“幽靈空白節(jié)點(diǎn)”顯現(xiàn)，也就是規(guī)范中的"strut"出現(xiàn)。查看全部
-
padding會(huì)不會(huì)影響元素尺寸？ 對于block水平元素 1、padding值大到一定境界，一定會(huì)影響尺寸； 2、width非auto，padding值會(huì)影響尺寸； 3、width為auto或box-sizing為border-box，同時(shí)padding值沒有特別的大，不影響尺寸。 對于inline水平元素 水平padding會(huì)影響尺寸，垂直padding不影響尺寸，但是會(huì)影響背景色(占據(jù)空間會(huì)變大)； 利用這一特性 可以實(shí)現(xiàn)高度可控的分割線，使用行內(nèi)元素和padding實(shí)現(xiàn)右邊效果：注冊 | 退出登錄 注冊<span></span>登錄 span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }查看全部
-
padding圖形繪制： padding值結(jié)合背景顏色background，和背景繪制區(qū)域background-clip來實(shí)現(xiàn) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding圖形繪制</title> <style type="text/css"> .line-tri{ width:150px; height:30px; padding: 15px 0; border-top: 30px solid; border-bottom: 30px solid; background-color: mediumpurple; background-clip: content-box; } .eye{ width: 150px; height: 150px; border:1px solid; border-radius: 50%; background-color: mediumpurple; padding: 20px; background-clip: content-box; } </style> </head> <body> <div class="line-tri"> </div> <div class="eye"> </div> </body> </html>查看全部
-
background-clip:背景的繪制區(qū)域查看全部
-
botton表單padding兼容方法查看全部
-
平時(shí)網(wǎng)頁開發(fā)文字大小一般是12-14像素 padding在網(wǎng)頁中設(shè)置22-25px較為合適 基本能實(shí)現(xiàn)序號(hào)和文字左對齊查看全部
-
ol/li元素內(nèi)置padding-left，單位是px查看全部
-
padding百分比，都是相對于父元素寬度來計(jì)算。 塊元素：padding：50%實(shí)現(xiàn)正方形 內(nèi)聯(lián)元素：1.默認(rèn)的高度寬度細(xì)節(jié)有差異，2.padding會(huì)斷行查看全部
-
padding實(shí)現(xiàn)自適應(yīng)效果 img{ float:left; } .auto{ padding-left:120px; } <div> <img src="mm.jpg"> <div class="auto"> </div>查看全部
-
1.ol/li元素內(nèi)置padding-left,但是單位是px不是em; 2.平時(shí)網(wǎng)頁開發(fā)文字大小一般是12-14像素 padding在網(wǎng)頁中設(shè)置22-25px較為合適 基本能實(shí)現(xiàn)序號(hào)和文字左對齊查看全部
-
水平padding影響尺寸，垂直的padding不影響尺寸，但是會(huì)影響背景色（占據(jù)空間） 制作高度可控的分隔線 1.直接使用字符2.inline-block控制3.使用Inline padding span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid;font-size:0;}查看全部
-
高度可控的分割線查看全部
-
會(huì)影響背景色查看全部
-
block元素： 1.padding值暴走，一定影響元素尺寸 2.width非auto，padding影響元素尺寸 3.width為auto或box-sizing為border-box，同時(shí)padding值沒有抱走，不影響尺寸。 inline水平元素： 水平padding影響尺寸，垂直padding不影響尺寸查看全部
舉報(bào)
0/150
提交
取消