CSS中关于margin的理解误区
2016-01-19 13:12
531 查看
思考一
在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离。但是实际是:相对于自身原来的位置偏移。
举个例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- 规定字符集的编码为utf-8 --> <meta charset="utf-8"> <style type="text/css"> body { position: relative; padding: 0px; height: 500px; } #Red { width: 200px; height: 80px; border: 1px solid red; position: relative; } #Green { width: 200px; height: 80px; border: 1px solid yellowgreen; margin-top: 10px; } </style> </head> <body> <div id="Red">Red</div> <div id="Green">Green</div> </body> </html>
其表现为:
但是如果我把Red这个div设置下margin-top:10px
此时Red会往下移动10px,如果按照最开始的理解:离相邻元素之间的距离。那么Green这个div也应该往下移动,但是实际上却不是如此,见下图
Green是没有移动的!
可以得出:margin是相对于自身原来的位置偏移。
思考二
下面是我在查看笔记的时突然顿悟的:结论:margin这种定位方式是会影响到后续的兄弟元素的,而relative这种定位方法是不会影响后续兄弟节点的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- 规定字符集的编码为utf-8 --> <meta charset="utf-8"> <style type="text/css"> body { position: relative; padding: 0px; height: 500px; } #Green { width: 200px; height: 80px; border: 1px solid yellowgreen; float: left; } #Red { width: 200px; height: 80px; border: 1px solid red; float: left; /*情况1*/ margin-left: 20px; /*情况2*/ /*position: relative;*/ /*left: 20px;*/ } </style> </head> <body> <div id="Red">Red</div> <div id="Green">Green</div> </body> </html>
注意查看Red这个div的CSS的2种情况。
第一种情况:margin-left
第二种情况:position+left
margin和position均未脱离文档流,但是他们导致的结果还是不同的,我个人更偏向于使用margin定位,因为好理解。
相关文章推荐
- CSS样式选择器及优先级
- css Gradients(渐变)
- css visibility和display属性区别
- CSS3一般媒体查询
- 详解CSS position属性
- CSS中常见的BUG调试
- google官方教程 展示如何自定义可选择列表项样式。
- 自定义Toast样式
- Angular根据获取值不同给不同的样式
- CSS cursor属性(w3school)
- 刷新页面更换CSS样式表-对网上document.write方式的修正
- CSS常用属性之段落
- CSS常用属性之文字样式
- 去掉segMentedControl的边框和改变选中字体的样式
- JS获取CSS样式(style/getComputedStyle/currentStyle)
- CSS导航下拉菜单被JS幻灯片挡住的…
- CSS3之动画
- 《css设计指南》 读书笔记 二
- 好玩的CSS点点
- CSS实现单行、多行文本溢出显示省略号(…)