负边距在布局中的使用
来源:互联网 发布:mac战网如何更改地区 编辑:程序博客网 时间:2024/06/14 04:15
负边距即margin
属性的值设为负值,在CSS布局中时一个很有用的技巧。值为正的场景很常见,大家都很熟悉其表现
- 当
margin-top
、margin-left
为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与position:relative
的元素设置top、left后元素还占据原来位置不同 - 当
margin-bottom
、margin-right
设为负值的时候,元素本身没有位置变化,后面的元素会下移、右移
看几个应用场景
绝对定位元素
当元素被设置为绝对定位的时候其top、right、bottom、left值是指离最近的非static元素的距离,经典的垂直居中的一种方式正是利用的绝对定位元素的负边距实现的
<style>.wrap4{ position:relative; margin:10px; width:200px; height:200px; border:dashed 1px orange;}.wrap4 .content{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-50px; background:orange;}</style><div class="wrap4"> <div class="content"></div></div>
把元素设置为绝对定位,然后设置top和left为50%,这时候元素的上边、左边就到了父元素的50%处,再对元素设置其自身高度、长度一般的负边距,使元素中心移动到父元素中心,实现居中对齐
float元素
负边距对float元素的影响也是按照上面说的,不过有其特殊性,我们看个例子就很清楚了
浮动元素负边距
<style>.float{ overflow:hidden; width:280px; border:dashed 1px orange;}.float .item{ width:100px; height:100px; float:left;}.float .item:nth-child(1){ background:red;}.float .item:nth-child(2){ background:grey;}.float .item:nth-child(3){ background:blue;}</style><div class="float"> <div class="item"></div> <div class="item"></div> <div class="item"></div></div>
在一个宽度为280px
的div中右3个float:left
的子元素,宽度为100px
,由于一排放不下,最后一个陪移动到了下一行
我们对代码稍作修改
<style>.float{ overflow:hidden; width:280px; border:dashed 1px orange;}.float .item{ width:100px; height:100px; float:left;}.float .item:nth-child(1){ background:red;}.float .item:nth-child(2){ background:grey;}.float .item:nth-child(3){ background:blue; margin-left:-20px;}</style><div class="float"> <div class="item"></div> <div class="item"></div> <div class="item"></div></div>
第三个元素添加-20px
的负边距
这时候发现第三个元素移上去了,并且覆盖了第二个元素20px
,经典的多列布局正是利用此原理
多列布局
<style>.body{ width:500px; margin:10px; border:dashed 1px orange; overflow:hidden;}.wrap3{ float:left; width:100%;}.wrap3 .content{ height:200px; margin-right:100px; background:rgba(255,0,0,0.5);}.body .right{ width:100px; height:200px; float:left; margin-left:-100px; background:rgba(0,255,0,0.5)}</style><div class="body"> <div class="wrap3"> <div class="content"> Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div> </div> <div class="right">Right</div></div>
代码很简单
- 为content元素添加父元素,设置左浮动,宽度
100%
- content元素设置右边距,值等于right的宽度
- right左浮动,然后设置其宽度的负边距
本来right应该在第二行显示了,但是其宽度的左浮动使它到了第一行的最右边,覆盖了wrap的一部分,但是content有right宽度的右边距,覆盖区域没有内容,这样就实现了两列布局
PS. 其它此类更复杂的布局原理类似,感兴趣的同学可以看这里学40种。。。
普通元素
负边距对不同块元素的影响很有意思,我们通过几个例子来看一下
多列列表
<style>li{ line-height:2em;}.col2{ margin-left:150px;}.col3{ margin-left:300px;}li.top{ margin-top:-9em;}</style><ul> <li class="col1">aaa</li> <li class="col1">bbb</li> <li class="col1">ccc</li> <li class="col2 top">ddd</li> <li class="col2">eee</li> <li class="col2">fff</li> <li class="col3 top">ggg</li> <li class="col3">hhh</li> <li class="col3">iii</li></ul>
定义一个列表,三列显示
- aaa
- bbb
- ccc
- ddd
- eee
- fff
- ggg
- hhh
- iii
普通的做法我们肯定是通过浮动实现,通过刚才介绍的知识应该不难理解为什么这样也行。看起来在普通元素上没什么稀奇的
放大元素
什么?负边距还可以放大元素!!!
<style>.wrap{ width:300px; border:dashed 5px orange;}.wrap .inner{ height:50px; margin:0 -50px; background:blue; opacity:0.5;}</style><div class="wrap0"> <div class="inner0"> inner inner inner inner inner inner inner inner inner inner inner inner </div></div>
这个例子看起来平淡无奇,效果却很惊人,内层的div设置了水平的负边距后竟然变大了
PS. 效果能实现的前提是元素的宽度不能设置为auto
以外的值
带有右边距的浮动子元素列表
看到这种效果你第一想法是什么?会不会是子元素设置margin-right,在遍历的时候nth-child(3n)还要设置为0,看看利用上面知识我们可以怎样处理
<style>.wrap2{ width:320px; border:dashed 1px orange;}.wrap2 .inner{ overflow:hidden; margin-right:-10px;}.wrap2 .item{ float:left; width:100px; height:100px; margin:10px 10px 10px 0; background:blue;}</style><div class="wrap2"> <div class="inner"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></div>
我们没有设置nth-child(3n)的边距为0,而是通过负边距使父元素“变大”。
负边距是不是很有意思,不很了解的少年们学起来吧!
- 负边距在布局中的使用
- 负边距在布局中的使用
- calc在布局中的使用
- LinearLayout与RelativeLayout在布局中的使用
- [Windows Phone] StackPanel和Grid在布局中的使用
- Android 自定义View及其在布局文件中的使用示例
- Android 自定义View及其在布局文件中的使用示例
- Android 自定义View及其在布局文件中的使用示例
- 关于 android 权重 weight在布局中的理解和使用
- Android 使用代码指定view组件在布局中的属性
- translate3d(x,y,z)在页面布局中的使用
- 布局和文件流(绝对定位和浮动在布局中的使用
- QGridLayout布局在QScrollArea中的布局问题。。
- addStretch在布局中的作用
- 空间在布局中的对齐
- 程序在内存空间中的布局
- Zend Framework 中的布局使用
- Zend Framework 中的布局使用
- BuildWall.cs
- 第三十四将项目四 分数的累加
- javascript 数据类型
- Javascript x 网络爬虫
- nyoj
- 负边距在布局中的使用
- 区分五种io模型
- kill(),raise(),abort()函数向进程发送信号
- 使用border做三角形
- U-BOOT-2016.07移植 (第二篇) 添加单板
- 指针的赋值运算
- 前nginx后Apache+Node反向代理
- 线段树练习题一
- 指针删除后一定要将指针赋为0