css padding-top padding-bottom margin-top margin-bottom采用百分比时参照对象

最新推荐文章于 2020-12-17 02:49:17 发布

avtcpm1927

最新推荐文章于 2020-12-17 02:49:17 发布

阅读量203

点赞数

原文链接：http://www.cnblogs.com/lifeisshort/p/4864989.html

版权

css padding-top padding-bottom margin-top margin-bottom采用百分比时参照对象

之前想用padding-top来实现垂直居中，后来发现这是不可能的。

padding-top padding-bottom margin-top margin-bottom采用百分比时是参照父级块元素的宽度来确定的。

因为若是参照父级块元素的高度来确定的，那么该元素的高度会变化，从而导致父元素的高度会变大，而父元素的高度变大，从而导致padding-top等的百分比对应的高度变大，虽然最终变化是收敛的，但是和原先所想要的高度是不一样的，因而参照父级块元素的宽度是比较好的。

如果想要垂直居中的话，可以用js来操作，这也是没有办法的办法。

posted on 2015-10-09 20:16 梦见世界阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/lifeisshort/p/4864989.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

avtcpm1927

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端面试题：当margin-top、padding-top 的值是百分比时,分别是如何计算的?

sdasadasds的博客

07-28

685

我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...

padding-top实现列表图片自适应

qq_36454089的博客

11-27

804

处理列表中响应式图片的时候，宽度可以设置百分比进行自适应，但是高度没办法控制，如果图片宽高不一致，宽度设置一样，高度会参差不齐这时就可以使用padding来控制图片的高度，让列表中的图片强制设置同一高度 1 : 图片使用盒子包裹，案例为 .img-box 2 : img-box的高度用padding-top/padding-bottom 撑开 padding-t...

参与评论您还未登录，请先登录后发表或查看评论

当margin-top、padding-top的值是百分比时，分别是如何计算的？

孙叫兽的博客

09-24

1487

CSS 百分比参照问题参照父元素宽度的元素：paddingmarginwidth text-indent 参照父元素高度的元素：height 参照父元素属性:font-size line-height 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度 ...

关于margin的数值是百分比，参照对象

超胆孤侠

09-16

3411

备份

使用padding-bottom设置div的高度跟父元素的宽度相关联

weixin_38622325的博客

05-10

853

在百分比布局中，常需要设置元素的高度跟父元素的宽度相关联，此时子div使用padding-bottom设置百分比，即可让子div高度为父元素宽度的百分比，代码如下 #app .right { //父元素样式 float: right; box-sizing: border-box; width: 100%; height: 90%; padding: 3...

元素的height为0，padding-bottom为百分比；该元素的高度等于父元素端度乘于该元素的padding-bottom百分比

qq_38065133的博客

10-09

