文档章节

浅析CSS负边距

lovelyun
 lovelyun
发布于 2015/08/26 21:42
字数 784
阅读 51
收藏 0

     本文主要讨论两点,1、左右负边距对元素宽度的影响;2、负边距对浮动元素的影响。

     在讨论这两点前,首先要理解盒模型、文档流。

    盒模型,见下图,简单明了。

文档流,将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位,固定定位.。但是在IE中浮动元素也存在于文档流中。

绝对定位,,即完全脱离文档流,相对于position属性非static值的最近父级元素进行偏移。

固定定位,,即完全脱离文档流,相对于视区进行偏移。

相对定位,,即相对于元素在文档流中位置进行偏移.,但保留原占位。

现在步入正题。

1、左右负边距对元素宽度的影响

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右负边距对元素宽度的影响</title>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  #wraper{
    width: 400px;
    height: 50px;
    margin: auto;
  }
  #content{
    background-color: #000;
    height: 50px;
  }
</style>
</head>
<body>
  <div id="wraper">
    <div id="content"></div>
  </div>
</body>
</html>

     代码效果如下图图一,给id为content的div添加属性margin-left: -100px后的效果图如下图图二;给id为content的div添加属性margin-right: -100px;后的效果图如下图图三。

图一:

图二:

图三:

    从以上效果可以看出,左右负边距可以影响元素的宽度。

    对此,很好理解,我们都知道,margin-left是正值时content的左边界将右移(左边界远离父元素的左边界,从而宽度减小),而此处margin-left为负值,反过来就是content的左边界将向左移动(从而把宽度拉大)。右外边距为负值的情况同理。

2、负边距对浮动元素的影响

    从上例中我们可以知道,如果把border设为0,并假想border是元素的边界,当margin和padding也都为0时,元素的边界将与border重合。

    负边距实际上是改变元素的边界位置,改变效果和正边距的相反。

    举个栗子:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>负边距对浮动元素的影响</title>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  div{
    width: 200px;
    height: 200px;
    float: left;
  }
  #one{
    background-color: red;
  }
  #two{
    background-color: blue;
  }
  #three{
    background-color: yellow;
  }
</style>
</head>
<body>
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>
</body>
</html>

 效果如下图图四。

图四: 

给div添加属性margin-right: -100px效果图如下图图五。

图五:

 原来margin-right为0,所以三个div紧挨在一起,如果margin-right为正,他们将隔开一定距离,为负,当然就重叠啦!由此可以推测,当浏览器窗口的宽度小于300px时,黄色的div将被挤到下一行。


参考资料:

1、关于盒模型(http://www.cnblogs.com/SkySoot/archive/2012/04/17/2453000.html);

2、关于负边距 (http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html);

 


© 著作权归作者所有

lovelyun
粉丝 1
博文 1
码字总数 784
作品 0
深圳
程序员
私信 提问
css中间固定宽度,两边自适应宽度

转载自:http://www.cnblogs.com/lgmcolin/archive/2013/05/29/3106579.html 之前看到的很多布局都是两边固定宽度,但是中间自适应,实现方式有几种,可以用absolution布局,float布局或者用...

ahl123
2018/07/02
0
0
从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑
2017/01/26
0
0
css padding属性的用法,margin外边距,cursor 属性

CSS cursor 属性 css cursor: pointer变鼠标手 CSS margin外边距 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属...

writeademo
2016/10/10
17
0
爱创课堂每日一题八十二天-什么是外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collapse。在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外...

全栈web笔记
2017/12/27
0
0
让footer固定在页面(视口)底部

让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现,没有令人讨厌的hacks。所以这就能在...

思考中
09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可能是国内第一篇全面解读 Java 现状及趋势的文章

作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! 导读:InfoQ 发布《2019 中国 Java 发展趋势报告》,反映 Java 在中国发展的独特性,同时也希望大家对 Java 有...

阿里云官方博客
8分钟前
2
0
Spring Boot 2.x基础教程:Swagger静态文档的生成

前言 通过之前的两篇关于Swagger入门以及具体使用细节的介绍之后,我们已经能够轻松地为Spring MVC的Web项目自动构建出API文档了。如果您还不熟悉这块,可以先阅读: Spring Boot 2.x基础教程...

程序猿DD
11分钟前
2
0
《毅力》读书笔记

1.确信你全身心地投入 2.准备好为目标进行艰难的跋涉 3.通过减少需要使用毅力的情形,为将来的挑战做好准备 4.尽可能具体细致地确定你的目标和实现目标的过程 5.把挑战分解为小而易于管理的小...

lingch
12分钟前
3
0
zk中快速选举FastLeaderElection实现

选举涉及概念 服务器状态 投票 如何选择投票? 协议 选举 如何进行选举? epoch 发送者 接收者 发送队列 接收队列 服务器状态 public enum ServerState { LOOKING,寻找Leader状态,当服务处于...

writeademo
15分钟前
2
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

Linux就该这么学
18分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部