margin与padding的百分比参照

先来结论：

可以从两个方面来理解。由于padding和margin类似，下文就只以padding-top为例。

padding-top 如果以父元素高度为参照的话，那么子元素应用padding 值将会继续增加父元素的高度，而父元素高度增加，那 padding-top 值又增加，如此便形成了无限循环。

若一个参照物是宽度，一个参照物是高度，那么不统一的话容易造成混乱。

所以：无论水平还是垂直，百分比始终参考宽度。

怎么使用jquery获得标签的值或元素的内容？

jquery提供了三个获得内容的方法， text()、html() 以及 val()，其中前两个可用于解决本问题，$("label#userid")text();   // 首选，获取label的文本，$("label#userid")html();   // 也可以实现，获取label标签内的所有html标记，一般情况改下label标签内就是文本，所以等效上面的方法。

实例演示：

创建Html元素

<div class="box">

<span>点击按钮获取label中内容：</span><br>

<div class="content">

<label id="userid">输入用户名</label><input type="text">

</div>

<input type="button" value="获取label中的内容">

</div>

2设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

h3{display:inline-block;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3编写jquery代码

$(function(){

$("input:buttonbtn1")click(function() {

alert($("label#userid")text());

});

$("input:buttonbtn2")click(function() {

alert($("label#userid")html());

});

})

化学元素(Chemical element)就是具有相同的核电荷数(即核内质子数)的一类原子的总称，从哲学角度解析，是原子的电子数目发生量变而导致质变的结果。

关于元素的学说，即把元素看成构成自然界中一切实在物体的最简单的组成部分的学说。早在远古就已经产生了，不过，在古代把元素看作是物质的一种具体形式的这种近代观念是不存在的。无论在我国古代的哲学中还是在印度或西方的古代哲学中，都把元素看作是抽象的、原始精神的一种表现形式，或是物质所具有的基本性质。

在使用flex布局时，如果直接为子级元素添加padding的话，其宽度会压迫其他兄弟元素的空间。如以下布局。

本意是设置一个d性布局，然后每个子元素各占三分之一，然后第二个元素设置一个向右的padding值。但由于第二个子元素添加了padding: 60px的内边距导致其余两个兄弟元素的宽度受到压挤，效果如下：

而flex布局的盒模型box-sizing是content-box,是不包含内边距的。也就是第二个子元素设定的padding-right要先从father里减去。则分到每个子元素的宽度是 px。第二个子元素的宽度要加上60，所有最终分配的宽度就如上图所示了。

解决这个问题有两个办法

1子元素内加一个标签包裹d性内容。在内标签中再设置padding值。但这样的话html层级加深且语义不明显，不推荐此方法。

2将需要添加padding的子元素的box-sizing设置为border-box，同时显式的声明flex属性。即（ flex: 3333% 1 1 ）

其实像如题这种情况，采用grid网格布局是一个更明智的选择。

参考

深入理解 css3 中的 flex-grow、flex-shrink、flex-basic

有关flex布局子项padding问题

在上一章节，我们讨论了元素显示的基本特点。而在这一章，我们将看到css属性是如果改变元素显示外观的，这包括了padding，border，margin。

众所周知，所有的document元素都会生成一个长方形的box来布局，称为元素box，而且这个box是具有排他性的，同一个区域是不允许有多个box交叠的。这就是前端最熟悉的盒模型：

一般来说，这里说的宽度和高度指的都是上面图中inner edge的宽和高。而这两个属性最重要的一点就是它们不作用于inline的不可替代元素。举例来说，

如果你给链接设置了宽高，那么浏览器就会忽略这些声明：

在盒模型中，从里到外的第2层就是padding：

该属性接受任何的长度值，包括百分比。例如：

从上图中我们发现，padding也是在背景的覆盖范围的。

默认来说，元素是没有padding的。但一般情况下我们还是希望有padding的，不然border有时候看起来就离内容太近了：

另外padding是由方向的设置顺序的，来看下：

而且每个方向上，你所用的长度单位都可以是不一样的，举个列子：

有时候你会碰到相同的padding数值，例如

这可以简化为：

这是怎么实现的呢？其实在CSS内部定义了一套规则：

换句话说，如果只给了三个值，那么第四个left就会拷贝right的值。如果只给定2个值，那么第三个拷贝第一个，第4个拷贝第二个。如果只给了一个值，那么所有值都从它身上拷贝。

这个属于大家非常熟悉的部分了：

百分比的计算核心在于标准的确定，在padding中，其标准就是父元素的内容区域的宽度。举个例子：

设置百分比的padding存在一个问题，就是当父元素未设置宽度，而且随着浏览器会变化宽度的情况，那么这个padding的宽度也会跟着一起变动。

如果对一个inline元素施加padding是不会改变元素的高度的，例如：

这是因为对于不可见的背景情况下，padding是被设置为透明的，所以上面的声明不会改变行高。但如果设置了背景，情况就不一样了：

上面我们看到了处理padding top和bottom的情况，但是left和right的padding有点不同。如果对inline元素设置了left和right的padding是有效果的：

那如果inline元素跨行了会怎么样呢？

很自然的，left作用于开头，而right作用于结尾。

我们还是拿来举例，试着为添加padding：

不管可替换元素是block的还是inline的，这一padding都会加上，如下图所示：

在padding外面一层的为border，默认来说，background的颜色的边界就是在border这层。而每个border都有三部分组成：宽度，厚度和样式。对于宽度来说，默认值为medium，一般来说是2px。但有没有发现平常我们很少注意到，每个元素的border宽度已经设置好了？那是因为border的样式默认设置为none，所以我们压根看不到。最后来说说border默认的颜色，就是它的前景色（foreground color）。

另外刚说了背景区域到border位置，但是到border的内边界还是外边界没说。其实按照CSS的标准定义，这个需要扩展到外边界，因为有些border是dotted的。

border的样式是最重要的，因为你不设置，它就压根不出来。

CSS中定义了10中不同的样式，包括默认的none，列举如下：

其中最难搞得就是double，border样式为两行，而其中的空白的宽度就是border-width的宽度。而且CSS标准中并没有规定两条线的粗细的标准，都依赖浏览器去实现。

下面来看看另外需要颜色的border类型：inset，outset，groove，ridge

默认来说，border的颜色是基于元素的颜色。但是颜色的变化又得完全依赖浏览器去实现，来看看不同的实现：

在border-style属性中是允许同时定义多种border的：

这样设置的结果是什么呢？那就是top border为solid，right border为dashed， bottom border为dotted ，left border为solid。就像之前定义的padding一样。

来看个具体的例子：

如果想要设置单侧的样式，可以使用下列的一系列属性：

来看个具体的例子，设置h1三边包围：

上面需要注意的是，针对第二种方案，必须将border-left-style样式放在后面，不然就会被后者替换。

设置完style后，接下来就需要设置宽度width：

对应的单侧的设置为：

总共有4种方式来设置border的宽度，可以是像4px这样的数值，也可以是另外3个关键词（thin，medium，thick）。但要注意这三个关键词没有对应具体的数值，按照CSS标准，只要层层加厚就可以，依赖于浏览器实现。

我们假定一个段落p有个背景色和border style

border的width默认为medium，我们将其修改下：

来玩个极限的，将宽度设置为50px：

当然也可以设置单侧的宽度：

想要去掉border非常简单：

哪怕设置了宽度，如果style被设置为了none，那么border也不会显示，那这是为什么呢？这是因为如果将style设置为none，那么CSS就会将其视为是不存在的，然后自动将其宽度设置为0，无论你自己定义了什么。就像一个杯子已经空了，那么再来描述他是半满的是没有任何意义的。

这一点为什么重要呢，因为很多人容易忘记来声明一个border的样式。例如：

来看个颜色的示例：

当然也可以为不同的side设置不同的颜色：

如果没有设置颜色，那么就会获取当前元素的前景色：

当然也可以设置单侧的border颜色：

就像我们上面提到的，如果border没有style，那么久没有宽度。那如果碰到需要设置宽度但是border又不可见的情况怎么办？答案是将颜色设置为transparent。例如：

试想下这种情况，如果要针对某一边添加widith，style和color。如果单独设置的话其实还是蛮麻烦的：

但如果可以简化的话，那就方便很多了：

针对每个side属性的简化顺序为：

完全可以按照上面的定义来设置更复杂的border设置：

而且这些值得顺序也是不用担心的，下面的规则和上面的是一样的：

另外值得注意的是，在简化版中避免重复的类型值，比如两个width等：

这会导致浏览器直接忽略这条规则。

现在我们回到border属性本身：

来看看怎么用的吧：

这个会自动应用到每个方向上：

inline元素之前已经讲了很多了，现在主要简单讲几个需要注意的点。

首先就是不论border设置的width多厚，inline元素的line height都不会改变：

top和bottom的border是不可以的，但是left和right都是可以的：

而对于可替换元素来说，border是会影响行高的：

为了支持圆角的边框，border引入了border-radius属性来设置：

如果想要实现边角的圆角过渡，可以如下设置：

如果给定的是一个百分比值，那么结果很可能就是一个椭圆，因为长宽的基准值不一样：

另外，跟其他元素一样，border-radius也可以设置多个值,位置从左上沿顺时针到底部左侧。

而参数个数为3个的时候也是一样的，第4个参考第2个：

而在上图中重点到不是边角，而在于内容区域的右下角也发生了圆滑过渡，这是因为内容区域的背景和padding的背景不同所致，我们将在后面一章中详细讨论。

border-radius在原理上修改的是border和background的渲染，而不是盒子模型本身，来具体看下：

刚刚我们看到了设置单个值得情况，那如果设置2个值会怎么样呢？如果我们想要在水平方向设置3英寸，而在垂直高度设置1英寸。我们不能直接这样写：

因为这样我们会将左上，右下对角线一个宽度，而右上和左下对角线有一个宽度。而是应该使用：

而这相当于下面的表达式：

下面是一个简单的例子：

接下来来个更复杂的：

不同的颜色和样式在角的位置的渲染效果是不同的：

上面第一个是简单的圆角，第二个在厚度上出现了变化。第三个颜色和厚度是一样的，但是角的曲线从solid变成了double。而且样式间的过渡被阻断了。第四个我们把厚度和样式做了改变。第5第6个开始出现颜色的变化，但是都是直接的改变而没有渐变。而第七种情况则是厚度相同，颜色发生渐变，但是可以看到，只有外侧发生了变化，而内侧还是直角，示例如下：

值得注意的是，这次是不同在水平和垂直方向加/的，来看下：

上面两个是一样的。

如果你想要使用一张来作为border，那么可以使用border-image-source：

让我们使用一张单个圆点的作为border背景：

这里需要注意几个地方，如果没有定义border:25px solid; 按照之前的说法，没有style，border其实默认是不显示的。另外就是border-width其实就是后面border的宽度。

那令人奇怪的是，为什么只出现在角落里，边上为什么没有，而这就需要用到下面这个属性了：

slice也是接收4个值，完全遵从top，right，bottom， right的CSS默认赋值流程，而且数值也是基于百分比的值。

我们就以3 x 3 的网格图为例来看下效果：

注意到中间的一块空了，这是因为css中自动把中间的内容设置为empty，具体会在后面讲解原理。

slice属性的不同百分比对应不同的边缘裁切效果：

这就是我们为什么选取3 x 3网格图的原因，可以清晰的看到裁剪后的边框效果。除了上面的百分比，我们也可以使用数字，一般对于栅格图来说就是像素值，来看个例子：

回到之前的中心空白问题，这其实可以通过fill来填充回来：

而且从效果上来说会覆盖到其他的背景元素之上，因此可以作为背景的替代。

同时之前我们看到的宽度都是相同的，而其实可以为border的4个方向设置不同的宽度，然后border-image会自动匹配到对应宽度：

如果想要自己来设置border的宽度，可以使用border-image-width：

border-image-width其实和border-image-slice差不多，而不同的是前者就是border box本身。为了更好理解这个意思，我们假定宽度设置为1em:

其示意图如下：

边框都是1em宽，那么如果来填充呢，这里涉及多个属性，由border-image-slice生成的要经过border-image-repeat的处理，然后显示在border-image-width定义的盒子里面。

因为一般浏览器的默认值不同，所以一般初始化在顶部会使用

{margin:0;padding:0}

强制消去所有默认边距，而一般margin是控制同级元素的距离的，

padding是控制父子元素的距离的，所有你所说的应该是同级元素，

如果这两个元素位置是上下排列，你可以设置上面元素的下边距margin-bottom:100px;

或者下面元素的上边距margin-top:100px;皆可实现

css高度默认计算padding嘛

一、padding影响元素尺寸

对于block水平元素

padding值大到一定境界，一定会影响尺寸；

width非auto，padding值会影响尺寸（padding值越大，元素看起来越小）；

width：auto或box-sizing：border-box；同时padding值没有特别的大，不影响尺寸

对于inline水平元素

水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间变大）

使用这一特性，可以实现高度可控的分割线

复制代码

/使用inline padding实现 注册 | 退出登录 /

<!--------------HTML代码-------------->

注册<span></span>登录

<!--------------CSS代码-------------->

span{

padding:16px 6px 1px;

margin-left:12px;

border-left:2px solid;

font-size:0;

}

复制代码

二、padding的特性

1、padding不支持任何形式的负值

2、padding百分比相对于宽度计算

复制代码

/ block元素实现移动端屏幕题图占一半 /

<div class="container">

<div class="example">

<h2>padding</h2>

<h3>margin</h3>

</div>

</div>

<!---------------CSS代码--------------->

container {

padding:50%; //使占据移动端屏幕的一半，不用计算各种移动端设备的宽和高

background: url(expjpg);

background-size: 100%;

position:relatvie;

}

example {

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

}//文字充满整个屏幕显示

复制代码

3、inline水平元素的padding百分比值

同样相对于宽度计算

。默认的高度宽度细节有差异

。padding会断行

inline就算是空白元素，padding高和宽也不想等

是因为：inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的"strut"出现。

三、标签元素内置padding的使用

1、ol/ul列表

iol/ul元素内置padding-left，但是单位是px而不是em；

ii所以如果字号很小/很大，间距就会很开 （平时开发font-size:是12/14，padding-left:22/25px相对合适）

2、所有浏览器input/textarea输入框内置padding

3、所有浏览器botton按钮内置padding

4、所有浏览器radio/checkbox单复选框无内置padding

5、button按钮元素的padding最难控制!

在不同浏览器上使用不同的padding

ichrome浏览器 padding:0;即可以

iiFireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0;}

