margin设置百分比

最新推荐文章于 2022-03-12 17:45:06 发布
最新推荐文章于 2022-03-12 17:45:06 发布
阅读量895 收藏
点赞数
分类专栏： web 文章标签： margin 百分比
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_15462/article/details/82637647
版权

margin，元素的外边距，规定了元素与元素之间的间距，一直以来都是这么用的

margin: 10px 20px 15px 30px;    定义上右下左的边距

margin:0 auto; 定义居中

 

直到最近发现它和width,height什么的属性一样，也可以设置百分比。那这个百分比是相对谁的呢？

 

<!doctype html>
<html lang="en">
	<head>
		<title>Document</title>
		<style>
			.container{
				width: 500px;
				height: 300px;
				border: 1px solid red;
				margin: 30px auto;
			}
			.content{
				width: 100px;
				height: 50px;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content"></div>
		</div>
	</body>
</html>

 效果如下


 蓝色div没加margin属性，现在加上margin属性看看效果：margin-left: 50%;


 显然左边距是父元素宽度的50%

 

现在尝试margin-top: 50%;

 显然上边距的距离依然是父元素宽度的50%;

也就是说百分比是相对父元素的宽而言的，不管水平方向还是垂直方向。

 

那如何让其相对父元素的高度来计算呢

给父元素加上  -webkit-writing-mode: vertical-lr;更改其书写方向，关于writing-mode的用法，这里不作叙述，有兴趣参照css参考手册中 “属性” -> “书写模式”

 明显，此时百分比是按照父元素高度来计算的，只是此时父元素的书写模式已改为竖直方向。

 


 

iteye_15462
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
float元素设置百分比宽和margin自动换行问题
01-08
问题：若两个内层盒子宽度设定为50%，则加上间隔15px会超出父容器就会自动换行；若两个内层盒子宽度设定为小于50%，则... margin: 0; padding: 0; font-family: arial; color: #777; } .cont
每天一个小知识（1）
qq_19594239的博客
09-15 136
margin-top的影响 举个栗子：父级整体高度为400px，子元素second为高度的一半，想要去将子元素放到下一半，使用margin-top:50% 发现不是在下一半而是距离底部有一定的距离，常规思想来想50%不就是一半嘛，不应该站一半的高度？ <body> <div class="first"> <div class="second"> </div> </div> </body&g
padding，margin百分比 详解及内外边距问题
liulei21的专栏
10-19 1407
今天早晨被同时问及一个面试的题；说一个盒子给定宽度为500px，而padding-top为20%，则盒子的高度是多少，瞬间蒙了：然后去测试了下，正好今天离职没啥事认真研究下边距问题 首先说一下padding-top，padding-bottom，margin-top，margin-bottom为百分比时是相对与父元素的 w3school规定 内边距的百分比数值 前面提到过，可以为元素的内边...
margin-top:3%，这个百分数是相对于谁的？
dongdaxiaopenyou的博客
09-08 1531
相对于父元素的width 是的你没有看错，是width，不是height padding和margin无论left还是right还是top还是bottom都是相对于父元素的width的  
当margin用百分号（%）时，数值是以谁为基准？
weixin_33970449的博客
10-01 656
今天做了一个demo，自己用原生的js写了一个轮播图，那么问题来了，当你用百分号表示margin-left的时候，他取得百分号的数值是以谁做为基准而取得值呢？子元素和父元素的width都是百分号表示， 比如一个很简单的额例子了，当一个div里面有一个div时，下面我就通过2个简单的demo来解释这个问题 1、如果父元素div大于里面的子元素di...
很少朋友知道的margin 百分比是按参照物来计算的
09-25
margin 百分比是按参照物来计算滴，你不知道吧? 下面有个示例，大家可以参考下
CSS 之margin知识点(必看)
12-13
1.margin的百分比值普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的。 这里我们在图片外面设置一个宽高分别为800 * 600的容器。设置img{ margin: 10%; } 结果如下 　结果margin值都是 800 * 10% = ...
细说CSS中margin属性的使用
01-19
本文着重描述关于 margin，我们日常不太容易发现的“坑”。 盒模型 接触过 CSS 的人应该都知道 CSS 的盒模型： ...1、如果 margin 的值是百分比，则是相对于父元素的内容盒宽度来计算的，即使 margin-to
Margin属性详解（WPF）
weixin_46433786的博客
11-16 3594
margin属性代表该控件对于其他控件的距离 例如 : margin=“10” 代表此控件在上下左右任一方向对于其他控件的距离都为10像素; margin=“10，0” 代表此控件在左右、上下两个方向对于其他控件的距离都为10像素; margin=“10,20,30,40” 代表此控件在左上右下四个方向对于其他控件的距离分别为10,20,30,40像素。 ...
关于padding和margin的百分比
banxia561的博客
06-09 539
最近随手习惯性的写了个样式margin-top: 10%; 本意是想它里上面的高度是现有父节点高度的10%，但事实并非如此。它离上面的高度始终是比预期的多出许多，才着重的研究起来这个属性的具体算法。经过各种尝试，发现这个百分比是针对的父元素的宽度，并不是高度，知道真相的我大吃一惊，所以再捋了捋。 首先在dom元素的高度，大部分都是没有指定的，所以它真正的高度是由里面的内容撑起来的，也就没有所谓高度的概念，另外高度的这个属性也是不会自动继承的，除非你给它设定继承才会。所以高度这东西的不确定性太多，不太方便用
margin值类型为百分比
小样
11-10 2320
margin的值类型有两个 1、px（像素） 2、%（百分比） 这里主要描述当margin的 值为百分比的时候， 会出现的一个你意想不到的情况！<div class="container"> <div class="mg_top"></div> </div><style type="text/css"> .container{width: 600px ;hei
css【详解】—— margin属性（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 2969
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
css margin 百分比
火星男孩的分享空间
05-21 230
参考： css中margin属性值百分比的使用 菜鸟教程： CSS margin(外边距) 菜鸟教程： CSS margin 百分比 css margin 百分比 ： 规定基于父元素的宽度的百分比的外边距 writing-mode：属性定义了文本在水平或垂直方向上如何排布。 writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr horizontal-tb：水平方向自上而下的书写
Margin在WPF中的用法
lqiqil的博客
02-04 1230
这个点原作者写得不错 Margin是用来表示控件4条边到所在控件的距离，格式如：Margin=“1,2,3,4”,1代表到left值，2代表到top值，3代表到right的值，4代表到bottom的值。 但margin与 HorizontalAlignment，VerticalAlignment，Height，Width 这4个参数有关： 当HorizontalAlignment设定left时，margin取left的值，right的值就不起作用了。如果定义right，那么margin取right的值，le
Margin 在WPF中的用法
cxu123321的博客
10-21 1497
Margin 在WPF中的用法 Stevenzhu18 Margin是用来表示控件4条边到所在控件的距离，格式如：Margin="1,2,3,4",1代表到left值，2代表到top值，3代表到right的值，4代表到bottom的值。 但margin与HorizontalAlignment， VerticalAlignment， Height，Width 这4个参数有关： 当HorizontalAlignment设定left时，margin取left的值，right的值就不起作用了。如果定义ri.
C# WPF中控件的Margin属性
音尘啊
12-08 3452
在WPF中，控件的Margin属性是一个常见的属性 通过“Thickness”方法可以看见 所以四个参数对应的为：左上右下 例如： 就是有个控件与之相邻的控件的间距为左边距10，上边距11，右边距12，下边距13。 Margin="10,11,12,13" 当Margin只有一个参数的时候，意思是左上右下的边距都是一样的 例如： 这个就是左上右下的边距都是10个像数(px)单位 Margin="10" ...
CSS padding和margin百分比的使用和细节
qq_52340302的博客
03-12 1367
padding和margin作为CSS最常用的属性之一，它的用法想必大家都不陌生，但它的值除了数值之外，还有一个百分比！ 数值很简单，输入多少那么padding和margin的值就是多少。那么百分比呢？ 百分比对应的值是根据父元素的宽度来决定的，如果没有就继续往上级去查找，注意：不管是水平还是垂直的padding和margin都是由父辈的宽度来决定。 下面以padding来举个例子： <style> .box { width: 200px; height: 200
用margin设置边距
最新发布
07-15
要使用 CSS 中的 margin 属性来设置元素的边距。margin 属性可以设置元素的上、下、左、右四个方向的边距。下面是一个示例： ```html <!DOCTYPE html> <html> <head> <style> .box { width: 200px; height: 200px; background-color: lightblue; margin: 20px; } </style> </head> <body> <div class="box"> <!-- 这是一个带有边距的盒子 --> </div> </body> </html> ``` 在上面的示例中，我们使用了 margin 属性为具有 "box" 类的 div 元素设置了 20 像素的边距。这将在 div 元素的周围创建一个空白区域，使其与其他元素保持一定的距离。 您可以根据需要调整 margin 的值来更改边距大小。还可以使用不同单位（如像素、百分比等）来指定边距的大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值