743

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素的height为0，padding-bottom为百分比；该元素的高度等于父元素端度乘于该元素的padding-bottom百分比</title> <style> .wrapper { width: 1000px;

css padding-top,padding-bottom 百分比值的使用（高度自适应）

weixin_44151357的博客

10-11

1816

css使用小技巧当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时，计算结果是参照父元素的宽度可以把这一特性用作一些特殊处理的小技巧，比如高度自适应问题，还有我最近了解到的图片占位，避免图片等资源加载的时候出现闪烁抖动 html： <div class="father"> <div class="chil...

css 高度等于宽度 padding-top 100% 不生效css 高度等于宽度 padding-top 100% 不生效

最新发布

10-13

` 使元素占据其容器的高度和宽度，然后尝试通过 `padding-top: 100%` 添加垂直填充时，这个效果通常不会按预期工作。原因在于百分比值（%）通常用于相对长度，而在这种情况下，`height: 100%` 已经将元素高度设置为...

css中padding和margin的异同点介绍

09-25

CSS中的padding（内边距）和margin（外边距）是控制网页布局中元素之间距离的关键属性。本文将从语法结构、可能取的值、浏览器兼容性等方面详细介绍padding和margin的异同点，并结合图示提供直观的理解。一、...

响应式背景图片的几种方式（举例padding-top实现响应式背景图）

酷酷的旭

09-25

1万+

我们都知道，在处理相应布局的时候，背景图片都是等比例缩放，使用引入的话，设置width:100%;height:100%;那么图片就会等比例缩放，这是图片，那么如果是背景图呢？我们之前的项目中常见的做法是根据css3媒体查询的方法来做的，根据不同手机的分辨率的不同，来等比例缩放背景图的高度，虽然这种方式是可以解决的，但是这种通过人肉的的方式来进行的设置并不好，也很繁琐，今天我们来学习使用paddi...

margin-top/bottom，padding-top/bottom百分比取值的问题

九日的博客

10-12

1023

一、 1.margin-top/bottom，padding-top/bottom设置为百分比时，取值为父元素宽度的百分比。 2.如果想要取父元素高度的百分比，在父元素上添加代码： writing-mode: vertical-lr; 二、关于为什么为W3C规定，margin和padding的取值是按照width来计算。主要有两种说法， 1.避免高度计算的循环依赖； 2.统一基准 1.关于第一种说法：（1）当父元素高度不固定，需要依靠子元素撑开时，计算父元素高度时回去寻找子元素高度与子元素的ma.

利用padding-top/padding-bottom百分比，进行占位和高度自适应

weixin_30752377的博客

07-21

1064

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px 这个小小的知识点，其实有很大的用处，应用也很广泛，就是进行提前占位，避免资源加载时候的闪烁，还可以让高...

margin-top、padding-top的值为百分比

yangxy的博客

05-22

1万+

问题：当margin-top、padding-top的值是百分比时，分别是如何计算的？ A 相对父级元素的height，相对自身的height B 相对最近父级块级元素的height，相对自身的height C 相对父级元素的width，相对自身的width D 相对最近父级块级元素的width，相对最近父级块级元素的width答案：D可以对元素的margin设置百分数，百分数是相对于父元

css中margin属性值百分比的使用

热门推荐

三三

02-21

1万+

margin使我们使用得很频繁的一个属性，用来设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，可以有 1 到 4 个值。例子：margin:10px 5px 15px 20px; 说明：属性值描述 auto 浏览器计算外边距 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的外边距 inheri...

当margin和padding的值是百分比时，应该如何计算的？

i_will_be的博客

08-19

4363

对元素的margin设置百分数时，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。如果没有为元素声明width，此时元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。

【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

胡哥有话说

12-17

949

引言书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。 padding 属性用于设置元素的内边距，其值可以是length、inherit，当然也可以是百分比。今天为什么会聊到padding-top设置百分比时的参考对象这个话题呢，这还要从一道不那么正经的面试题说起~ 一道不那么正经的css布局面试题在对面，一本正经的面试官和蔼可亲的说道：我们来道简单的面试题，写写代码吧。你一脸微笑的说道：好哒。题目须知：页面中有一个元

padding-bottom百分比，进行占位和高度自适应

qq_37167086的博客

01-13

4341

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。利用这个知识点我们可以进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。因为高度都是被内容撑开的，一般不定，那么通过百分比来设置高度，就变得不是很实用。对于图片等资源来说，加载是需要时间的，由于高度被图片撑开的过程，不可避...

css3 margin-top:% 百分比以谁为标准的问题

赤贯妖星

06-09

3250

<!DOCTYPE html> <html> <head> <title>定位</title> <style> *{ margin:0px; padding:0px; } .container{ ...

关于margin与padding设置百分比的问题

境界线上的地平线

07-26

1067

margin 与 padding 设置为百分比 之前一直认为 margin-top 和 margin-bottom 设置百分比以父容器的高度计算，而 margin-left 和 margin-right 设置百分比以父容器的宽度计算，直到今天群里一个群友问 boostrap 中的栅格系统是如何设置 margin-top 百分比以宽度计算的? 原因是他发现设置的 margin: 10%...