-
标签元素的内置padding 1、ol/ul列表 i.ol/ul元素内置padding-left，但是单位是px而不是em； ii.所以如果字号很小/很大，间距就会很开 （平时开发font-size:是12/14，padding-left:22/25px相对合适） 2、所有浏览器input/textarea输入框内置padding 3、所有浏览器botton按钮内置padding 4、所有浏览器radio/checkbox单复选框无内置padding 5、button按钮元素的padding最难控制! 在不同浏览器上使用不同的padding i.chrome浏览器 padding:0;即可以 ii.FireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0;} iii.IE浏览器下 按钮文字越多，左右padding逐渐变大 button{overflow:visible;} padding与高度计算的不兼容 button{ line-height:20px; padding:10px; border:none;} ！！！更好的是利用<label>标签模拟按钮，但是有时需要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不支持任何形式的负值 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会不会影响元素尺寸？ 对于block水平元素 1、padding值大到一定境界，一定会影响尺寸； 2、width非auto，padding值会影响尺寸； 3、width为auto或box-sizing为border-box，同时padding值没有特别的大，不影响尺寸。 对于inline水平元素 水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景色(占据空间会变大)； 利用这一特性 可以实现高度可控的分割线，使用行内元素和padding实现右边效果：注册 | 退出登录 注册<span></span>登录 span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }查看全部
-
padding图形绘制： padding值结合背景颜色background，和背景绘制区域background-clip来实现 <!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:背景的绘制区域查看全部
-
botton表单padding兼容方法查看全部
-
平时网页开发文字大小一般是12-14像素 padding在网页中设置22-25px较为合适 基本能实现序号和文字左对齐查看全部
-
ol/li元素内置padding-left，单位是px查看全部
-
padding百分比，都是相对于父元素宽度来计算。 块元素：padding：50%实现正方形 内联元素：1.默认的高度宽度细节有差异，2.padding会断行查看全部
-
padding实现自适应效果 img{ float:left; } .auto{ padding-left:120px; } <div> <img src="mm.jpg"> <div class="auto"> </div>查看全部
-
1.ol/li元素内置padding-left,但是单位是px不是em; 2.平时网页开发文字大小一般是12-14像素 padding在网页中设置22-25px较为合适 基本能实现序号和文字左对齐查看全部
-
水平padding影响尺寸，垂直的padding不影响尺寸，但是会影响背景色（占据空间） 制作高度可控的分隔线 1.直接使用字符2.inline-block控制3.使用Inline padding span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid;font-size:0;}查看全部
-
高度可控的分割线查看全部
-
会影响背景色查看全部
-
block元素： 1.padding值暴走，一定影响元素尺寸 2.width非auto，padding影响元素尺寸 3.width为auto或box-sizing为border-box，同时padding值没有抱走，不影响尺寸。 inline水平元素： 水平padding影响尺寸，垂直padding不影响尺寸查看全部
举报
0/150
提交
取消