css 你真的了解padding吗?

Phoebe的学习天地 2020-06-21

前言

padding 简写属性在一个声明中设置所有内边距属性,实际上在使用过程中它对block元素和内联元素的处理是不一样的。

正文

对于block元素

如果宽度非auto那么容器会变大，如果容器宽度自适应或者设置了box-sizing:border-box,并且值在可控区间内是不会影响内容宽度的，如果值暴走那么容器肯定会变化。

对于内联元素

内联元素的padding只会影响左右尺寸，上下尺寸不影响但是背景色会显现，当上下值暴走的时候会影响外容器的高度。
利用这一特性我们可以做类似于：注册 | 登陆 这种中间的间隔线

margin,padding的百分比是相对与父元素的宽度来进行计算的

如果父元素没有设置宽度（脱离文档流[float,absolute,fixed]），那又该怎样计算呢？？

实践的答案是：padding的百分比没有用了,这里不是说padding不生效，而是脱离文档里后，父元素没有宽度了，和高度了，这个时候父元素宽度就是内部元素宽度，所以padding是没有意义的。当然需要设置父元素的宽度为100%，这个时候依然有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="position:relative">
 <div style="position:absolute">
   <span style="display:inline-block;padding: 200px;">
  test the padding
   </span>
 </div>
    </div>
</body>
</html>
Phoebe的学习天地

Phoebe的学习天地

相关推荐

【内测来袭】PerfDogService 一键搭建您的性能测试平台

PerfDog是一款移动平台的性能测试工具，快速定位分析性能问题，提升APP应用及游戏性能和品质。手机无需ROOT/越狱，手机硬件、游戏及应用APP也无需做任何修改，极简化即插即用，是全网唯一支持iOS/Android/小程序/H5等移动全平台性能测试的工

today0 / 0评论 2020-09-22

最靠谱的http协议无状态解释

3 每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影响后面的请求应答情况。所以，这个状态，加上前面说的客户端也有cookie，就是指，客户端和服务器在临时会话中产生的数据！

89520292 / 0评论 2020-09-18

vmware扩展跟分区

进行的操作：在 windows 下运行 CMD , 转到 vmware 的安装目录,可执行vmware-vdiskmanager.exe；在Linux下，直接敲入vmware-vdiskmanager ,可执行该指令扩充使用的指令: vmware-vdis

周公周金桥 / 0评论 2020-09-06

(转)[iOS概念]Apple Pay与IAP的区别

在Apple Pay的发布会上,Eddy Cue表示,苹果并没有兴趣建立一个收集用户数据的业务,苹果并不知道你购买了什么,不知道你是从哪里购买的,为了这个商品花了多少钱。所以这也就是苹果和支付宝,微信等最大的不同:Apple Pay并不会将资金存放在App

bigname / 0评论 2020-08-25

QNET：APP弱网络测试专家

基本思路是在PC上装一个Fiddler网络抓包工具，然后再将Android设备的网络代理到PC上，通过在PC上的Fiddler在设置延时来进行弱网络模拟。

灵均兰草 / 0评论 2020-08-20

kafka技术题

将向 Kafka topic 发布消息的程序成为 producers.将预订 topics 并消费消息的程序成为 consumer.Kafka 以集群的方式运行，可以由一个或多个服务组成，每个服务叫做一个 broker.producers 通过网络将消息发

hannuotayouxi / 0评论 2020-08-20

几维安全用代码虚拟化技术解决IOT安全核心痛点，让万物互联更安全

几维安全定位专注于底层安全技术的企业，主要方向为物联网安全产品和服务。其虚拟化编译器可以通过固件代码虚拟化隐藏协议逻辑，白盒加虚拟化以及加密芯片则能充分保护密钥安全。物联网攻击事件亦是频发。在此背景下，物联网安全市场正井喷式发展，据相关数据显示，2018年

ChinaWin / 0评论 2020-08-13

