深入 padding ( button按钮在各个浏览器中的兼容性问题与padding实现两栏自适应布局 )

div { padding: 50%; }  可以实现一个正方形（padding是根据宽度计算的。）

字体通常是 12px---16px的话， padding-left: 22---25px ，是可以的。

 

1. IE浏览器中  button表单按钮 padding

IE浏览器，button按钮文字越多，左右padding逐渐变大。

解决方法： button { overflow: visible; }

 

2. 解决button按钮在各个浏览器中的兼容问题。

建议： <button id="btn"></button><labe  for="btn" l>按钮</label>

label {

        display: inline-block;

         line-height: 20px;

         padding: 10px;

}

/************************************************************************************/

3. padding与图形绘制 ( 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;  /*让背景色在内容区域显示 */

}

 

/****************************************************************************/

5. padding 实现白眼效果

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

.eye {

        width: 150px; height: 150px;

         padding: 10px;

          border: 10px solid;

          border-radius: 50%;

         background-color: currentcolor;

         background-clip: content-box;

}

 

/*******************************************************************************************/

6. padding与布局

1. 移动端1：1头部布局 。 div { padding: 50%; }   

2. 配合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; }

3. 两栏自适应布局

方法一： padding在子元素上

<div>

         <img src="mm.jpg">

         <div  class="auto">

             本例子实现的是，图片宽度固定，然后后面文字信息自适应的效果。

              实现的原理如下： 两栏元素均有自己的标签，其中文字栏有个固定的padding-left值，

              此时文字应该在距离容器120像素处显示，但是，由于图片浮动或者绝对定位，不在流中。因此，文字..........

        </div>

</div>

img: { float: left; }

.auto  { padding-left: 120px ;}

 

方法二： padding在容器上

 <div  class="pbox">

    <img src="mm.jpg">

    本例子实现的...............

</div>

.pbox { padding-left:  120px; }

.pbox  img {

       float: left;

       margin-left: -120px;

}