css中top和margin-top的区别

最新推荐文章于 2024-05-03 14:55:36 发布
最新推荐文章于 2024-05-03 14:55:36 发布
阅读量1.9k 收藏
点赞数
分类专栏： css 文章标签： css top margin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boyzhoulin/article/details/38980019
版权

最近学习CSS，碰到了这个问题，所以记录下来。

margin-top (或者其他margin)其实是和文档流(document flow)相关的。当你为某个元素加入margin属性时，那么接下来的这些元素都会被移动。


如果你不想影响到文档流里的其他元素，那么就配合使用top和position。

当position是relative时，元素在文档流里依然占有缺省的位置。此时top只影响这一个元素。

当position是absolute时，那么这个元素就完全从文档流里面剥除了。此时top也只影响这一个元素。

boyzhoulin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中子元素设置margin-top为什么影响了父元素
12-11
本文介绍了css中子元素设置margin-top为什么影响了父元素，分享给大家，具体如下： <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor:
scroll-view里的元素设置margin-top属性，出现滚动条
weixin_48604432的博客
05-27 687
1.在循环列表的时候明明数据还没沾满整个屏幕，但是出现了竖行滚动条 <scroll-view scroll-y="true" style='height:{{winHeight - 100}}px' class='scrollcolumn'> <view style="content: ''; overflow: hidden;"></view>//加一个空元素就好了 <view wx:for="{{datalist}}" :key='item.code'
CSS中的四种定位以及top和margin-top的区别
稀饭
09-01 1万+
CSS中一共有四种定位分别是默认，相对，绝对，固定 1，position：static，这种定位是默认的，一般没什么实际的作用。 2，position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 3，position：absolute，绝对定位，这种定位脱离文...
CSS——top和margin-top
chengzhangdewo的博客
10-12 422
1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。 ...
CSS margin-top,margin-bottom 的理解和应用
weixin_34293141的博客
11-18 931
margin的意思是元素的外边距区域值，即该元素外面要留白的距离。它的值可以设置为三种，一种是使用数值，例如：30px，还有一种是使用百分比（相对父元素的百分比），以及第三种：auto。下面用代码和效果说话。1，有如下结构<body> <divclass="page"> <divclass="containe...
css中margin-top和top有什么区别
前端知识库
05-10 3245
一、功能不同 margin-top：功能为设置元素的上外边距。 top：规定元素的顶部边缘。 二、特点不同 margin-top：允许使用负值。定义固定的上外边距。默认值是 0。 top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 三、总结 margin-top是你这个层的边距设置，是上边距，top是当css样式为绝对定位（即position:absolute; ）时，left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位
css中的四种定位以及top和margin-top的区别
热门推荐
lxiang222的博客
04-21 3万+
css中一共有四种定位分别是默认，相对，绝对，固定 position：static，这种定位是默认的，一般没什么实际的作用。 position：relative,相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置 position：absolute，绝对定位，这种定位脱离文档流，可以理解
【HTML/CSS】margin-top、top、以及position的总结
tonyzhang的专栏
07-09 2891
margin-top与top的区别 1、使用top、bottom、left、right的前提是本元素position被定义为relative、absolute和fixed中的一种，不能是static 2、使用margin-top、margin-bottom、margin-left、margin-right的元素的position可以是static、relative、absolute和fixed
重新认识margin-top和margin-bottom
gaohuanjie的专栏
11-18 1万+
重新认识margin-top和margin-bottom
php 中margin-top,margin-top是什么意思-css编程词典-php中文网
weixin_39788256的博客
04-02 1855
margin英 [ˈmɑ:dʒɪn] 美 [ˈmɑ:rdʒən]n.边缘，范围;极限;利润，盈余;(版心外)的空白vt.留边;成为…的边;加边于，围绕;为…加旁注复数： marginstop英 [tɒp] 美 [tɑ:p]n.顶，顶部;(箱子)盖，(书页等的)上栏;首席;陀螺adj.最高的;顶上的;头等的;最大的vt.形成顶部;达到…的顶端;处于…的最前头;领导vi.总结;超越;高耸;结束...
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一个关于css中margin-right没有效果的问题
12-13
今天在群里面，有人抛出了一个关于css中margin-right没有效果的问题。CSS代码和HTML代码如下： 复制代码代码如下: .style1{ width:400px; height:440px; background-color:red; border:5px solid silver; margin-...
父元素与子元素之间的margin-top问题(css hack)
01-19
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: ”box1″> ”box2″>...
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
秋刀鱼不做梦的编程日常
05-01 973
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
CSS:css简介
qq_55630615的博客
04-28 322
给html设置样式,美化css,实现结构和样式的分离。
HTML_CSS学习：常用文本属性
最新发布
m0_74972727的博客
05-03 400
【代码】HTML_CSS学习：常用文本属性。
css代码的定位及浮动
2401_83693610的博客
04-28 471
上次，我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。
vue3中使用animate.css
四岁爱上了她的博客
04-28 272
main.js注册：import ‘animate.css/animate.min.css’注意：animate__animated 这个类名是固定的，然后后面再跟上一个动画的类名。注意：import ‘animate.css’ 不适合在vue3项目。引入：npm install animate.css --save。使用：class=“animate__animated 动画名称”
c3 笔记8 css排版技巧
weixin_63492023的博客
05-03 171
相关内容：边界、边框、位置（absolute、relative、static）、overflow、z-index、超链接、鼠标光标特效、……©《HTML5+CSS3+JavaScript网页设计》陈婉凌编，清華大学出版社。margin:上边界值 右边界值 下边界值 左边界值。
css margin-top
06-12
CSS的margin-top属性是用来控制一个元素的顶部外边距的大小。它可以设置为具体的像素值、百分比值、em值或者auto。 例如，如果你希望一个元素的顶部与其父容器的顶部相距20像素，可以使用如下代码： ``` div { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值