-
padding與block水平元素查看全部
-
padding實現(xiàn)兩欄自適應(yīng)： <div> <img src="xx.jpg"> <div class="atuo">本例子實現(xiàn)...</div> </div> img{ float：left; } .auto{padding-left:120px;}查看全部
-
padding配合margin實現(xiàn)等高布局: .box{overflow:hidden; resize:vertical}; .child-orange, .child-green{margin-bottom:-600px;padding-bottom:600px;} .child-orange{float:left; background:orange;} .child-gteen{float:left; background:green;}查看全部
-
移動端1:1頭圖布局 div{ padding:50%;}查看全部
-
使用一個div實現(xiàn)“白眼”點(diǎn)擊效果： <div class = "eye"></div> .eye{ width:150px; height:150px; padding:10px; border 10px solid; border-radius:50%; background-color:currentColor; background-clip:content-box; }查看全部
-
使用padding繪制三道杠： <div class="line-tri"></div> .line-tri{ width:150px; height:30px; padding:15px 0; border-top:30px solid; border-bottom:30px solid; background-color:currentColor; background-clip:content-box; }查看全部
-
使用label標(biāo)簽制作一個原生的button按鈕： 還要注意HTML樣式必須寫為：<label for='btn'>按鈕</label> label{ display：inline-block; line-height:20px; padding:10px; }查看全部
-
一般網(wǎng)頁設(shè)計字體大小為：14px 16px 設(shè)置padding22-25是最合適的！可以實現(xiàn)序列號左對齊查看全部
-
inline元素的padding會出現(xiàn)斷行！查看全部
-
padding的百分比值特性是相對于寬度進(jìn)行計算： .container{ padding：50%； background：URL（xx.jpg）; position:relative; } .example{ position：absolute； top:0; right:0; bottom:0; left:0; } HTML結(jié)構(gòu): <div class="container"> <div class ="example"> ..... </div> </div>查看全部
-
高度可控的分割線: span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }查看全部
-
inline水平元素，垂直使用padding不會影響尺寸，但會影響背景（占據(jù)空間）查看全部
-
對于塊級元素的影響： 1、padding的值過大時，一定會影響自身的尺寸； 2、width非auto,padding影響尺寸； 3、width為auto或box-sizing為border-box，同時padding不會影響本身的尺寸；查看全部
-
對于block水平元素: width:auto或box-sizing為border-box的時候，外圍的寬度沒有發(fā)生影響，僅僅只是內(nèi)容發(fā)生變化： .gay{ width:80cm; box-sizing：border-box； padding：0 15cm; }查看全部
-
padding與布局 1、使用百分比單位構(gòu)建固定比例布局結(jié)構(gòu) 2、配合margin實現(xiàn)等高布局 3、實現(xiàn)兩欄自適應(yīng)布局 padding在容器上 <div class="pbox"> <img src="abc.jpg>本例子實現(xiàn)的是，圖片寬度固定，然后后面的文字自適應(yīng)的效果。原理如下：容器有個固定的padding-lfet值，此時圖文應(yīng)該在120px處顯示，但是，由于圖片margin負(fù)值浮動（或者絕對定位）到容器左上角，因此，文字... </div> .pbox{ padding-left:120px;//圖文距離容器邊緣120px處顯示 } .pbox img{ float:left;//讓文字浮動，所以不占據(jù)空間; margin-left:-120px;//圖片與文字之間的距離 } padding在子元素上 <div> <img src="abc.jpg"> <div class="auto">本例子實現(xiàn)的是，圖片寬度固定，然后后面文字信息自適應(yīng)的效果。原理如下:兩欄元素均有自己的標(biāo)簽，其中文字欄有個固定的padding-left值，此時文字應(yīng)該在距離容器120像素處顯示，但是，由于圖片浮動，不在流中，所以文字。。。</div> </div> img{ float:left;//破壞了容器 } .auto{ padding-left:120px;//設(shè)置padding值，使其距離容器邊緣120px顯示； }查看全部
舉報
0/150
提交
取消