浅析CSS负边距

时间:2022-09-17 15:38:23

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

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

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

浅析CSS负边距

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

  有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位,固定定位.。但是在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;后的效果图如下图图三。

图一:浅析CSS负边距

图二:浅析CSS负边距

图三:浅析CSS负边距

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

对此,很好理解,我们都知道,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>

效果如下图图四。

图四:浅析CSS负边距

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

图五:浅析CSS负边距

  原来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);

浅析CSS负边距的更多相关文章

  1. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  2. CSS 负边距读后感

    最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...

  3. css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  4. css 负边距 小记

    水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度  但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值  (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...

  5. CSS负边距margin的应用

    原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...

  6. css负边距之详解&lpar;子绝父相&rpar;

    来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以 ...

  7. css 负边距

    负边距 可以改变 他在文档流中的尺寸 当块级元素设置 margin: -10px;  这个快 的大小没变但是他的定位的位置向上串了,压住了上面的文字   而且在他后面的文字  会爬到他身上 而前面的文 ...

  8. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  9. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

随机推荐

  1. MAC Osx PHP安装指导

    php.ini的位置 Mac OS X中没有默认的php.ini文件,但是有对应的模版文件php.ini.default,位于/private/etc/php.ini.default 或者说 /etc ...

  2. struts2 spring mybatis 整合(test)

    这几天搭了个spring+struts2+mybatis的架子,练练手,顺便熟悉熟悉struts2. 环境:myEclipse10+tomcat7+jdk1.6(1.8的jre报错,所以换成了1.6) ...

  3. rhel 5&period;8下静默安装oracle11gr2

    1.图形界面下录制脚本如下: #-------------------------------------------------------------------------------# Do ...

  4. vim 全局替换命令

    语法  :[addr]s/源字符串/目的字符串/[option]                     :%s/源字符串/目的字符串/c 全局替换命令为: :%s/源字符串/目的字符串/g [add ...

  5. android 表情&comma;软键盘冲突解决方案(仿微博等SNS应用)

    之前总想搞一下这个模块,可是由于忙碌总是推迟,现在就把这块好好的弥补过来,下面是我实现的思路.本人才疏学浅,还望大家不要见笑. 首先我们还是先看写示例:            上面应用应该不用我过多介 ...

  6. CString 字符串转化和分割

    1.格式化字符串 CString s;s.Format(_T("The num is %d."), i);相当于sprintf() 2.转为 int 转10进制最好用_ttoi() ...

  7. 【ASP&period;NET MVC 学习笔记】- 11 Controller和Action(2)

    本文参考:http://www.cnblogs.com/willick/p/3331513.html 1.MVC一个请求的发出至action返回结果的流程图如下: 重点是Controller Fact ...

  8. 你知道src、url、href的全称吗?

    url:Uniform Resource Locator统一资源定位符 src:Source资源 href:Hypertext Reference超文本引用

  9. iframe框架加载完成后执行函数

    var iframe = document.createElement("iframe"); iframe.src = "http://www.baidu.com/&qu ...

  10. tomcat监控工具probe

    probe官网:http://www.lambdaprobe.org/ 但是已经链接至github了:https://github.com/psi-probe/psi-probe 下载psi-prob ...