负边距

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

当块级元素设置 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. POJ 3928 &amp; hdu 2492 &amp; Uva1428 PingPong 【树状数组】

    Ping pong                                                   Time Limit: 2000/1000 MS (Java/Others)   ...

  2. 四、Spring Boot 多数据源 自动切换

    实现案例场景: 某系统除了需要从自己的主要数据库上读取和管理数据外,还有一部分业务涉及到其他多个数据库,要求可以在任何方法上可以灵活指定具体要操作的数据库.为了在开发中以最简单的方法使用,本文基于注解 ...

  3. 自学Zabbix3.8-可视化Visualisation

    随着大量数据流入Zabbix,如果用户能够查看正在发生的事情,而不仅仅是数字,那么对于用户来说,这就变得容易得多了.这就是图的所在. 图允许快速地掌握数据流,关联问题,发现什么时候开始,或者做什么事情 ...

  4. 《大型网站技术架构：核心原理与案例分析》【PDF】下载

    <大型网站技术架构:核心原理与案例分析>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062557 内容简介 本书通过梳理大型网站 ...

  5. 【java】ArrayList、Iterator用法

    package com.tn.collect; import java.util.ArrayList; import java.util.Iterator; class Product{ public ...

  6. iOS Block的简单使用以及__block 和static修饰变量

    简单的代码总结,不足之处多多指教. //简单的使用 -(void)blockOne{ ; int(^BlockOne)(int) = ^(int num2) { return number*num2; ...

  7. 截取ip 不加引号

    ip a |grep  /26 |cut -b10- | cut -d / -f 1

  8. nginx编译参数的内容

    最近公司安排我安装几台云服务器环境 采用nginx做反向代理: 查了一下官方文档,参数比较多,很多在上线后 可能才知道注意一下的. 编译安装nginx的话 需要安装一些前置组件: 1.gcc环境:用于 ...

  9. 测试xss

    <script>window.onload=function(){ alert('加载完毕');}</script>

  10. Spring Dynamic DataSource Routing

    Use AbstractRoutingDataSource to dynamicly switch datasources, see http://spring.io/blog/2007/01/23/ ...