CSS关于padding总结

一 CSS padding与容器的尺寸关系

a.对于block水平元素

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

2.width非auto，padding影响尺寸。

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

b.对于inline水平元素

1.水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景色 （应用场景    占据空间）

 css:   span{
      padding-top: 14px;
      margin: 0 12px;
      border: 1px solid;
      font-size: 0;
    }

html ：注册 <span></span>登录

二 CSS padding负值和百分比值

a.padding不支持任何形式的负值

b.关于padding百分比值（应用场景  轻松实现一个正方形）

css:.container{padding:50%;background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517744928869&di=ca23225f4ced3eb626f667d915d7b122&imgtype=0&src=http%3A%2F%2Fimg1c.xgo-img.com.cn%2Fpics%2F1717%2F1716153.jpg); background-size: 100%;position: relative;}

    .example{
      position: absolute;
      top:0;
      right:0;
      bottom: 0;
      left: 0;
    }

html: <div class="container">
  <div class="example">
    <h2>你的指尖。。。</h2>
    <h2>慕课网。。。</h2>
  </div>
</div>

c.关于inline水平元素的padding百分比值

1.同样相对于宽度计算

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

3.padding会断行

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

5.所有浏览器button输入框内置padding.

6.部分浏览器select下拉内置padding.

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

三 padding实现图形绘制

四 应用实战

1.移动端1:1头图布局

2.配合margin等高布局

3.两栏自适应布局

（参考了张鑫旭老师的课程）