margin-left和left属性区别

最新推荐文章于 2022-03-25 14:41:44 发布
最新推荐文章于 2022-03-25 14:41:44 发布
阅读量353 收藏
点赞数
分类专栏： html+css+js学习问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48270515/article/details/108439862
版权

忘记给父元素添加定位，子元素设置left:180px；
相对于浏览器右移180px
设置margin-left:180px则相对于父元素右移180px

因为直接在css中设置left生效的前提是必须设置父容器position:absolute或relative，如果不设置则会显示为最近一个定位的父对象左边相关的位置

而margin-left属性的设置则不需要定位

迪仙女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
margin-left与left
CSDN技术支持
11-13 2869
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1 { width: 300px; height: 30
css中margin-left和left的区别
米小豆的博客
05-16 4483
1,left left只要在设置 过定位位置position的情况下生效, 且 position: relative;或者position: absolute; 2,margin-left margin-left是元素的外边距
margin-left和left的区别
qq_39429962的博客
10-11 782
margin-left：只有元素的position属性是“relative”时起作用，在某些浏览器中position属性时“absolute”时也会起作用，但是官方定义上是应该只有“relative起作用”。 left：在position为“absolute”或“fixed”时起作用。 关于position的属性详解详见：position属性详解...
HTML里margin-left和left的区别
qq1206908474的专栏
10-14 2114
设置margin-left则只会出现在父对象的左边的相对位置，不考虑是否设置了position。
css中margin-left与left的区别
热门推荐
tomatozq的专栏
01-05 3万+
研究下拉菜单和弹出菜单时比较所得： 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative，如果不设置则会显示为最近一个定位的父对象左边相关的位置： 测试代码： 测试效果： 不设置红线框的position，设置蓝线框的position，绿线框的位置： 设置红线框的position，设置蓝线框的positio
left和margin-left的区别
在安静的地方安静地生活
06-05 5911
一、在css中设置left生效的前提是必须设置父容器position:absolute或relative，如果不设置则会显示为最近一个定位的父对象左边相关的位置： <div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;"> <d...
position理解、margin-left与left的区分
风一样的少年
08-24 1万+
在W3C中，如是说： position 可能的取值： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 &amp;quot;left&amp;quot;, &amp;quot;top&amp;quot;, &amp;quot;right&amp;quot; 以及 &amp;quot;bottom&amp;quot; 属性进行规定。 fixed 生成绝对定位的
css margin-left在IE6下的问题的解决方法
09-25
在CSS布局设计中，`margin-left`属性是一个用于设置元素左边距的关键属性，它允许开发者在页面上控制元素之间的空间。然而，对于较老的Internet Explorer（尤其是IE6）浏览器，`margin-left`存在一些兼容性问题，这...
margin-left和right失效(斯芬克斯)之谜
01-24
一般很多人遇到的margin失效都是纵向上面...那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。 我们来看看具体的失效代码：
IE6 float:left margin-left出现两倍像素
09-25
一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)，那么会自动的加一倍变成30px,接下来介绍如何解决此问题，感兴趣的朋友可以了解下
js三栏布局
hcyhcyhcy_的博客
03-25 1171
一 先center center宽100%。左中右浮动 左右margin-left上去。 container设置左右padding。三个position:relative， 左右left right。 先定义好header和footer的样式，使之横向撑满。 在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。 三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满 这样因为浮动的关系，center会占据整个conta
margin-left是什么意思（收藏）
lin123_00的博客
04-27 1282
margin属性是用于设置元素的外边距，所以margin-left 属性就是用于设置元素的左外边距。下面我们就来看看margin-left的详细内容。 ——各位小伙伴在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料笔记视频，包括HTML/CSS/javaScript/Vue等多个web前端基础知识点进阶干货需要的可以免费分享给大家，有需...
js改变div属性
qq_28147861的博客
10-22 8088
body{ margin: 0px; padding: 0px; } #show { background: red; width: 100px; height: 50px; float: left; margin-top: 15px; margin-left: 10px; color: white;
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
.animated{ -webkit-transition:margin-left 0.2s ease-in-out; -moz-transition:margin-left 0.2s ease-in-out; -o-transition:margin-left 0.2s ease-in-out; -ms-transition:margin-left 0.2s ease-in-out; transition:margin-left 0.2s ease-in-out; }
07-17
这里将 `margin-left` 属性的过渡效果设置为持续时间为 0.2 秒，动画速度曲线为 ease-in-out。 2. `-moz-transition` 属性定义了在 Firefox 浏览器中应用过渡效果的属性、持续时间和动画速度曲线。与 `-webkit-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值