-
1、使用百分比單位構(gòu)建固定比例布局結(jié)構(gòu)（正方形） 2、配合margin等高布局 .box{ overflow: hidden; resize:vertical; } .child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;} .child-orange{ float: left;background: orange; } .child-green{ float: left;background: green; }很大的margin-bottom負值，很大的padding-bottom填充缺失空間 3、兩欄自適應(yīng)布局 padding在容器上： .pbox{ padding-left: 120px; } .pbox img{ float: left; margin-left: -120px; } <div class="pbox"> <img src="mm.jpg"> duanluo... </div> padding在子元素上： img{ float：left； } .auto{ padding-left:120px; } <div> <img src="mm.jpg"> <div class="auto">duanluo...</div> </div>查看全部
-
ol/ul列表 1、ol/li元素內(nèi)置padding-left（li元素的第一個字），但是單位是px不是em（文字個數(shù)）； 2、Chrome瀏覽器下是40px； 3、所以如果字號很小，間距就會很開；字號很大，序號會爬到容器外面 開發(fā)過程中為使序號與其他內(nèi)容對齊，文字大小12px或14px，padding-left為22px至25px 表單元素內(nèi)置padding： 所有瀏覽器input/textarea輸入框內(nèi)置padding 所有瀏覽器button按鈕內(nèi)置padding 部分瀏覽器select下拉內(nèi)置padding，如FireFox IE8+可以內(nèi)置padding 所有瀏覽器radio/chexkbox單復選框無內(nèi)置padding button按鈕元素的padding最難控制 FireFox瀏覽器設(shè)置padding：0，左右依然有padding 要使其沒有padding可以使用button::--moz-focus-inner{padding: 0;} IE瀏覽器：文字越多，左右padding逐漸變大，要使其無padding使用botton{overflow：visible；} padding與高度計算不兼容 因此實際使用中使用a標簽?zāi)M按鈕，但是表單提交按鈕需要原生，建議用label標簽 <button id="btn"></button> <label for="btn">按鈕</label> label{ display: inline-block; line-height: 20px; padding: 10px; }隱藏button訪問性，例如將其放在背景下面，z-index=-1查看全部
-
對于block水平元素： 1、padding值暴走，一定會影響尺寸； 2、width非auto，即width有值，padding影響尺寸； 3、width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸 對于inline水平元素: 水平padding影響尺寸，垂直padding不影響尺寸,但會影響背景色（占據(jù)空間） 利用該特性可以實現(xiàn)高度可控的分割線 注冊<span></span>退出登錄 span{ padding: 16px 6px 10px; margin-left: 12px; border-left: 2px solid; font-size: 0; }查看全部
-
手機屏幕實現(xiàn)背景正方形（padding兼容性好） .container{ padding: 50%; background: url(img/loginbg.png); background-size: 100%; position: relative; } .example{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } <div class="container"> <div class="example"> <h2>你的指尖</h2> <h4>JavaScript</h4> </div> </div> inline水平元素的padding百分比值 1、同樣相對于寬度計算 2、默認的高度寬度細節(jié)有差異 3、padding會斷行（內(nèi)有文字） inline元素的垂直padding會讓“幽靈空白節(jié)點”顯現(xiàn)，（font-size：0使其看不見）也就是規(guī)范中的“strut”出現(xiàn)查看全部
-
1、padding不支持任何形式的負值 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百分比值 .同樣相對于寬度計算 。默認的高度寬度細節(jié)有差異 。padding會斷行 inline就算是空白元素，padding高和寬也不想等 是因為：inline元素的垂直padding會讓“幽靈空白節(jié)點”顯現(xiàn)，也就是規(guī)范中的"strut"出現(xiàn)。查看全部
-
padding對于塊級元素的影響： 1、padding的值過大時，一定會影響自身的尺寸； 2、width非auto,padding影響尺寸； 3、width為auto或box-sizing為border-box，同時padding值沒有過大，不會影響本身的尺寸； 對于inline水平元素，水平padding影響尺寸，垂直的padding不影響尺寸，但是會影響背景色（占據(jù)空間） 制作高度可控的分隔線 1.直接使用字符 2.inline-block控制 3.使用Inline padding span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid;font-size:0;}查看全部
-
padding實現(xiàn)三道杠圖標 <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;//背景色只在內(nèi)容區(qū)域顯示，使padding區(qū)域透明 } 圓眼效果： <div class="eye"></div> .eye{ width:150px;height:150px; padding:10px; border:10px solid; border-radius:50%; background-color:currentColor; background-clip:content-box;//背景色只在內(nèi)容區(qū)域顯示，使padding區(qū)域透明 }查看全部
-
font-size：12px-16px; padding-left:22px-25px; 實現(xiàn)左對齊查看全部
-
botton表單padding兼容方法查看全部
-
padding 22到25之間 網(wǎng)頁文字大小為14 16px查看全部
-
padding負值和百分比值： 1、塊級元素可以輕松實現(xiàn)一個正方形——div{padding:50%}; 2、inline水平元素的padding百分比值（有三個特點）： 1）同樣相對于寬度計算； 2）默認的高度寬度細節(jié)有差異；//會讓規(guī)范中“strut”出現(xiàn)，讓高比寬更大 3）padding會斷行查看全部
-
對于塊級元素的影響： 1、padding的值過大時，一定會影響自身的尺寸； 2、width非auto,padding影響尺寸； 3、width為auto或box-sizing為border-box，同時padding值沒有過大，不會影響本身的尺寸； 對于inline水平元素，水平padding影響尺寸，垂直的padding不影響尺寸，但是會影響背景色（占據(jù)空間） 制作高度可控的分隔線 1.直接使用字符 2.inline-block控制 3.使用Inline padding span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid;font-size:0;}查看全部
-
對于塊級元素的影響： 1、padding的值過大時，一定會影響自身的尺寸； 2、width非auto,padding影響尺寸； 3、width為auto或box-sizing為border-box，同時padding值沒有過大，不會影響本身的尺寸； 對于inline水平元素，水平padding影響尺寸，垂直的padding不影響尺寸，但是會影響背景色（占據(jù)空間）查看全部
-
使用padding實現(xiàn)高度可控的分隔線查看全部
-
padding負值和百分比值： 1、塊級元素可以輕松實現(xiàn)一個正方形——div{padding:50%}; 2、inline水平元素的padding百分比值（有三個特點）： 1）同樣相對于寬度計算； 2）默認的高度寬度細節(jié)有差異；//會讓規(guī)范中“strut”出現(xiàn)，讓高比寬更大 3）padding會斷行查看全部
舉報
0/150
提交
取消