我知道你不知道的负Margin
来源:互联网 发布:能源强度矩阵 编辑:程序博客网 时间:2024/05/08 14:40
HiCSS — 海玉’s Blog
理论为辅,实战为主,关注前端开发,注重用户体验。
- Home
- About Me
Grab the RSS feed
关于HiCSS
这里是一个纯粹的前端技术分享网站,也是我记录工作体会和生活琐事的地方。
理论为辅,实战为主,专注于前端开发。相信你在这里能够发现自己需要的东西,同时也希望你能前来一起分享你的知识。谢谢!
热门文章
- 用Margin还是用Padding - 67,568 views
- 不要告诉我你懂margin - 59,109 views
- overflow知多少 - 34,932 views
- 我知道你不知道的负Margin - 33,885 views
- 关于23种设计模式的有趣见解 - 26,643 views
- 攻略强制换行与强制不换行 - 23,887 views
- CSS设计模式之三权分立模式篇 - 23,701 views
- 引爆你的Javascript代码进化 - 19,231 views
- 拿什么来拯救你,我的table - 13,372 views
- CSS实战——纯图片圆角Box的实现技巧 - 12,504 views
文章分类
- Html/CSS (9)
- Javascript (3)
- 交互体验 (2)
- 杂谈 (1)
- 触类旁通 (1)
近期评论
- lili on [转] Web前端研发工程师编程能力飞升之路
- lili on 引爆你的Javascript代码进化
- Node4Fun on [转] Web前端研发工程师编程能力飞升之路
- Node4Fun on 引爆你的Javascript代码进化
- Node4Fun on 引爆你的Javascript代码进化
文章归档
- June 2012 (1)
- January 2012 (1)
- November 2011 (1)
- October 2011 (1)
- September 2011 (1)
- August 2011 (1)
- June 2011 (1)
- May 2011 (3)
- April 2011 (6)
前端链接
- cloudgamer
- 张鑫旭:鑫空间-鑫生活
- 怿飞:PlanABC
JAN03
Post Info
- 海玉
- 8:56 PM
- 34 Comments
- 永久链接
- 33,885 views
tags
- Html/CSS
- margin
我知道你不知道的负Margin
分类: Html/CSS | 转载请注明: 出自 海玉的博客
本文地址: http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/
现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。
负margin理论:
在说明什么是负margin之前,你得清楚margin是个啥么玩意,如果还不清楚可以先阅读本人的前一篇文章《不要告诉我你懂margin》,预补下知识,回头再读这篇文章,相信俩篇文章都能给你带来不少的收获。
为了形象、易懂的解释负margin,我们将引入W3C上没有的参考线的说法。何谓参考线?参考线就是 margin移动的基准点,此基准点相对于box(自身)是静止的。而margin的数值,就是box相对于参考线的位移量。
一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。top和left是以外元素为参考,right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形,如果是负值则位移方向相反。
上面段文字和图片或许挺难理解,我们来看实际代码:
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>Margin参考线举例说明</
title
>
<
style
type
=
"text/css"
>
*{margin:0; padding:0;}
.wrap{width:400px; border:5px solid #aaa;}
.example{width:200px; height:200px; background:#CCCCFF;}
.normal{width:200px; height:200px; background:#CCE8CF;}
/* 添加或者注释掉下面的margin属性,查看前后差别
.example{margin:-10px 20px -30px 40px;}
*/
</
style
>
</
head
>
<
body
>
<
div
class
=
"wrap"
>
<
div
class
=
"example"
>example元素:margin参考线举例说明文字,请查看此元素由于margin的变化所移动的位移量。</
div
>
<
div
class
=
"normal"
>一个普通的Box</
div
>
</
div
>
</
body
>
</
html
>
来分析这段代码,example元素下方有一相邻元素normal(注:这里分析的是添加和删除margin后的example元素,normal元素仅作为example元素前后效果的参照)。
根据上文的参考线原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px将以外元素为参考,所谓外元素就是本元素的边界元素(再白话点的解释就是元素的紧邻元素,这里涉及到containing block知识,可自行网上搜索)。example元素上边和左边的边界元素即为wrap父元素,wrap父元素为基准点,example的margin-top为-10px,想象下如果这里margin-top为+10px会什么情况,没错如果为+10px,example元素相对于wrap父元素边缘为基准,那么example元素会同wrap父元素10px产生间隙边距,那么反过来,margin-tip:-10px;还是与wrap父元素边缘为基准,反过来向上推10px的距离位置。example元素的margin-left为40px,这里就按照正常逻辑相隔40px边距,同理如果为-40px,那么就是反方向向左推进40px的距离位置。
再来看example元素的margin-right和margin-bottom,由上文得知这俩个值是以元素本身为参考。什么叫以元素本身为参考呢,确切含义是指以自身为参考来影响周围元素的位置(实质即为影响下边和右边相邻元素的参考线)。这里的margin-bottom为-30px,对于其自身位置没有任何变化,但是对于其下方元素normal元素产生了极大的影响,因为normal元素的上边界元素即为example元素,根据example元素边界来判定自身位置,想象下如果example元素margin-bottom为+30px,那么example元素将隔开下方的normal元素,反之为-30px,下方normal元素由于example参考线内凹,导致了normal元素自个儿身不由己的被“提”了上去了。这就是以自身为参考影响周围元素位置的含义。
这里梳理一下规律,当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。如果你再想深入了解参考线理论的话你也可访问由浅入深漫谈margin属性这篇文章。
负margin实战:
据我所知至今没有一套完整的关于负margin专题研究的文章。有也仅仅是偏理论或者偏实例,理论终究是理论,学以致用才是根本,而有了实例你还得知晓原理,授人鱼不如授人以渔。接下来我们将利用四个例子深入讲解负margin技术的应用领域。
负margin在Tab选项卡中的应用:
效果预览:
- 前端
- 实战
- 交互
- 优化
核心分析:
如上面的这个Tab选项卡效果,最核心的就是下方俩行高亮部分代码,第二行的margin-bottom:-1px;使下方的正文部分向上“提”了1px的距离,从而达到了鼠标上移后选项卡白色遮住下方黑色边框的效果(注:由于IE不是符合W3C标准,所以当鼠标移到选项卡上时需要添加一个额外属性position:relative;来修复IE不覆盖下方边框的这个Bug)。第四行的margin-left:-1px;的目的是让四个选项卡向左移动1px的距离,达到左右都只有一条分割线的效果。
CSS代码:
.demoTab{
width
:
400px
;
font
:
14px
/
1.5
Microsoft YaHei,
verdana
,
Helvetica
,
Arial
,
sans-serif
;}
.demoTab .demoTabHd{
margin-bottom
:
-1px
;
border
:
1px
solid
#6C92AD
;
border-bottom
:
none
;
background
:
#EAF0FD
;}
.demoTab .demoTabNav{
height
:
28px
;
overflow
:
hidden
; *zoom:
1
;}
.demoTab .demoTabList{
float
:
left
;
margin-left
:
-1px
;
padding
:
0
22px
;
line-height
:
28px
;
border-left
:
1px
solid
#6C92AD
;
border-right
:
1px
solid
#6C92AD
;
font-weight
:
bold
;
color
:
#005590
;
text-align
:
center
;
cursor
:
pointer
;}
.demoTab .demoTabList.current{
position
:
relative
;
background
:
#fff
;}
.demoTab .demoTabBd{
border
:
1px
solid
#6C92AD
;}
.demoTab .demoTabBd .roundBox{
padding
:
15px
;}
.demoTab .demoTabContent{
display
:
none
;}
.demoTab .demoTabContent.current{
display
:
block
;}
HTML代码:
<
div
id
=
"demoTab"
class
=
"demoTab"
>
<
div
class
=
"demoTabHd"
>
<
ul
class
=
"demoTabNav clearfix"
>
<
li
class
=
"demoTabList current"
>前端</
li
>
<
li
class
=
"demoTabList"
>实战</
li
>
<
li
class
=
"demoTabList"
>交互</
li
>
<
li
class
=
"demoTabList"
>优化</
li
>
</
ul
>
</
div
>
<
div
class
=
"demoTabBd"
>
<
div
class
=
"roundBox"
>
<
div
class
=
"demoTabContent current"
>这是第一个选项卡的内容。</
div
>
<
div
class
=
"demoTabContent"
>这是第二个选项卡的内容。</
div
>
<
div
class
=
"demoTabContent"
>这是第三个选项卡的内容。</
div
>
<
div
class
=
"demoTabContent"
>这是第四个选项卡的内容。</
div
>
</
div
>
</
div
>
</
div
>
负margin负位移技术应用:
效果预览:
核心分析:
上面那个类似于商城热销商品邮戳效果其实也是由负margin实现的,把以往使用的relative/absolute这样的“危险”属性代替为相对“温和”的margin属性。核心在于小的邮戳图片利用负margin-top向上移动,达到类似absolute的叠加效果。
CSS代码:
.demoSpecItem{
width
:
212px
;
min-height
:
178px
;
_height
:
178px
;}
.demoSpecItem .demoItemPic{
display
:
block
;
text-align
:
center
;}
.demoSpecItem .demoItemPic img{
padding
:
5px
;
border
:
1px
solid
#ccc
;}
.demoSpecItem .demoIcon{
display
:
block
;
margin
:
-185px
0
0
150px
;}
HTML代码:
<
div
class
=
"demoSpecItem"
>
<
a
href
=
"javascript:void(0)"
class
=
"demoItemPic"
>
<
img
width
=
"200"
height
=
"166"
src
=
"toygersKittens.jpg"
alt
=
"toygers kittens"
/>
</
a
>
<
span
class
=
"demoIcon"
><
img
width
=
"54"
height
=
"54"
src
=
"buyInSoon.png"
alt
=
"icon"
/></
span
>
</
div
>
利用负margin制作鳞片式导航:
效果预览:
- 鳞片导航
- 前端开发
- 用户体验
- 实战为主
核心分析:
鳞片式导航可以说是使用负margin技术最佳场合之一。如上方的例子,试着想象不使用负margin,单纯的使用图片来制作这类鳞片式导航,想象下切图、定位、点击后图片切换、中间接壤部分的遮罩、维护开发的工作量,光想想这些就不寒而栗。而利用负margin这里仅仅添加一个margin-left即可达到前后遮盖的效果。
CSS代码:
.demoNav .demoList{
float
:
left
;
width
:
154px
;
height
:
53px
;
margin
:
0
0
0
-20px
;}
.demoNav .demoList.firstList{
margin
:
0
;}
.demoNav .demoList a{
display
:
block
;
line-height
:
53px
;
padding
:
0
0
0
25px
;
color
:
#005590
;
background
:
url
(
"flakeNavTab.png"
)
left
top
no-repeat
;
font-weight
:
bold
;
text-decoration
:
none
;}
.demoNav .demoList a:hover{
background
:
url
(
"flakeNavTabHover.png"
)
left
top
no-repeat
;}
.demoNav .demoList.current a{
background
:
url
(
"flakeNavTabCurrent.png"
)
left
top
no-repeat
;}
.demoNav .demoList.current a:hover{
background
:
url
(
"flakeNavTabCurrent.png"
)
left
top
no-repeat
;}
/* fix ie6 hover issue */
HTML代码:
<
div
id
=
"demoNav"
class
=
"demoNav"
>
<
ul
class
=
"clearfix"
>
<
li
class
=
"demoList firstList current"
><
a
href
=
"javascript:void(0)"
>鳞片导航</
a
></
li
>
<
li
class
=
"demoList"
><
a
href
=
"javascript:void(0)"
>前端开发</
a
></
li
>
<
li
class
=
"demoList"
><
a
href
=
"javascript:void(0)"
>用户体验</
a
></
li
>
<
li
class
=
"demoList"
><
a
href
=
"javascript:void(0)"
>实战为主</
a
></
li
>
</
ul
>
</
div
>
利用负margin制作自适应左右布局:
效果预览:
核心分析:
如上例这类布局效果(左边一个固定图片,右边为内容),负margin能够替代float浮动布局,进行左右布局规划,并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮,这个是做什么用的呢?你可以使用标准浏览器查看上方例子,依次点击变宽按钮至宽度最大,再点击不设置最小宽度按钮,你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处,但自身也有一个小的缺陷,即如果内部最后一个子元素使用负margin上移后,由于父元素是其边距元素,其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高度,最小高度值为较小的固定元素高度(此例即为左边固定的图片高度),就可彻底解决负margin上移影响父元素高度Bug。
CSS代码:
.demoLayout{
width
:
500px
;
border
:
1px
solid
#aaa
;
background
:
#EEEEEE
;}
.demoLayout .roundBox{
padding
:
10px
;
min-height
:
170px
;
_height
:
170px
;}
.demoLayout .demoShowPic img{
padding
:
1px
;
border
:
1px
solid
#DAA520
;}
.demoText{
margin
:
-170px
0
0
215px
;}
.demoLayoutBtn{
margin
:
15px
0
0
0
;}
HTML代码:
<
div
id
=
"demoLayout"
class
=
"demoLayout"
>
<
div
class
=
"roundBox"
>
<
div
class
=
"demoShowPic"
><
img
width
=
"200"
height
=
"166"
src
=
"toygersKittens.jpg"
alt
=
"toygers kittens"
/></
div
>
<
div
class
=
"demoText"
>利用负margin制作自适应左右布局</
div
>
</
div
>
</
div
>
结论:
根据上面的几个实例,相信你已经对负margin技术有了一个比较完整的理解。负margin不但可以做出一般CSS属性所不能达到的效果还能够化繁为简、化腐朽为神奇之奇效,当然负margin用到的地方不仅仅是这些,还有许多效果都是需要负margin技术来实现的,只要你耐心的去实践去探索,相信你会发现更多负margin用到得场合。
相关日志
- 不要告诉我你懂margin
- 用Margin还是用Padding
- CSS设计模式之三权分立模式篇
- 拿什么来拯救你,我的table
- 攻略强制换行与强制不换行
- CSS实战——纯图片圆角Box的实现技巧
34 个评论
发表评论
关于我
姓名: 海玉
年龄: 25
职业: 页面制作、前端开发
现住地: 上海
E-mail: hankbu88@gmail.com
收藏一下
Stay up to date. Subscribe viaRSS, Facebook, Twitter or Email
标签云
CSS实战 循环 浏览器兼容 实战系列 圆角table 前端开发 强制换行 z-index padding 用户体验 交互设计 photoshop IE 设计模式 性能优化 Javascript marginHtml/CSS随机文章
- 拿什么来拯救你,我的table
- 引导用户创建心理模型
- Javascript的循环优化探究
- 不要告诉我你懂margin
- 用Margin还是用Padding
- 我知道你不知道的负Margin
- [转] Web前端研发工程师编程能力飞升之路
- overflow知多少
友情链接
- Go Go Sam!
- jquery之家
- Ronnie 一亩三分地
- Support Forum
- Themes
- WordPress Blog
- 简明现代魔法
© 2010-2011 HiCSS — 海玉’s Blog wordpress theme by themelab
CSS | XHTML | Home | RSS Feed | Back to Top
- 我知道你不知道的负Margin
- 我知道你不知道的负Margin
- 我知道你不知道的负Margin
- 我知道你不知道的负Margin(转)
- 我知道你不知道的负Margin--负margin浅谈
- 你不知道的margin
- 我知道你不知道我知道
- 我知道你不知道我知道你不知道我知道你不知道
- 两个数学家的问题,“你不知道我不知道你知道我知道”
- 我不知道,我愿你知道!
- [搞笑]谷歌:我知道你不知道我知道你....
- [搞笑]谷歌:我知道你不知道我知道你....
- 我真的不知道 你是
- 我不知道你是谁
- 我不知道的
- 我不知道的
- 数据库的漏洞你知道不知道
- 你——我知道在你的生命中有太多的不知道
- Android 屏幕px、dp、sp、屏幕宽高度转换
- php的语言结构
- asp.net生成.xml文件的两种方法
- UIControl
- UINavigationController
- 我知道你不知道的负Margin
- Spring框架简介,实现思想
- asp.net 验证正则表达式
- 使用Java语言借助Quartz jar包实现定时器的方法
- Swift二维数组的定义与遍历
- 【转载】五大常用算法之五:分支限界法
- cocos2d-x tableview和CCControlButton的使用
- 【Flume】【源码分析】flume中事件Event的数据结构分析以及Event分流
- Matlab 帮助命令
January 10, 2012 at 2:42 pm
很实用,关于选项卡这个我有段时间也没搞清楚,楼主辛苦了~
February 9, 2012 at 1:31 pm
http://www.kdbj.net,
http://www.hicss.net/
博主换 友情链接么?
March 8, 2012 at 12:33 am
[...] 在margin所有的实际应用中,负margin技术是我学习css路上最重要一课之一,许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。margin技术是那么的有用,限于篇幅我又不想草草了事,所以我决定专门为他写一篇文章,详细的说明他的效果、原理、及其应用。在此之前你可以先阅读怿飞写的由浅入深漫谈margin属性这篇文章,大致了解“margin参考线”的概念,之后再来查看负margin技术及其应用这篇文章。 [...]
May 24, 2012 at 5:30 pm
[...] 这里推荐一篇文章《我知道你不知道的负Margin》最后的实例,别人写的很好了,我就不再一一阐述了,需要看的同学请移步。 [...]
May 27, 2012 at 1:15 am
我也写了一篇《 margin 负值一个秘密武器》www.iyunlu.com/view,欢迎交流
June 3, 2012 at 10:59 pm
[...] 3.海玉’s [...]
June 18, 2012 at 3:02 pm
博主的文章写得很详细。看了好几篇,收获良多。以后会继续保持关注!
August 9, 2012 at 5:58 pm
.demoTabHd 下为什么会是半透明的效果呢?是js达到的效果么?
August 9, 2012 at 9:16 pm
纯CSS效果,关键点在于这句:.demoTab .demoTabList.current{position:relative; background:#fff;}
August 25, 2012 at 5:47 pm
[...] left块采用负值定位,使这个块脱离了文档流,margin负值在网页布局中有着很多的应用,这个技巧的相关介绍大家可以点开这里,相信大家会有所收获。 [...]
September 7, 2012 at 10:16 am
[...] [4]: http://jsbin.com/ayomas/2/edit ”负值margin模拟圆角按钮” [5]: http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ ”我知道你不知道的负Margin” [...]
September 7, 2012 at 1:58 pm
[...] 关于margin的应用,有很多介绍,深入的请看怿飞的《由浅入深漫谈margin属性》 其中提到,一个元素的margin-left和margin-top的移动时的参考线,要么是相邻元素的margin-right、margin-bottom,要么是它的父元素的content的上边界、左边界。 而元素的margin-right、margin-bottom,对元素本身的位置 没有影响。但会对相邻元素产生影响,因为该元素的margin-right、margin-bottom是相邻元素的margin-top、margin-left的移动参考线(负margin的许多应用,都是基于这个原理,详细见《我知道你不知道的负Margin》) [...]
November 4, 2012 at 9:54 am
“把以往使用的relative/absolute这样的“危险”属性代替为相对“温和”的margin属性。”
为什么说relative/absolute是“危险”的属性?
November 5, 2012 at 10:51 am
absolute/relative属性在浏览器兼容性;z-index维护;代码耦合性上都是一笔很大的开销,越到后期代码越复杂的情况下,这类属性一旦出现问题还会附带其他功能一起失效,所以请慎重使用这类个布局属性,改为相对温和的margin属性来达到同样的效果。
January 29, 2013 at 12:10 am
[...] 更多:http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ 此条目由 otarim 发表在 cookie 分类目录,并贴了 margin、负边距 标签。将固定链接加入收藏夹。 [...]
March 16, 2013 at 2:53 pm
[...] 在margin所有的实际应用中,负margin技术是我学习css路上最重要一课之一,许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。margin技术是那么的有用,限于篇幅我又不想草草了事,所以我决定专门为他写一篇文章,详细的说明他的效果、原理、及其应用。在此之前你可以先阅读怿飞写的由浅入深漫谈margin属性这篇文章,大致了解“margin参考线”的概念,之后再来查看负margin技术及其应用这篇文章。 CSS 学习笔记 [...]
April 26, 2013 at 2:21 pm
受益匪浅。
最后一个实例看了很久才看出是文字在图片下方,是利用负值的margin-top给“提”上去的。
之前我也做过两栏自适应布局,参考的是这个http://hi.baidu.com/mengqing723/item/8b800295de603049f142150f 。简单布局没问题,但是应用到页面里,加入内容之后 文字在ie6、7下无法自动换行。最终我用的是absolute,不过在ie6下还有点问题。
July 30, 2013 at 1:59 pm
[...] 海玉的一篇博客我知道你不知道的负Margin提到了负margin的理论: [...]
August 2, 2013 at 10:08 am
博主,我是新手选项卡那个不是很理解诶。
可以解释下为什么白色选项卡会遮住下面的文字方框吗?
我的理解是选项卡先加载,文字方框后加载,应该文字方框在选择卡的下方啊
August 2, 2013 at 11:05 am
.demoTab .demoTabList里面的float:left;使得li得以脱离文档流并“盖”住下面的border
June 22, 2014 at 4:34 pm
那为啥其他的下面的border不被盖住呢??
August 11, 2013 at 2:33 pm
为什么按照博主的源代码写做不出来第一个的效果呢
August 12, 2013 at 5:33 pm
BZ,请教下选项卡那个例子,处理鼠标移上去这个事件是否还有别的代码。。不是很懂这么几行怎么实现了current的切换和tab与content的同步
August 15, 2013 at 12:16 pm
恩,要用到几行JS,只需要简单的添加删除.current就可以了。
October 7, 2013 at 7:42 pm
[...] 在margin所有的实际应用中,负margin技术是我学习css路上最重要一课之一,许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。margin技术是那么的有用,限于篇幅我又不想草草了事,所以我决定专门为他写一篇文章,详细的说明他的效果、原理、及其应用。在此之前你可以先阅读怿飞写的由浅入深漫谈margin属性这篇文章,大致了解“margin参考线”的概念,之后再来查看负margin技术及其应用这篇文章。 [...]
October 26, 2013 at 6:21 pm
我测试当负margin过大时,chrome下cursor会失效,不知道博主有没有什么好办法?
December 18, 2013 at 12:10 pm
一直想看负margin相关的文章,楼主写的挺详细的,虽然我现在才看到,但是还是有些疑问,就是关于负margin中z-index类似的问题,就拿tab的那个例子来说,为什么demoTabBd会盖住demoTabHd 我刚才试了一下 如果两个div位置互换一下 demoTabBd就没法覆盖demoTabHd了 所以 我的结论是可能会和加载顺序有关系(正常文档流的情况下)
January 19, 2014 at 11:18 am
[...] http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ [...]
April 11, 2014 at 11:36 pm
[...] 创建高度相等的思想其实是这样的用负margin-bottom抵消正数padding-bottom来实现等高列。先说margin,通过给margin的top,right,bottom,left设置不同的值会产生不同的效果,可以试着读下海玉博客的这篇文章我知道《你不知道的负margin》,简单的说就是,margin的top和left设置正负值会根据当前包含块的对应边进行移动,对right和bottom设置对应值会让自己的right和bottom边进行移动。有点抽象,还是看那篇博文比较好。所以创建等高的列其实就是先设置够长的padding-bottom,然后设置相应的负margin让当前元素的底边移动上来,元素显示的时候是垂直显示到margin的bottom边的。当然,如果你需要使用背景图像的话会麻烦点,就是说你得把元素设置为relative,还得加个空元素,设置为position,再让这个空元素的底边和margin-bottom重合,接着设置背景图像的底边部分给空元素。 if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); [...]
April 18, 2014 at 9:50 am
[...] 创建高度相等的思想其实是这样的用负margin-bottom抵消正数padding-bottom来实现等高列。先说margin,通过给margin的top,right,bottom,left设置不同的值会产生不同的效果,可以试着读下海玉博客的这篇文章我知道《你不知道的负margin》,简单的说就是,margin的top和left设置正负值会根据当前包含块的对应边进行移动,对right和bottom设置对应值会让自己的right和bottom边进行移动。有点抽象,还是看那篇博文比较好。所以创建等高的列其实就是先设置够长的padding-bottom,然后设置相应的负margin让当前元素的底边移动上来,元素显示的时候是垂直显示到margin的bottom边的。当然,如果你需要使用背景图像的话会麻烦点,就是说你得把元素设置为relative,还得加个空元素,设置为position,再让这个空元素的底边和margin-bottom重合,接着设置背景图像的底边部分给空元素。 [...]
June 23, 2014 at 2:48 pm
文档流总是从上到下,从左到右的,在文档流位置中后面的元素不会影响前面的元素的布局,前面的元素布局变化会影响后面的元素的布局
margin-left,把自己向右推
margin-top,把自己往下边推
margin-bottom,把底部相邻的元素往下推,类似于底部元素添加了margin-top
margin:right:吧右边相邻元素往右推,类似于右边元素添加margin-left;
June 23, 2014 at 4:04 pm
tab那个我还是不搞明白,如果说HD在BD上面的话,BD的border-top应该是被HD遮住了,不显示啊
难道那border-bottom:none还是占据了空间,只是变成了透明的么?
August 21, 2014 at 3:34 pm
你好,博主,选项卡那块有点不明白,导航的li margin-left:-1px;那样每个li都像左移动1px,怎么会被遮挡住了呢?新手求甚解
August 21, 2014 at 3:41 pm
一分钟后我懂了,第一个li移动过去之后,其后的li是紧跟在其后的,之后还有-1px,就覆盖在前面一个上面了