Wyn Enterprise中如何转换数据类型？

在设计报表或者仪表板时，有时候从数据集获取到的数据类型和我们分析所需的类型并不匹配，不是同一种数据类型，可能会造成无法将数据正确分类或者过滤等情况。此处主要是仪表板数据集的数据类型转换。此处要注意，直接通过下拉选择调整类型可能部分情况不会生效。此时，需要使

大象从不倒下 / 0评论 2020-07-31

Xamarin.Forms 通用类库中平台差异属性设置方法

静态Device类包含几个属性和方法，这些属性和方法使您的代码可以在运行时以非常简单明了的方式处理设备差异：。WinPhone成员指所有Windows和Windows Phone平台。您可以在if和else语句或switch and case块中使用这两个

好好学习天天 / 0评论 2020-07-28

mq如何处理消息丢失

　　生产者将数据发送到rabbitmq的时候，可能因为网络问题导致数据就在半路给搞丢了。但是问题是，开始rabbitmq事务机制，基本上吞吐量会下来，因为太耗性能。如果rabbitmq没能处理这个消息，会回调你一个nack接口，告诉你这个消息接收失败，你可

powrexly / 0评论 2020-07-20

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass / 0评论 2020-07-19

爬虫系列之自动化运维（一）服务器节点详细设计

我们能用Python做什么？3人团队，如何管理10万采集网站？如何爬虫微信公众号中的所有疫情信息呢？③　脚本运行情况、采集数据量等监控难度加大；初期以采集为主；同时，实现对服务器、采集器、脚本等服务进行监控，实时发现问题，解决问题。③　表头“+”：表示对列

88530091 / 0评论 2020-07-14

HTML元素的默认样式

为什么需要默认样式？在html发展初期，还没有css文件，另外，css文件可能不能加载，所以这里默认样式就是必要的。默认样式带来的问题，会影响我们写css，需要我们覆盖默认样式。-- html元素是block元素，是有默认样式的，display=block

WebVincent / 0评论 2020-07-09

03前端_css盒子

css中的盒子是由element、padding、border、margin组成 element：元素内容 padding：内边距：是内容距离内边框的距离 border：边框 margin：外边距：是元素和元素之间的距离。块元素<p>、<

骆驼的自白 / 0评论 2020-06-26

css padding-right没有用?

比如说我设置了width为100%了，这个时候我需要padding，但是padding-right似乎没有生效。内部宽度+padding+border=容器宽度=实际宽度。比如我设置了宽度为100%，那么个宽度为:父类的宽度=子类的宽度+padding+b

lanzhusiyu / 0评论 2020-06-21

keras实现多种分类网络的方式

Keras应该是最简单的一种深度学习框架了，入门非常的简单.采用kaggle猫狗大战的数据作为数据集.由于AlexNet采用的是LRN标准化,Keras没有内置函数实现,这里用batchNormalization代替

诗蕊 / 0评论 2020-06-14

css盒子模型、height:100%;

当我们声明一个div，并赋予它的宽高为200*200px，padding为20px，margin也为20px，border为1px. 不难发现实际盒子的大小等于 我们设置的 width + border + padding +margin，我们设置的wid

jiedinghui / 0评论 2020-05-30

css面试题汇总 （持续更新）

一个基本的盒模型，包括content，padding，border，margin

nicepainkiller / 0评论 2020-05-27

安卓移动应用代码安全加固系统设计及实现

安卓平台已经逐渐成为最受欢迎的移动终端操作系统，基于安卓系统的软件应用数量众多，同时安全威胁也在不断增加。介绍了Android系统的安全风险及加固的核心技术，据此提出了一种安卓应用程序的安全加固系统，设计和实现了基于代码混淆的加固技术，从而达到了移动应用安

kangtingting0 / 0评论 2020-05-20

《NLP 中的Mask全解》

