css深入理解padding

padding 中规中矩，性格温婉平和！

第一节：CSS padding与容器的尺寸——了解padding与元素尺寸之间关系

CSS padding与容器的尺寸关系复杂

对于block水平元素 没有padding的时候 .gay{width:50cm;} padding影响元素尺寸      （理解为人身体的脂肪，人和人之间的距离）.gay{width:20cm;padding:0 12px;}

但是width:auto或box-sizing为border-box的时候 .gay{width:80cm;box-sizing:border-box;padding:0 15px;}

.text{width:8cm;box-sizing:border-box;padding:0 1.5cm;}这个时候padding不会影响元素尺寸，但是当padding大小超过宽高的时候，.text{width:8cm;box-sizing:border-box;padding:0 8cm; }这时候元素按内联元素最小宽度显示，此时padding同样影响了元素的尺寸。

结论：对于block水平元素

1.padding值暴走，一定会影响尺寸；

2.width：auto，padding影响尺寸；

3.width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。

对于inline水平元素

水平padding影响尺寸，垂直padding不影响尺寸 .leader{padding:50px},但是会影响背景色（占据空间）。大到比父元素还大的时候，设置overflow：auto会出现滚动条

如何利用这一特性

高度可控的分割线

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负值和百分比值——了解padding特殊值的特殊表现

1.关于padding的负值，padding不支持任何形式的负值。

2.关于百分比均是相对与宽度计算的。

如何实现这一特性，轻松实现一个正方形 div:padding:50%(相对百分比计算)

真实案例

<div class="container">

<div class="example">

<h2>你的指尖</h2>

<h4>慕课网</h4>

</div>

</div>

.container{padding:50%;background:url(exp.jpg);background-size:100%;position:relative;}  .example{position:absolute;top:0;right:0;bottom:0;left:0;}实现一个正方形的响应式布局。

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

1.同样相对于宽度计算

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

3.padding会断行

inline元素的padding断行

span{padding:50%;}

<span syle="padding:50%;">内有文字若干</span>

如果是空的inline元素，高度还是要比宽度高

设置fon-size:0px；得到一个正方形。

为何会有额外的高度

inline元素的的那个会让“幽灵空白节点”显现，也就是规范中的strut出现。content-area，可以通过font-size:0px;让他不显示。

第三节：标签元素的内置padding-这里有一些你可能不知道的小秘密

1.ol/ul列表

1.1 ol/li元素内置padding-left，但是单位是px不是em;

1.2 例如chrome浏览器下是40px;

1.3 如果字号很小，间距就会很开；

1.4 如果字号很大，序号回爬到容器外面

margin等一般em的。

2.表单元素的内置padding值

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

所有浏览器button按钮内置padding

部分浏览器select下拉内置padding，如firefox ie8+可以设置padding

所有浏览器radio/checkbox单选框无内置padding

button按钮元素的按钮是最难控制的。

1.chrome浏览器是没有问题的。

2.firefox浏览器  设置padding:0左右依然有padding！ 需要设置button::-moz-focus-inner{padding:0;}padding才为0

3.IE浏览器 ie7文字越多，左右padding逐渐变宽。设置overflow:hidden以后就正常了。

4.padding与高度计算的不兼容

button{

line-height:20px;

padding:10px;

border:none;

}

IE7   45px;

IE8   40px;

FireFox 42px;

Chrome:  40px;

button表单按钮padding

<button id="btn"></button>

<label for="btn">按钮</label>

label{display:inline-block;inline-height:20px;padding:10px;}

让button可见性隐藏。

第四节:padding与图形绘制——利用padding来绘制图形

实现3道杠——不借助伪元素，只用一个div

实现示意

<div class="line-tri"></div>

.line-tri{

width:150px;height:30px;

padding:15px 0;

border-top:30px solid;

border-bottom:30px solid;

background-color:currentcolor;

background-clip:content-box;

}

实现一个点

<div class="eye"></div>

.eye{

width:150px;

height:150px;

padding:10px;

border:10px solid;

border-radius:50%;

background-color:currentcolor;

background-clip:content-box;

}

第五节:padding布局实战----padding在布局这块比较好的应用

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

移动端1:1头图布局

div{padding:50%;}

2.配合margin实现等高布局。

.box{overflow:hidden;resize:vertical;}

.child-orange,.child-green{

margin-buttom:-600px;

padding-bottom:600px;

}

.child-orange{

float:left;

background:orange;

}

.child-green{

float:left;

background:green;

}

3.padding实现两栏自适应布局

<div class="pbox">

<img src="mm.jpg" />

<div class="auto">

本例子实现。。。。

</div>

</div>

img{float:left;}

.auto{

padding-left:120px;

}