CSS深入理解之padding

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之padding

Padding

一、Padding对于block水平元素

.div{width:50px;} -->实际宽度50

.div{width:50px;padding:0 15px;} -->实际宽度80

padding影响元素尺寸

 

.div{width:80px;box-sizing:border-box;} -->实际宽度80

.div{width:80px;box-sizing:border-box;padding:0 15px;} -->实际宽度80

Padding不影响元素尺寸

 

.div{width:80px;box-sizing:border-box;padding:0 40px;} -->实际宽度80

.div{width:80px;box-sizing:border-box;padding:0 41px;} -->实际宽度82

.div{width:80px;box-sizing:border-box;padding:0 80px;} -->实际宽度160

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></span>登录

span{ padding:16px 6px 1px;margin-left:12px;border-left:2px solid;font-size:0;}

三、CSS padding负值和百分比值

1、padding不支持任何形式的负值

2、关于padding百分比值

(1) Padding百分比均是相对于宽度计算的

(2) 应用：轻松实现一个正方形 .div{padding:50%}

3、inline水平元素的padding百分比值

(1) 同样相对于高度计算

(2) 默认的高度宽度细节有差异

(3) Padding会断行

<span style="padding:50%;background:#eee;">内有文字若干</span>

Span制作正方形是fone-size:0;

四、标签元素的内置padding

1、ol/ul列表

（1）ol/li元素内置padding-left，但是单位是px不是em；

（2）例如Chrome浏览器下是40px；

（3）所以如果字号很小，间距就会很开；

（4）如果字号很大，序号会爬到容器外面；

（5）开发时，文字大小一般为12-14px，padding-left为22-25px较为合适

例子：

<ol style="background:#eee;">
	<li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>
<img src="default-avatar.png" style="border:#abc solid 1px;width:100px;">
ol{padding-left:22px;}
li{font-size:14px;}

2、表单元素的内置padding

（1）所有浏览器的input/textarea输入框内置padding

（2）所有浏览器的button按钮内置padding

（3）部分浏览器select下拉内置padding，如FireFox IE8+可以设置padding

（4）所有浏览器的radio/checkbox单复选框无内置padding（设置无效）

（5）Button按钮元素的padding最难控制

3、button表单按钮padding

（1）Chrome浏览器，padding

（2）FireFox浏览器，设置padding:0，左右依然有padding！应该设置成：button::-moz-focus-inner{padding:0;}

（3）IE浏览器，IE7文字越多，左右padding逐渐变大。设置button{ overflow:visible;}，会变成padding:0的效果

（4）Padding与高度计算的不兼容。

例如：button{line-height:20px;padding:10px;border:none;}，IE7:45px；IE8+:40px；FireFox:42px；Chrome:40px；

（5）建议：

<button id="btn"></button>
<label for="btn">按钮</label>
label{display:inline-block;line-height:20px;padding:10px;}

IE7:40px；IE8+:40px；FireFox:40px；Chrome:40px；

五、CSS padding与图形绘制

示例1：

<div id="" class="line-tri">
.line-tri{
	width:150px;
	height:30px;
	padding:15px 0;
	border-top:30px solid;
	border-bottom:30px solid;
	background-color:currentColor;
	background-clip:content-box;
}

示例2：

<div id="" class="eye">
.eye{
	width:150px;
	height:150px;
	padding:10px;
	border:10px solid;
	border-radius:50%;
	background-color:currentColor;
	background-clip:content-box;/*让背景色只在内容区域显示*/
}

六、padding与布局

1、使用百分比单位构建固定比例布局结构

2、配合margin等高布局

<div class="box">
	<div class="child-orange">
		<div class="item">左</div>
		<div class="item">左</div>
		<div class="item">左</div>
	</div>
	<div class="child-green">
		<div class="item">右</div>
	</div>
</div>
.box{overflow:hidden;resize:vertical;}
.child-orange,.child-green{width:50%;margin-bottom:-600px;padding-bottom:600px;}
.child-orange{float:left;background:orange;}
.child-green{float:left;background:green;}
.item{line-height:30px;text-align:center;}

3、两栏自适应布局

<div>
	<img src="default-avatar.png" style="width:110px;">
	<div id="" class="auto">本例子实现的是，图片宽度固定，后面文字信息自适应的效果。原理如下：容器有个固定的padding-left值，此时文字应该在120像素处显示，但是，由于图片浮动（或者绝对定位），不在流中，因此文字。。。</div>
</div>
.auto{padding-left:120px;}
img{float:left;}