客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
浏览器支持 定义和用法 说明 padding变化是否会影响容器的尺寸 1.对于block元素 如果宽度非auto那么容器会变大，如果容器宽度自适应或者设置了box-sizing:border-box,并且值在可控区间内是不会影响内容宽度的，如果值暴走那么容器肯定会变化。 复制代码 代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>DEMO</title> <style> *{padding: 0;margin: 0;} .test {width: 300px;background: blue;box-sizing: border-box;padding:0 300px;} .test2 {width: 300px;background: yellow;} </style> </head> <body> <div class="test">文字在那里</div> <div class="test2">文字在那里</div> </body> </html> 效果图 上面的代码运行说明了当padding值暴走的时候里面的文本只按照最小的单个字体作为一行content区域的宽度已经被充没了。 2. 对于内联元素 内联元素的padding只会影响左右尺寸，上下尺寸不影响但是背景色会显现，当上下值暴走的时候会影响外容器的高度。 复制代码 代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>DEMO</title> <style> *{padding: 0;margin: 0;} span {padding: 12px 4px 2px;margin-left: 8px;border-left:2px solid;font-size:0;} </style> </head> <body> 注册<span></span>登陆 </body> </html> 效果图 padding百分比值的特殊用法 从W3C标准中我们可以看到他是这么描述的：规定基于父元素的宽度的百分比的内边距。注意这里是基于父元素的宽度。 复制代码 代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>DEMO</title> <style> *{padding: 0;margin: 0;} .test {width: 500px;margin: auto;} .test div {padding: 50%;background: blue;} </style> </head> <body> <div class="test"> <div></div> </div> </body> </html> 效果图 padding绘制小图标 复制代码 代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>DEMO</title> <style> *{padding: 0;margin: 0;} .icon1 {width: 50px;height: 50px;border-radius: 50%;padding: 10px;border: 10px solid #000;background: #000;background-clip: content-box;float: left;} .icon2 {width: 50px;height: 10px;padding: 10px 0;border-top: 10px solid #000;border-bottom: 10px solid #000;background: #000;background-clip: content-box;float: left;margin:20px 20px;} </style> </head> <body> <div class="icon1"></div> <div class="icon2"></div> </body> </html> 效果图 当然padding的用法肯定还有很多，像什么三栏两栏或者等比例自适应布局等等。这些都是大家常用的方法我就不单个列举了。有兴趣的同学可以去研究一下。希望这篇文章对大家的学习和工作能带来一定的帮助。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论