margin外边距合并问题
来源:互联网 发布:淘宝网首页小音箱 编辑:程序博客网 时间:2024/05/18 01:12
margin属性:
所有浏览器都支持 margin 属性。这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度,也可以分别设置个边的外边距。margin是一个复合属性,包括:margin-top、margin-bottom、margin-left、margin-right
基本使用:
例如:margin:10px 20px 40px 30px;----表示:上/右/下/左外边的大小分别是10、20、40、30
margin:10px 20px 40px ;----表示:上/左右/下,上、右、下、左外边的大小分别是10、20、40、20
margin: 20px 30px;----表示:上下/左右,上、右、下、左外边的大小分别是20、30、20、30
margin:10px ;----表示:上、右、下、左外边的大小都是10。
合并问题:
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
块级元素的垂直相邻外边距会合并:出现合并的情况只有一种设置:上面的块级元素设置margin-bottom;下面的块级元素设置margin-top。两个的属性值可正可负。
case1:当两个属性值均为正值或者均为负值时,取绝对值较大的那个数值。若最终结果为正值,那这两个块级元素之间有空隙;若最终结果为负值,那这两个块级元素之间出现覆盖,下面的会覆盖上面的,覆盖距离为最终结果的绝对值大小。
case2:当两个属性值有正有负时,取两个属性值之和,作为最终的结果。若最终结果为正值,那这两个块级元素之间有空隙;若最终结果为负值,那这两个块级元素之间出现覆盖,下面的会覆盖上面的,覆盖距离为最终结果的绝对值大小。
html代码:
<div class="box"> <div class="box1">1</div> <div class="box2">2</div></div>
例1:两个属性值均为正值,
.box1{ background:#26a9f9; margin-bottom: 30px;}.box2{ background:#ff4ef8; margin-top:20px;}
结果为:30px
例2:两个属性值均为负值,
.box1{ background:#26a9f9; margin-bottom: -30px;}.box2{ background:#ff4ef8; margin-top:-20px;}结果为:-30px,上面的被覆盖
例2:两个属性值一正一负,case1:
.box1{ background:#26a9f9; margin-bottom: 30px;}.box2{ background:#ff4ef8; margin-top:-20px;}
结果为:10px,也就是两个div之间有10px的间隙。例2:两个属性值两个属性值一正一负,case2:
.box1{ background:#26a9f9; margin-bottom: -30px;}.box2{ background:#ff4ef8; margin-top:20px;}
结果为:-10px,上面的被覆盖10px的高度。二:设置margin-top时,父级元素加border和不加border的效果。注意:父级元素加border和父级元素设置float的效果是一样的。
html代码:
<div class="box"> <div class="box1">1</div></div>css样式:
.box1{ width:100px; height:100px; background:#26a9f9; margin-top:40px; margin-left:20px;}
case1:父级元素不加border
case2:父级元素加border(或者浮动)效果图:
我在学习的过程中,一开始并没有总结过margin的使用过程中要注意的事项。只是会用而已。突然被问起这个,有点蒙蔽的赶脚,今天总结了一下,希望对以后初学者有帮助,也是对自己的警示。学习的过程中,学会和善于总结是多么的重要。先写到这,后续有内容会继续更新的。加油!
- margin 外边距合并问题
- margin外边距合并问题
- margin外边距合并的问题
- margin外边距合并
- margin外边距合并问题以及解决方式
- margin详解垂直外边距合并
- 外边距margin的合并原理
- 外边距合并问题
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题
- css中margin外边距合并问题讲解及实例演示
- css 外边距合并问题
- CSS外边距合并问题
- Margin的垂直外边距问题
- 深入理解BFC和外边距合并(Margin Collapse)
- BFC与margin-collapse(外边距合并)
- 小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
- CSS 外边距 margin
- margin负外边距
- 未来12个趋势
- (UVA)232
- 洛谷在线测试P1168_中位数
- Android--活动的启动模式
- 【Zookeeper】源码分析之网络通信(一)
- margin外边距合并问题
- CPU状态信息us,sy,ni,id,wa,hi,si,st含义
- Android项目中引用本地aar文件的方法
- 【未解决】next是什么?会在原地改变对象?
- iOS开发笔记(1) -- 利用弹出键盘时使视图跟随键盘上移
- Ruby的module 以及 require 和 include
- C#中类似c和c++语言的#define用法
- TCP,UDP,IP包头格式及说明
- String、StringBuffer与StringBuilder的区别