Mask 在NLP中是一个很常规的操作，也有多种应用的场景和形式，下面尝试从以下几个方面去全解Mask，并尽可能地辅以图片说明和代码解释：。区分的目的是使得RNN只作用到它实际长度的句子，而不会处理无用的 padding 部分，这样RNN的输出和隐状态都会

yyy0 / 0评论 2020-05-12

js里关于各种尺寸的获取

获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域。当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大

sixthelement / 0评论 2020-04-30

微信小程序设置padding-right和margin-right无效

原因： 在设置了padding之后又设置了width：100%，所以右侧显示不出来。

mazegong / 0评论 2020-04-24

css盒模型

padding：内边距，边框到内容的距离。盒子的真实宽度=height+2*padding+2*border

sdbxpjzq / 0评论 2020-04-21

多张图片懒加载

ul li { height: 900px; margin: 100px auto; text-align: center; }. oDiv.style.display = ‘block‘ : oDiv.style.display = ‘none‘

MaureenChen / 0评论 2020-04-21

【python实现卷积神经网络】卷积层Conv2D实现（带stride、padding）

关于卷积操作是如何进行的就不必多说了，结合代码一步一步来看卷积层是怎么实现的。先看一下其基本的组件函数，首先是determine_padding：。# Pad so that the output shape is the same as input sh

hnyzyty / 0评论 2020-04-15

知识图谱如何改变银行业务模式？

知识图谱被构造为附加的虚拟数据层，位于现有数据库之上，并将数据大规模链接在一起。由于知识图谱基于知识和概念，因此要想创建良好的知识图谱，必须让整个组织内不同领域的主题专家都参与进来。试图建立自己的知识图谱的金融机构不必从头开始。由于知识图谱能够以智能的方式

xingguanghai / 0评论 2020-03-13

css盒子模型讲解

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边

Phoebe的学习天地 / 0评论 2020-02-22

批量服务器管理软件 批量管理服务器

iis7VPS服务器批量管理是一款可以完美支持 3389 vnc 一键登录。方便随时保持服务器信息。支持打印列表 到处Excel列表。可查看在线服务器列表和离线服务器列表，一键联系客服，自动复制服务器地址和故障现象，直接弹出管理的QQ对话框。检测服务器状态

MichelinMessi / 0评论 2020-02-19

CSS盒模型

css盒模型算得上是web布局的基石了。要想写好整个web项目，那就必须深入了解盒模型，下面我们就来探究一下盒模型所涉及到的相关问题...为了让一些元素看起来布局规整，引用"box model"这一概念，把网页各部分整齐划一。用泡沫

tianzyc / 0评论 2020-02-22

web第六天，CSS优先级与盒子模型

　　　　通过设置inherit值，可以改变默认的继承方式。　　　　当设置相同样式时，后写的优先级较高，但不建议出现重复设置样式的情况。　　　　场景 ： 紧急情况下使用。　　　　群组选择器与单一选择器的权重相同，靠后写的优先级高。　　　　3，padding属

teresalxm / 0评论 2020-02-18

css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

background-origin: content-box | padding-box | border-box; 背景图片起始位置

wangjie / 0评论 2020-02-02

css备份

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .s

nicepainkiller / 0评论 2020-01-25

微信小程序全选多选效果实现代码解析

<view class="applicant_name">汪小涵 <text>管理员</text> </view>. { id: 4, name: 4, checked: false },

killgod / 0评论 2020-01-21

css布局及鼠标悬浮下拉框展现

<span class="span-left"> 信息。。。。。。。。。<span class="span-right"><span>评论|</span><spa

木四小哥 / 0评论 2013-05-14

jquery插件开发

以前写js的时候都没有注意一些封装插件的方法和技巧，如今将jquery的文档翻译一下，在自己学习的同时也给跟我类似的菜鸟一点精神食粮吧~亲~这是一个常见的错误，因为在jquery的回调函数里this关键字往往是表示一个DOM元素，这导致this关键字总被过

