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

最新推荐文章于 2024-09-06 21:32:37 发布
最新推荐文章于 2024-09-06 21:32:37 发布
阅读量3.5k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33574890/article/details/78002158
本文解答了关于CSS中使用百分比设置margin的问题。通过实际案例说明，margin的百分比值是相对于其包含块的宽度进行计算的，并且适用于所有margin属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我在牛客网刷题时候碰到过一次这个问题，实际操作中也遇到一次。

真相就是：

可以对margin设置百分比，百分数是相对于包含块的width计算的，不管是margin-top，margin-bottom，margin-left还是margin-right（padding也是同样道理。）

猫不在
关注
【前端之旅】CSS三万字总结
请你喝杯Java
11-16 2829
一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Node.js、Vue、axios、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。 【前端之旅】Web基础与开发工具 【前端之旅】HTML 大总结 CSS 三万字总结一、CSS简介1、什么是CSS2、CSS的好处及作用3、CSS的初体验二、基本用法1、CSS语法模板2、CSS引用方式2.1 行内样式2.2 内部样式2.3 外部样式2.4 引入方式总结3、选择器3.1 标签选择器3.2 .
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7194
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
很少朋友知道的margin 百分比是按参照物来计算的
09-25
margin 百分比是按参照物来计算滴，你不知道吧? 下面有个示例，大家可以参考下
css中margin属性值百分比的使用
热门推荐
三三
02-21 1万+
margin使我们使用得很频繁的一个属性，用来设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，可以有 1 到 4 个值。例子：margin:10px 5px 15px 20px; 说明： 属性值 描述 auto 浏览器计算外边距 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的外边距 inheri...
`margin` 或 `padding` 使用百分数，都基于父盒子的宽度
weixin_63681863的博客
09-06 605
margin和padding的百分比计算，无论是水平方向还是垂直方向，都是基于父容器的宽度。
css-margin与百分数的关系
weixin_34168880的博客
12-28 196
可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理） 如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，...
margin值类型为百分比
小样
11-10 2451
margin的值类型有两个 1、px（像素） 2、%（百分比） 这里主要描述当margin的 值为百分比的时候， 会出现的一个你意想不到的情况！<div class="container"> <div class="mg_top"></div> </div><style type="text/css"> .container{width: 600px ;hei
-百分比设置margin和padding,line-height,height
rocktanga的博客
02-14 1082
用百分数设置margin和padding 用百分数设置margin和paddding的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算,如 .demo1{ width:980px;height:500px; } .demo1 div{margin:10% 5%; } // 相当于margin:98 49; 为什么都是以宽度为标准 1、高度持续增加 第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器.
CSS中的一些百分比相关调试经验分享
12-13
百分比值表示一个数值相对于另一个数值的比例，这个参照值通常与元素的特定属性有关。例如，`width`和`height`属性的百分比值是相对于元素的包含块（通常是其父元素）的宽度和高度来计算的。这意味着，如果一个元素...
.text::before{ content: ''; float: right; height: 100%; margin-bottom: -20px; }
最新发布
04-09
另外关于百分比形式的高度声明，在绝对单位尺寸未知的情况下依赖于相对参照物的实际大小计算得出最终呈现数值。 ```python def css_layout_analysis(): """ This function is a placeholder to illustrate how ...
margin设置百分比
qq_35134066的博客
01-23 4063
margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。 看如下示例： &lt;style&gt; .fu { width: 400px; height: 300px; background: blue; overflow: hidden; } ...
css——百分比设置margin（外边距）
start_XUEBA的博客
11-15 2500
对元素的margin（外边距）可以设置百分数值。 对元素的 margin（外边距）设置百分数值：百分数是相对于父元素的width来计算的。 HTML： <div class="contain"> <div class="d1"></div> </div> css： .contain{ width: ...
margin的百分比
iteye_1478的博客
11-29 125
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%
CSS margin百分比
man_tutu的博客
02-15 1018
margin百分比取值
margin-top的值为%,是相对于谁的百分比
abc589721的博客
01-22 2210
以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中，但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现，margin-top的%值是相对于父元素的宽度的。 也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。 用top：50%，配合transform:tr...
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 5067
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
margin-top使用百分比还是像素
xiaoouh的博客
02-17 623
当外层的容器的高是采用像素时，那么内层的容器采用像素的margin-top, 如果外层是百分比，那么内层采用像素
margin padding是以什么为参照物
liusixsixsix的博客
08-13 362
什么是异步 异步，是相对于同步而言的。我们在使用Vue时，使用到的组件大多为同步组件。在vue实例第一次执行渲染的过程中，已经生成了组件构造器。而异步组件则是在用到该组件时，异步通过请求去拉取对应组件的js（这里需要和webpack的import相结合）。当对应的js加载完成后，获取到异步组件的配置项，从而创建组件构造器。再通过forceRender，强制依赖它的vm实例重新触发渲染函数。 当用户进入时，如果把所有的组件都进行加载，会导致用户体验下降，等待时间过长。所以就需要使用异步组件。 如何使用异步组件
margin-top:3%，这个百分数是相对于谁的？
dongdaxiaopenyou的博客
09-08 1609
相对于父元素的width 是的你没有看错，是width，不是height padding和margin无论left还是right还是top还是bottom都是相对于父元素的width的  
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值