美文网首页
css-padding

css-padding

作者: wudongyu | 来源:发表于2018-11-21 15:50 被阅读0次

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实现正方形--幽灵节点 
    
    1. 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>
  1. 两栏自适应布局
  //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;
  }

相关文章

  • css-padding

    css-padding 对于block水平元素padding值暴走,一定会影响尺寸width非auto,paddi...

网友评论

      本文标题:css-padding

      本文链接:https://www.haomeiwen.com/subject/hjecqqtx.html