-
padding与布局 1、使用百分比单位构建固定比例布局结构 2、配合margin实现等高布局 3、实现两栏自适应布局 padding在容器上 <div class="pbox"> <img src="abc.jpg>本例子实现的是，图片宽度固定，然后后面的文字自适应的效果。原理如下：容器有个固定的padding-lfet值，此时图文应该在120px处显示，但是，由于图片margin负值浮动（或者绝对定位）到容器左上角，因此，文字... </div> .pbox{ padding-left:120px;//图文距离容器边缘120px处显示 } .pbox img{ float:left;//让文字浮动，所以不占据空间; margin-left:-120px;//图片与文字之间的距离 } padding在子元素上 <div> <img src="abc.jpg"> <div class="auto">本例子实现的是，图片宽度固定，然后后面文字信息自适应的效果。原理如下:两栏元素均有自己的标签，其中文字栏有个固定的padding-left值，此时文字应该在距离容器120像素处显示，但是，由于图片浮动，不在流中，所以文字。。。</div> </div> img{ float:left;//破坏了容器 } .auto{ padding-left:120px;//设置padding值，使其距离容器边缘120px显示； }查看全部
-
标签元素的内置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"出现。查看全部
-
对于inline水平元素 垂直padding不影响尺寸，水平padding会影响尺寸，但是会影响背景色(占据空间会变大)； 利用这一特性 可以实现高度可控的分割线 使用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若用百分比设定为50%时,在块级元素中,元素会变为正方形 在行内元素中 2.查看全部
-
padding与布局： 3、两栏自适应布局——在子元素上，和另个子元素并列查看全部
-
padding与布局： 3、两栏自适应布局——在容器上查看全部
-
padding与布局： 2、配合marign等高布局 关键代码：margin-bottom:-600px;padding-bottom:600px;查看全部
-
padding与布局： 1、使用百分比单位构建固定比例布局结构查看全部
-
padding与图形绘制——中心查看全部
-
padding与图形绘制——三道杠查看全部
-
CSS标签元素的内置padding值： 表单元素的内置padding值： 1、所有的浏览器input/textarea输入框内置padding 2、所有的浏览器button按钮内置padding 3、部分浏览器select下拉内置padding，如：FireFox、IE8 可以设置 4、所有radio/chexkbox单复选框无内置padding 5、button的padding极难控制 1）Chrome浏览器设置padding：0时左右没有padding 2）FireFox浏览器设置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;}查看全部
-
标签元素的内置padding值： ol/ul： 1、ol/li元素内置padding-left，但是单位是px不是em； 2、字号很小，间距就会很开；字号很大，序号会爬到容器外面； 3、12-14px大小文字配padding-left值22-24px差不多，会对齐的比较好.查看全部
-
padding负值和百分比值： 1、块级元素可以轻松实现一个正方形——div{padding:50%}; 2、inline水平元素的padding百分比值（有三个特点）： 1）同样相对于宽度计算； 2）默认的高度宽度细节有差异；//会让规范中“strut”出现，让高比宽更大 3）padding会断行查看全部
举报
0/150
提交
取消