-
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顯示； }查看全部
-
標(biāo)簽元素的內(nèi)置padding 1、ol/ul列表 i.ol/ul元素內(nèi)置padding-left，但是單位是px而不是em； ii.所以如果字號很小/很大，間距就會很開 （平時開發(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與高度計算的不兼容 button{ line-height:20px; padding:10px; border:none;} ?。?！更好的是利用<label>標(biāo)簽?zāi)M按鈕，但是有時需要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百分比相對于寬度計算 1。block元素實現(xiàn)移動端屏幕題圖占一半 <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百分比值 .同樣相對于寬度計算 。默認(rèn)的高度寬度細(xì)節(jié)有差異 。padding會斷行 inline就算是空白元素，padding高和寬也不想等 是因為：inline元素的垂直padding會讓“幽靈空白節(jié)點”顯現(xiàn)，也就是規(guī)范中的"strut"出現(xiàn)。查看全部
-
對于inline水平元素 垂直padding不影響尺寸，水平padding會影響尺寸，但是會影響背景色(占據(jù)空間會變大)； 利用這一特性 可以實現(xiàn)高度可控的分割線 使用inline padding:注冊 | 退出登錄 注冊<span></span>登錄 span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }查看全部
-
padding會不會影響元素尺寸？ 對于block水平元素 1、padding值大到一定境界，一定會影響尺寸； 2、width非auto，padding值會影響尺寸； 3、width為auto或box-sizing為border-box，同時padding值沒有特別的大，不影響尺寸。查看全部
-
1.padding若用百分比設(shè)定為50%時,在塊級元素中,元素會變?yōu)檎叫? 在行內(nèi)元素中 2.查看全部
-
padding與布局： 3、兩欄自適應(yīng)布局——在子元素上，和另個子元素并列查看全部
-
padding與布局： 3、兩欄自適應(yīng)布局——在容器上查看全部
-
padding與布局： 2、配合marign等高布局 關(guān)鍵代碼：margin-bottom:-600px;padding-bottom:600px;查看全部
-
padding與布局： 1、使用百分比單位構(gòu)建固定比例布局結(jié)構(gòu)查看全部
-
padding與圖形繪制——中心查看全部
-
padding與圖形繪制——三道杠查看全部
-
CSS標(biāo)簽元素的內(nèi)置padding值： 表單元素的內(nèi)置padding值： 1、所有的瀏覽器input/textarea輸入框內(nèi)置padding 2、所有的瀏覽器button按鈕內(nèi)置padding 3、部分瀏覽器select下拉內(nèi)置padding，如：FireFox、IE8 可以設(shè)置 4、所有radio/chexkbox單復(fù)選框無內(nèi)置padding 5、button的padding極難控制 1）Chrome瀏覽器設(shè)置padding：0時左右沒有padding 2）FireFox瀏覽器設(shè)置padding：0時左右依然有padding，解決方法如下： button::-moz-focus-inner{padding:0;} 3)IE瀏覽器：IE7文字越多，左右padding逐漸變大，解決方案如下： button{overflow:visible;} 4)padding和高度計算不兼容，例子如下： button{line-line-height:20px;padding10px;border:none;} IE7:45px;IE8+:40px;FireFox:42px;Chrome:40px; 解決方案： <button id="btn"><label for="btn">按鈕</lable></button> label{display:inline-block; line-height:20px;padding:10px;}查看全部
-
標(biāo)簽元素的內(nèi)置padding值： ol/ul： 1、ol/li元素內(nèi)置padding-left，但是單位是px不是em； 2、字號很小，間距就會很開；字號很大，序號會爬到容器外面； 3、12-14px大小文字配padding-left值22-24px差不多，會對齊的比較好.查看全部
-
padding負(fù)值和百分比值： 1、塊級元素可以輕松實現(xiàn)一個正方形——div{padding:50%}; 2、inline水平元素的padding百分比值（有三個特點）： 1）同樣相對于寬度計算； 2）默認(rèn)的高度寬度細(xì)節(jié)有差異；//會讓規(guī)范中“strut”出現(xiàn)，讓高比寬更大 3）padding會斷行查看全部
舉報
0/150
提交
取消