css-padding

• 对于block水平元素
  1. padding值暴走，一定会影响尺寸
  2. width非auto,padding影响尺寸
  3. width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸
• 对于inline水平元素
  1. 水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景色（占据空间）

应用

• 高度可控的分割线
  1. 直接使用字符：注册 | 退出登录
  2. inline-block控制：注册 | 退出登录
  3. 使用inline padding：注册 | 退出登录

    <p>注册<span></span>退出登录</p>
    span{
      padding:16px 6px 1px ;   //上，下向对应方向延伸|  右侧向与margin-left保证左右间距
      margin-left:12px;        
      border-left:2px solid;  //生成|   左侧竖杠
      font-size:0px; 
    }

• padding实现三道杠

  <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相对与宽度计算，padding:50% 实现正方形
• 实现正方形app头图，实现不同屏幕下的兼容，部分安卓不支持vm单位

    <div class="container">
      <div class="example">
        <h2>笔记笔记</h2>
        <h4>慕课网</h4>
      </div>
    </div>

    .container{
      padding:50%;
      background:url(xx);
      background-size:100%;
      position:relative;
    }
    .example{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }

• inline水平元素的padding百分比值
  1. 同样相对于宽度计算
  2. 默认的高度宽度细节有差异

  - 即使是空的div，padding：50%也不是正方形
  - 加上font-size：0实现正方形--幽灵节点 
  

  3. padding会断行

标签元素的内置padding

• ol/ul
  • ol/ul元素内置padding-left，但是单位是px不是em--绝对单位，特例
  • chrome浏览器下是40px；--产生对齐问题
  • 如果字号很小，间距就会很开
  • 所以如果字号很大，序号会爬到容器外面
  • 一般文字大小12-16px，设置padding-left为22-25基本实现序号与图片对齐
• 表单元素
  • 所有浏览器input/textarea输入框内置padding
  • 所有浏览器button按钮内置padding
  • 部分浏览器select下拉内置padding，如FireFox IE8+可以设置padding
  • 所有浏览器radio/checkbox单复选框无内置padding
  • button按钮元素的padding最难控制
    • chrome浏览器--正常
    • firefox浏览器
      • 设置padding：0左右依然有padding
      • 通过button：：-moz-focus-inner{padding:0}实现
    • IE浏览器
      • IE7文字越多，左右padding逐渐增大
      • 通过button{overflow:visible;}实现
    • padding与高度计算的不兼容

        button{
          line-height:20px;
          padding:10px;
          border:none;
        }
        IE7:          45px;x
        IE8+:         40px;
        firefox:      42px;x
        chrome:       40px;
    

应用--label实现按钮的样式，功能兼容--隐藏btn按钮

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

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

实战应用

1. 使用百分比单位构建固定比例布局结构
2. padding:50%;
3. 配合margin实现等高布局--两栏等高布局

  .box{
    overflow:hidden;
    resize:vertical;
  }
  .child-orange,.child-green{
    margin-bottom:-600px;
    padding-bottom:600px;
  }
  .child-orange{
    float:left;
    background:orange;
  }
  .child-green{
    float:left;
    background:green;
  }


  <div class='box'>
    <div class="child-orange">
      <div>左黄</div>
      <div>左黄</div>
      <div>左黄</div>
    </div>
   
    <div class="child-green">
      <div>右绿</div>
      <div>右绿</div>
    </div>
  </div>

3. 两栏自适应布局

  //1. padding在容器上
  <div class='pbox'>
    <img src='xx'>文字xxx
  </div>

  .pbox{
    padding-left:120px;  //图片宽度 将图片放到padding范围内
  }
  .pbox img{
    float:left;
    margin-left:-120px; //空出图片宽度的区域
  }

  //2. padding在子元素上
  <div>
    <img src='xx'>
    <div class='auto'>文字xxxx</div>
  </div>

  img{
    float:left;
  }
  .auto{
    padding-left:120px;
  }