关于CSS Padding那些你意想不到的用法示例
我要评论浏览器支持
所有浏览器都支持 padding 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。（以上来自w3school）
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的用法肯定还有很多，像什么三栏两栏或者等比例自适应布局等等。这些都是大家常用的方法我就不单个列举了。有兴趣的同学可以去研究一下。希望这篇文章对大家的学习和工作能带来一定的帮助。
相关文章
- 本文给大家介绍css代码去掉select的下拉箭头样式的方法，代码简单易懂，需要的朋友可以参考下2016-09-02
- 对于CSS，可能很多前端开发人员已经驾轻就熟了，有些人也许还在初学阶段，不管怎样，这几个炫酷的CSS技巧你都不容错过，对于大家开发前端很有帮助的。2016-08-30
- 今天小编给大家带来一个小demo，使用纯css3代码实现switch滑动开关按钮效果，非常实用，感兴趣的朋友可以参考下2016-08-30
基于JS+Html5+css3实现手机端点击图标环形菜单特效源码
基于JS+Html5+css3实现手机端点击图标环形菜单特效源码是一款支持移动端触摸事件，基于原生js以及html5+css3实现图标环形菜单。点击图片淡入淡出两次弹出环形菜单，点击clo2016-08-30
CSS3实现圆形图片鼠标悬停图片旋转放大特效源码是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。本段代码适应于所有网页使用，有需要的朋友可以直接下载2016-08-30- 下面小编就为大家带来一篇css background 背景图的设置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-30
- 大家以前基本是用Javascript来实现文字定时向上滚动的效果，那么今天小编给大家分享下利用CSS3来实现这一效果，有需要的可以参考学习。2016-08-29
- 下面小编就为大家带来一篇css照片有如层叠效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-02
最新评论