注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】一个margin你能想到什么?  

2015-03-22 18:37:40|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自过河小卒《一个margin你能想到什么?》
【第一】对于学过html的你来说,你肯定会想到盒模型。
        margin是模块与模块进的空隙,padding是内容与边框之间的空隙。如下图所示:

一个margin你能想到什么? - 过河小卒 - 过河小卒
 
       margin的简写属性可以设置一个到四个,这里就不再赘述了。但是有一个我们经常用到的是margin : 0 auto; 如果margin设置两个值得时候,第一个表示是top与bottom的值,第二个表示的是left与right的值。margin : 0 auto; 表示的是上下边界为0,左右宽度根据自适应的宽度一样,及居中。
        margin的推荐用法是:兄弟之间的距离用margin;父子之间的距离用padding。

【第二个】margin设置百分比问题。
        先出个题大家做一做:父级div设置 width: 100px; height : 50px;它的子元素设置margin : 10%;  大家算算看。
        margin百分比问题困扰了我一段时间,刚开始都是感性的认识,觉得吧:横向包含块的宽度,纵向包含快的高度——其实这是错的
        margin的百分比参照其包含块(父级)的宽度进行计算
        所以上面那个margin : 10%; 的值是margin : 10px;而不是10px 20px; 。

 欢迎学习交流——过河大卒

【第三】margin的纵向外边距折叠问题。
        我们来看这样一个例子:一个父级wrap设置宽度让自己撑开高度;父级下两个自己p,给p设置margin。代码如下:

<style>
.wrap {
width: 400px;
background: #888;
}
.wrap p {
font-size: 30px;
margin: 50px;
}
.wrap p:nth-child(1) {
background: #00f;
}
.wrap p:nth-child(2) {
background: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<p>过河小卒</p>
<p>过河小卒</p>
</div>
</body>

得到的效果如下图,重点观察wrap的高度

一个margin你能想到什么? - 过河小卒 - 过河大卒
一个margin你能想到什么? - 过河小卒 - 过河大卒
 p的盒模型:
一个margin你能想到什么? - 过河小卒 - 过河小卒

        我们可以看出wrap的高度是130px,而不是180px。
        外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值
我们该如何避免margin外边距折叠呢?
(1)给块元素设置浮动;
(2)把块元素设置为非块元素;
(3)设置绝对定位,绝对定位元素的margin,不与任何元素的margin发生折叠;
(4)只设置一个纵向的外边距;

【第四】margin的横向双倍边距bug问题。
这是一个兼容问题,在IE6下触发的。
这里给子元素p设置margin: 50px;不浮动与浮动。代码如下:

<style>

.wrap {
width: 500px;
background: #888;
}
.wrap p {
/*float: left;*/ /*让它浮动的话加上右边这个代码,不要把它注释*/
margin: 50px;
background: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<p>过河小卒</p>
</div>
</body>
p为浮动的效果:
一个margin你能想到什么? - 过河小卒 - 过河大卒
 
p浮动的效果:
一个margin你能想到什么? - 过河小卒 - 过河大卒
 
触发条件是:在IE6下,块元素设置了浮动且设置了横向外边距,与父级接触的外边距的值会加倍。
解决的办法是:display : inline; 把块元素转化为行内元素的展示特性。

【第五】margin负值。 参照梦幻雪冰的博客——margin负值应用
  这边讲一个margin负值在列表项的一个应用。去除列表中最后一个li元素中border-bottom,或者第一个li元素的border-top。实现如下的一个效果:
一个margin你能想到什么? - 过河小卒 - 过河大卒
 结构样式如下:

<style>
.wrap div {
overflow: hidden;
/*设置超出隐藏*/
}
.wrap ul {
margin-top: -1px;
/ *对整个ul向上移动1px,所以间距为负值*/
}
.wrap h2 {
height: 30px;
margin-bottom: 5px;
background:#b8b8b8;
line-height: 30px;
}
.wrap li {
height: 20px;
border-top: 1px dashed #f00;
line-height: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="wrap">
<h2>一个margin你能想到什么?——过河小卒</h2>
<div class="con">
<ul>
<li><a href="" >过河小卒</a></li>
<li><a href="" >过河小卒</a></li>
<li><a href="" >过河小卒</a></li>
<li><a href="" >过河小卒</a></li>
<li><a href="" >过河小卒</a></li>
</ul>
</div>
</div>
</body>


因为个人能力有限,有什么错误的地方欢迎广大博友指点。

 欢迎学习交流——过河大卒
  评论这张
 
阅读(63)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017