• 浅谈padding


    浅谈padding

    padding是CSS盒子模型的一部分,代表盒子模型的内边距。

    用法

    padding属性有四个值,分别代表上、右、下、左的内边距。

    .box {
      padding: 10px 5px 15px 20px;
    }
    

    此时,.box的内边距为:

    • 上内边距:10px
    • 右内边距:5px
    • 下内边距:15px
    • 左内边距:20px

    简写

    padding属性的值可以简写,按照值的数量可以分为三种情况:

    1.单个值
    .box {
      padding: 10px;
    }
    

    此时,.box的内边距为:

    • 上内边距:10px
    • 右内边距:10px
    • 下内边距:10px
    • 左内边距:10px
    2.两个值
    .box {
      padding: 10px 5px;
    }
    

    此时,.box的内边距为:

    • 上内边距:10px
    • 右内边距:5px
    • 下内边距:10px
    • 左内边距:5px
    3.三个值(重点)
    .box {
      padding: 10px 5px 15px;
    }
    

    此时,.box的内边距为:

    • 上内边距:10px
    • 右内边距:5px
    • 下内边距:15px
    • 左内边距:5px

    tips:实际使用时,大多数人都会使用单个值、两个值、四个值的写法,三个值的写法常常被忽略,所以需要重点了解三个值的简写写法。

    特性

    1.行内元素设置的内边距不会影响行高计算

    当对行内元素设置内边距时,内边距不会影响内联元素的行高,但是会撑开背景。

    <span class="text">我是行内元素</span>
    <div class="text-bottom">朕的背景!!!</div>
    
    span {
        padding: 10px;
        background: #cccccc;
    }
    
    .text-bottom {
        height: 200px;
        background: #000;
    }
    

    效果如下:

    avatar

    可以发现:行高并没有变化,背景按内边距撑开的面积显示,细心的话可以发现,背景延伸到了其他行,并发生了重叠,并没有挤开其他行,这也进一步说明了行高并没有改变。

    2.不允许使用负值

    padding不像margin可以使用负值,因为,margin再怎么用,也不会影响盒模型的宽度、高度,而padding身为盒模型的内边距,会直接影响盒模型的宽度、高度。并且,padding设为负值并没有意义,直接修改content一样可以达到效果。

    可能的值

    描述
    auto 浏览器计算内边距
    length 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px
    % 规定基于父元素的宽度的百分比的内边距
    inherit 规定应该从父元素继承内边距

    tips:padding常用的写法是使用length,比如padding: 10px。但是,有时使用百分比可以实现一些骚操作,比如实现一个自适应的正方形:

    .box {
        float: left;
         100%;
        padding-bottom: 100%;
        background: #cccccc;
    }
    

    效果如下:

    avatar

    可以看到,通过padding-bottom: 100%实现了一个自适应的正方形。

  • 相关阅读:
    如何使用 @ OutputCache 指令的 VaryByCustom 属性来缓存不同版本的页面
    看不懂 ASP.NET 相册上传代码
    asp.net判断是1.1还是2.0主要由Code*属性来解决,判断规则如下:
    引号看不懂
    GridView的行删除事件 //取当前行的Id
    <Columns></Columns>中间的是列集合
    DropDownList1.SelectedIndex = 0 DropDownList1处于位选择任何选项的状态下
    是一个查询语句 查询ZhuanJia表里面id=输入id的数据
    验证码图片的解释
    get和post区别:
  • 原文地址:https://www.cnblogs.com/karthuslorin/p/9330089.html
Copyright © 2020-2023  润新知