负边距

可以改变 他在文档流中的尺寸

当块级元素设置 margin： -10px; 　　这个快 的大小没变但是他的定位的位置向上串了，压住了上面的文字   而且在他后面的文字  会爬到他身上 而前面的文字  会被他 盖住

即 文档流只能向做上流　　

在文档流中 元素的最终边界 是由 margin决定的  margin为负的时候就相当于元素的边界向里收文档流只认识  这个边界  ，不管他实际的尺寸是多少  这这时文档流的 高度就减少了

图中灰色的部分 宽度是auto  下面  即继承了父级的宽度  也就是没设这  这里在设置 margin-right：-100px　　这样 内容就扩大了 超出了父级  但是父级border没有被撑开   即文档流中所占的大小没有变

负边距可以改变  元素的大小

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负边距

    本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...

  6. CSS负边距margin的应用

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

  7. css负边距之详解(子绝父相)

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

  8. CSS 负边距自适应布局

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

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

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

随机推荐

  1. Javaweb 项目内所有页面都是404问题

    这两天出现的问题:项目内所有的页面都是404 问题原因:Tomcat在启动时出现了问题导致服务器根本没启动起来 问题的根本原因: 由于之前用到了拦截器,然后拦截器没用了被我删掉了,但是web.xml文 ...

  2. org.elasticsearch.transport.ReceiveTimeoutTransportException[cluster:monitor/nodes/liveness] request_id [31] timed out after [5000ms]

    ES连接超时,异常信息 2017-09-07 10:42:45.042 [elasticsearch[Bantam][transport_client_worker][T#17]{New I/O wo ...

  3. web.config中配置数据库（多数据）连接的两种方式

    这是我的第一篇文章,既然是第一篇了,那就从最基础的只是说起--web.config中配置数据库连接. 网上有很多这方面的资料,但发现并没有一篇从头到位很清楚明了说完的,今天就把我的整理写在这里吧. 在 ...

  4. iOS----------如何检查域名是否支持ipv6

    http://ipv6-test.com/validate.php  这个地址  也可以检测到! 1.检查你所用到的库,像af 3.0以上什么的(不用改),其他的库自己去搜下是否支持ipv6吧. 2. ...

  5. C#基础在using中创建对象

    在using中创建的对象的类必须是实现了IDispose接口的类,示例代码如下: static void Main(string[] args) { Method(); Console.WriteLi ...

  6. java 设计模式-缺省适配器模式

    本文转载地址:http://www.cnblogs.com/iyangyuan/archive/2013/03/11/2954808.html 在程序设计过程中,读者很可能遇到这样一种困境:设计了一个 ...

  7. python模拟shell执行脚本

    工作时候需要模拟shell来执行任务,借助包paramkio import paramiko class ShellExec(object): host = '127.0.0.1' port = 36 ...

  8. php-删除非空目录

    function deldir($path){ if(!is_dir($path)){ return false; } $dh = opendir($path); while(($file = rea ...

  9. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  10. 扩展1 - Python 获取当前时间的用法

    1.先导入库:import datetime 2.获取当前日期和时间:now_time = datetime.datetime.now() 3.格式化成我们想要的日期:strftime() 比如:“2 ...