-
1、使用百分比单位构建固定比例布局结构（正方形） 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、两栏自适应布局 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元素内置padding-left（li元素的第一个字），但是单位是px不是em（文字个数）； 2、Chrome浏览器下是40px； 3、所以如果字号很小，间距就会很开；字号很大，序号会爬到容器外面 开发过程中为使序号与其他内容对齐，文字大小12px或14px，padding-left为22px至25px 表单元素内置padding： 所有浏览器input/textarea输入框内置padding 所有浏览器button按钮内置padding 部分浏览器select下拉内置padding，如FireFox IE8+可以内置padding 所有浏览器radio/chexkbox单复选框无内置padding button按钮元素的padding最难控制 FireFox浏览器设置padding：0，左右依然有padding 要使其没有padding可以使用button::--moz-focus-inner{padding: 0;} IE浏览器：文字越多，左右padding逐渐变大，要使其无padding使用botton{overflow：visible；} padding与高度计算不兼容 因此实际使用中使用a标签模拟按钮，但是表单提交按钮需要原生，建议用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不影响尺寸,但会影响背景色（占据空间） 利用该特性可以实现高度可控的分割线 注册<span></span>退出登录 span{ padding: 16px 6px 10px; margin-left: 12px; border-left: 2px solid; font-size: 0; }查看全部
-
手机屏幕实现背景正方形（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、默认的高度宽度细节有差异 3、padding会断行（内有文字） inline元素的垂直padding会让“幽灵空白节点”显现，（font-size：0使其看不见）也就是规范中的“strut”出现查看全部
-
1、padding不支持任何形式的负值 2、padding百分比相对于宽度计算 1。block元素实现移动端屏幕题图占一半 <div class="container"> <div class="example"> <h2>你的指尖...</h2> <h3>慕课网...</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百分比值 .同样相对于宽度计算 。默认的高度宽度细节有差异 。padding会断行 inline就算是空白元素，padding高和宽也不想等 是因为：inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的"strut"出现。查看全部
-
padding对于块级元素的影响： 1、padding的值过大时，一定会影响自身的尺寸； 2、width非auto,padding影响尺寸； 3、width为auto或box-sizing为border-box，同时padding值没有过大，不会影响本身的尺寸； 对于inline水平元素，水平padding影响尺寸，垂直的padding不影响尺寸，但是会影响背景色（占据空间） 制作高度可控的分隔线 1.直接使用字符 2.inline-block控制 3.使用Inline padding span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid;font-size:0;}查看全部
-
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;//背景色只在内容区域显示，使padding区域透明 } 圆眼效果： <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区域透明 }查看全部
-
font-size：12px-16px; padding-left:22px-25px; 实现左对齐查看全部
-
botton表单padding兼容方法查看全部
-
padding 22到25之间 网页文字大小为14 16px查看全部
-
padding负值和百分比值： 1、块级元素可以轻松实现一个正方形——div{padding:50%}; 2、inline水平元素的padding百分比值（有三个特点）： 1）同样相对于宽度计算； 2）默认的高度宽度细节有差异；//会让规范中“strut”出现，让高比宽更大 3）padding会断行查看全部
-
对于块级元素的影响： 1、padding的值过大时，一定会影响自身的尺寸； 2、width非auto,padding影响尺寸； 3、width为auto或box-sizing为border-box，同时padding值没有过大，不会影响本身的尺寸； 对于inline水平元素，水平padding影响尺寸，垂直的padding不影响尺寸，但是会影响背景色（占据空间） 制作高度可控的分隔线 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不影响尺寸，但是会影响背景色（占据空间）查看全部
-
使用padding实现高度可控的分隔线查看全部
-
padding负值和百分比值： 1、块级元素可以轻松实现一个正方形——div{padding:50%}; 2、inline水平元素的padding百分比值（有三个特点）： 1）同样相对于宽度计算； 2）默认的高度宽度细节有差异；//会让规范中“strut”出现，让高比宽更大 3）padding会断行查看全部
举报
0/150
提交
取消