iiiIE浏览器下 按钮文字越多，左右padding逐渐变大 button{overflow:visible;}

padding与高度计算的不兼容

！！！更好的是利用<label>标签模拟按钮，但是有时需要button提交，所以，利用<button>的可用性并可访问性隐藏

获取当前元素可视区域的宽高(内容的宽高 + 左右/上下的padding),如果有小数，值四舍五入

注意：和内容是否有溢出无关(和是否设置了overflow: hidden也无关)，就是我们自己设定的内容的宽高+padding

获取上/左边框的宽度

在client基础上加上border

当前盒子的父级参照物

获取当前盒子距离父级参照物的偏移量(上偏移/左偏移),从当前盒子的外边框开始到父级参照物的内边框

如果没有内容溢出的情况下，等于内容宽高 + padding；如果有内容溢出无overflow: hidden的情况下，等于真实内容的宽高 + 左/上padding(下/右padding被真实内容占了)；如果有内容溢出并且有overflow: hidden的情况下，等于真实内容宽高 + padding。

注意：它是一个约等于的值，因为在不同浏览器显示不同的数值

滚动条卷去的高度

在js盒子模型13个属性中，只有scrollTop/scrollLeft是"可读写"属性，其余都是"只读"属性

这能获取所有写在元素行内上的样式，不写在行内上，不管你写没写都获取不到，真实项目中我们很少把样式写在行内

经过计算的样式: 只要当前元素可以在页面中呈现(或者浏览器渲染它了),那么它的样式都是被计算过的

不管当前样式写在哪

不管你是否写了(浏览器会给元素设置一些默认样式)

在标准浏览器中(IE9+)

以上就是关于margin与padding的百分比参照全部的内容，包括:margin与padding的百分比参照、怎么使用jquery获得标签的值或元素的内容、关于flexd性布局子元素添加padding问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！