zoukankan      html  css  js  c++  java
  • [CSS学习] padding属性讲解

    记:本文可以作为张老师在慕课网上讲解课程的学习笔记

    定义

    padding:通过查MDN文档可知

    the padding property sets the padding space on all sides of an element. The padding ares is the space between the content of the element and its border. Negative values are not allowed.

    小实验:

    对于block水平元素

    1. padding值如果很大,一定会影响元素的尺寸

    2. width如果不是auto而是一个固定值,那么padding值一定会影响元素尺寸

    3. width如果是auto或者box-sizing=border-box,只要padding值设置的合理,就不会影响元素尺寸

    对于Inline水平元素

    水平方向的padding值会影响元素尺寸,而垂直方向的padding值不会影响元素尺寸,只会影响内容区域的高度和背景色。

    应用场景: 文字之间的短分割线

    inline元素如果有垂直方向的padding值,那么会出现“幽灵空白节点”,会影响元素的高度。通过设置font-size=0可以保持高度不变形。

    取值

    padding的取值不支持负数

    padding的百分比数字是基于元素的宽度来计算的

    标签元素内置padding值

    1. 所有浏览器Input/textarea输入框内置padding

    2. 所有浏览器Button按钮内置padding

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

    4. 所有浏览器radio/checkbox无内置padding

    5. button按钮元素的padding最难控制, padding与高度的计算不兼容

    Chrome {padding: 0;}

    FireFox  button::-moz-focus-inner{ padding:0; }

    IE7 button{ overflow: visible;}

    小技巧: 通过label标签模拟button标签,达到所有浏览器下button的高度一致。

    <button id='btn'></button>

    <label for='btn'>xx</label>

    CSS设置 button{ z-index, margin-left, position}来达到移除屏幕之外的隐藏

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

    padding与图形绘制

    a. 如何实现三道杠图形

    使用CSS属性padding, background-clip

    background-clip表示指定对象的背景图像向外裁剪的区域

    属性值: padding-box(从padding区域开始向外剪裁背景,边框下面没有背景,延伸至内边距外沿)  border-box(从border区域开始向外剪裁背景,背景延伸到边框外沿)  content-box(从content区域开始向外剪裁背景) text(从前景内容的形状作为剪裁区域向外剪裁,如此可实现使用背景作为填充色之类的遮罩效果)

     1 <div class="line-tri"></div> 

     1 .line-tri{
     3   width: 15px;
     5   height: 30px;
     7   padding: 15px 0;
     9   border-top: 30px solid;
    11   border-bottom: 30px solid;
    13   background-color: currentColor;
    14   background-clip: content-box;
    16 }
  • 相关阅读:
    【程序员工具】7z压缩解压缩软件-又轻又快
    【2021】想好要做什么,然后就放手去做吧!
    Maven下载源换成国内镜像
    漏洞扫描工具
    Python中文分词库
    Python pip更换国内安装源
    Q库存销售订单退货不能确立帐户问题(带WBS的销售退货订单)
    获取用户信息BAPI BAPI_USER_GET_DETAIL
    成本价自动创建功能自动函数
    MR21 创建标准价函数摘自标准功能
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6081981.html
Copyright © 2011-2022 走看看