负边距

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

当块级元素设置 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. Android使用XUtils框架上传照片（一张或多张）和文本，server接收照片和文字（无乱码）

    Android上传图片,这里我使用了如今比較流行的XUtils框架.该框架能够实现文件上传.文件下载.图片缓存等等,有待研究. 以下是Android端上传的代码: xUtils.jar下载 Strin ...

  2. dma_alloc_coherent （建立一致性 DMA 映射函数）

    1.函数申明 /** * dma_alloc_coherent - allocate consistent memory for DMA * @dev: valid struct device poi ...

  3. canvas绘制多边形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【Sqlserver系列】初级思维导图

    1   概述 本篇文章主要概述Sqlserver思维导图. 2   具体内容 3   参考文献 [01]https://mp.weixin.qq.com/s/USNMslpvu7pWosMZnVTPd ...

  5. CentOS7系统卸载自带的OpenJDK并安装SUNJDK

    安装说明 系统环境: CentOS 7 安装方式: rmp安装 软件: jdk-8u111-linux-x64.rpm 下载地址: Oracle JDK 官网下载地址 卸载CentOS默认安装的Ope ...

  6. 自学Python1.2-环境的搭建：Pycharm及python安装详细教程

    Python几乎可以在任何平台下运行,如我们所熟悉的:Windows/Unix/Linux/Macintosh 一.windows下安装Python 1. 从python官方网站:http://www ...

  7. 「mysql优化专题」90%程序员没听过的存储过程和存储函数教学(7)

    一.MYSQL储存过程简介(技术文): 储存过程是一个可编程的函数,它在数据库中创建并保存.它可以有SQL语句和一些特殊的控制结构组成.当希望在不同的应用程序或平台上执行相同的函数,或者封装特定功能时 ...

  8. [原创]mysql的zip包如何在windows下安装

    今天在尝试zipkin的链路数据写入mysql,本机恰好没有按照mysql.找到一个很久前谁发的mysql-5.6.19-winx64.zip,版本不新?别挑剔啦,只是本机测试,能用就好哈哈.. 解压 ...

  9. Oracle11g不能导出空表问题

    ORACLE 11g 用exp命令导出库文件备份时,发现只能导出来一部分表而且不提示错误,之前找不到解决方案只能把没导出来的表重新建建立.后来发现是所有的空表都没有导出来.于是想好好查查,因为在以前的 ...

  10. Java 管程解决生产者消费者问题

    同样是实验存档.//.. 依然以生产者消费者问题作为背景. 管程(=“资源管理程序”)将资源和对资源的操作封装起来,资源使用者通过接口操作资源就 ok,不用去考虑进程同步的问题. 管程: packag ...