81751330 / 0评论 2013-05-13

Scope- ruby中变量的作用范围

当程序从一个class，或者module，或者method进入（退出）时，作用域就会改变，对应的3个关键字为：class module，和 def， 每一个关键字的位置就是作用域的入口。class和module的作用域于method的不同，当定义class

SoShellon / 0评论 2013-06-01

Nginx 下缓存静态文件（如css js)(转)

如css,js,htm,html,jpg,gif,png,flv,swf，这些文件都不是经常更新。便于缓存以减轻服务器的压力。proxy_cache cache_one;设置缓存共享内存区块，也就是keys_zone名称。proxy_cache_valid

Simagle / 0评论 2013-05-31

浏览器缓存机制

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同

羽化大刀Chrome / 0评论 2013-05-31

卷积神经网络-池化汇总

池化的概念是在 AlexNet 网络中提出的，之前叫做降采样；池化到底在做什么，不多解释；padding 取 valid 时，不填充，假如扫描到边界时，剩余格数小于池化野的大小，就放弃剩余的格数。max_pooling 也是在 AlexNet 中提出来的，

cherry0 / 0评论 2020-01-18

CSS盒子模型解析

盒子模型应该是html+css非常重要的内容，网页开发中必然会用到，但到最近我才真正的理解盒子模型的意义。Margin（外边距）: 清除边框区域。Margin没有背景颜色，它是完全透明。会受到框中填充的背景颜色影响。其实整个盒子模型的大小=content内

nicepainkiller / 0评论 2020-01-18

css padding 属性

css中默认的box-sizing是content-box，所以使用padding在定宽元素中会增加元素尺寸。可以使用box-sizing：border-box或者采用无宽度以及宽度分离原则。当使用box-sizing：border-box在某些情况下还是

福叔 / 0评论 2020-01-10

css的margin与padding练习

DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>margin<

waterv / 0评论 2020-01-08

svn c命令

大数据资料共享。

ganyouxianjava / 0评论 2012-05-31

常问的 web前端 问题

当鼠标放到文字或是图片上时有 title 文字显示。在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。DIV+CSS 布局：速率快，页面体

lcyangcss / 0评论 2020-01-03

提高 Linux 上 socket 性能

本文探索了 4 种使用 Sockets API 来获取应用程序的最大性能并对 GNU/Linux 环境进行优化从而达到最好结果的方法。在开发 socket 应用程序时，首要任务通常是确保可靠性并满足一些特定的需求。利用本文中给出的 4 个提示，您就可以从头

浪风一骑 / 0评论 2013-08-04

inotify+rsync实现linux文件批量更新[转]

Timeout = 300通过该选项可以覆盖客户指定的IP超时时间.通过该选项可以确保rsync服务器不会永远等待一个崩溃的客户端.超时单位为秒钟,0表示没有超时定义,这也是默认值.对于匿名rsync服务器来说,一个理想的数字是600.#transfer

LutosX / 0评论 2013-07-29

linux_5 个获取 Linux 主机信息的命令

Linux 系统管理员在接手一台新的服务器的时候，如果没有好的交接文档，我们可以得到的主机信息就要靠我们自己了。很多信息是可以直接通过命令从主机上获得的，下面就和大家分享 5 个获取 Linux 主机信息的命令。您可能会注意到，主机名通常也出现在命令提示符

vanturman / 0评论 2013-06-27

Linux中SWAP交换分区

编辑 /etc/fstab文件，并增加如下第二行代码。如果您喜欢这篇文章。UUID=b45eed4a-b319-43fa-9d03-200c558b5d84 / ext4 defaults 1 1UUID=0ab45aeb-98f7-4f31-863d-7

wutongyuq / 0评论 2013-04-12

mac系统如何显示和隐藏文件

显示Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFiles YES. 隐藏Mac隐藏文件的命令：defaults write com.apple.finder AppleShowAllFil

luoqu / 0评论 2013-04-10