关于给子盒子设置marign-right 无效果（小白的一点看法）

最新推荐文章于 2021-05-26 15:17:53 发布
最新推荐文章于 2021-05-26 15:17:53 发布
阅读量256 收藏
点赞数
文章标签： marign-right
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40215089/article/details/89609992
版权

刚才在给一个子盒子设置marign-right,居然发现啥效果都没有，又写了个demo发现设置marign-left是有效的，刚开始以为是因为子盒子右边的marign远大于设置的marign值导致没效果的，但是当把子盒子宽度设置和父盒子一样的宽度时，发现还是没效果，最后发现，原来W3C默认元素是左排列，并不是设置的marign没效果，设置float-right，脱离文档流，效果就出来了。。。

qq_40215089
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS之“绝对定位”的盒子使用margin:0px auto；不能实现水平居中的解决方案
鸭绒的博客
07-09 2552
在盒子实现水平居中的布局中，我们经常直接使用margin:0px auto;来实现居中，在很多时候的确可以一句这样的代码就实现了，但在绝对定位的盒子中，这是不起作用的。 1.根据代码测试是否真如上面所说： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.
CSS - 浮动元素的margin-left和margin-right
伏城之外的博客
07-12 1万+
marigin-left和margin-right理解 margin-left：“盒子”元素的左外边距，当属性值增大，元素表现为向右移动，该属性值减少，元素表现为向左移动。 margin-right："盒子"元素的右外边距，当属性值增大，元素表现为向左移动，该属性值减少，元素表现为向右移动。 float:left和float:right理解 float:left 元素变为浮动元素，并向左浮动 float:right 元素变为浮动元素，并向右浮动 单纯的float:left 当前有如下情况.
子元素 margin-right 失效
zbz_index的博客
05-26 255
使用flex布局做横向滚动时，最后一个子元素 margin-right 失效 参考了 许多篇文章发现没效果 如添加父盒子 、 从flex改成float 最后 发现给父盒子加个 float: left; 就好了- 学艺不精 ，只能给出解决办法 ，至于为什么就不知道了 ...
margin-left是什么意思
lin123_00的博客
04-27 2万+
margin属性是用于设置元素的外边距，所以margin-left 属性就是用于设置元素的左外边距。下面我们就来看看margin-left的详细内容。 margin-left属性和margin属性一样所有的主流浏览器都支持这个属性 margin-left属性的属性值可以使用负值，下面我们来看margin-left有哪些可用的值 auto：浏览器设置的左外边距。 length：定义固定的左外...
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 9127
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
绝对定位的盒子设置margin-right为什么不起作用？
m0_48270515的博客
08-25 2015
.test1{ position: absolute; width: 100px; height: 100px; background-color: pink; left: 50%; margin-left: -100px; } ```这里盒子的左边框先相对于浏览器的左边偏移50%（ left: 50%;） 再相对于浏览器的左边走-100px （ margin
Javascript实现信息滚动效果
12-09
本文实例为大家分享了js信息滚动效果的具体代码，供大家参考，具体内容如下 向上无缝滚动： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&...
emma.css：:fork_and_knife:Emma.css {emmet-like：实用工具类； }
02-03
嘛嘛marign：自动； .m0 00 边距：0; ― 5米边距：-5px; .w1 w1 宽度：1px； .h100p h100p 高度：100％; .mah50vh mah50vh 最大高度：50vh； .ff-t - 字体家族：“ Times New Roman”，时代，巴斯克维尔，佐治亚州，...
grunt-split-locales
07-10
reset { marign : 0}. common-style { color : # 333 ;}html [ lang = "de" ] . common-style { color : yellow;}html [ lang = "ru" ] . common-style { color : red; font-weight : bold;} 在这种情况下，插件...
div使用margin:0px auto不居中的原因分析及解决
09-25
解决这个问题的一种方法是在`<body>` 标签内设置`text-align: center`，这会使整个页面内容居中，然后通过设置子元素的`margin: 0 auto` 来使其在父元素中居中。 另一种解决方案是添加文档类型声明（DOCTYPE），如`...
HTML元素居中显示的方法
寄蜉蝣于天地，渺沧海之一粟
09-13 967
1、固定宽度width属性，将margin-left和margin-right设置为autodiv{ width:300px; margin-left:auto; marign-right:auto; } 优点：简单易懂，兼容性强 缺点：扩展性差，对未知宽度属性的组件无法设置 2、
css常用属性
u014644455的博客
05-03 323
背景 blackground-color 背景颜色 padding 内边距 blackground-image：url("iamage/bg.png"); 背景图片 blackground-reprt 是否允许重复 blackground-position：100px 100px 图片起始位置 blackground-attachment 设置背景图片是否随着内容滚动3 blackg
解决img与父盒子底部空白间隙问题
weixin_46390987的博客
02-26 873
在一个父盒子里面有一个img时，发现在图片底部与父盒子底边框总是有一小段空白的距离， 如图： 怎么解决呢？可根据需要选择对应的解决方法。 方法一：给父盒子添加font-size:0; 方法二：设置img的属性vertical-align:top/middle/bottom; 方法三：img设置浮动，父元素清除一下浮动 方法四：给img设置display：block； 用上面方法之后效果图：...
css布局：为什么margin-right不起效果，如何居中显示。
scarlett1017的博客
05-08 2847
css布局：为什么margin-right不起效果 ，以及如何居中显示。 不清楚这个问题其实是没有弄明白网页水平布局的一个小原理 假设这里有一个div，在这个div盒子里面有一个小的div盒子 （这里大div盒子称作父元素，小的div盒子称作子元素） 满足一个公式 子元素中的：margin-left，margin-right，padding-left，padding-right，border-left，border-right，width ，相加会等于父级元素的宽。 那么为什么设置了margin-left
一个关于css中margin-right没有效果的问题
热门推荐
梦想还是要有的，万一实现了呢
11-05 2万+
转载自：http://www.jb51.net/css/173943.html
关于margin-right失效的问题
张大晴的博客
05-16 1万+
关于margin-right失效的问题：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值