负边距

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

当块级元素设置 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. 项目实战13—企业级虚拟化Virtualization-KVM技术

    项目实战系列,总架构图 http://www.cnblogs.com/along21/p/8000812.html KVM的介绍.准备工作和qemu-kvm 命令详解 1.介绍 (1)介绍 KVM:就 ...

  2. SpringMVC实现JSON与前台交互

    这几天忙着做学校的项目,感觉好久没有更新博客了,来整理一下. 由于要实现的功能是表单联动,只能自己去写ajax来实现提交给后台接口了,好久没有写前端,好多东西都忘记了,只能可怜巴巴的用原生的js去实现 ...

  3. 【转】JAVA处理线程超时

    在实际业务中,由其是多线程并开业务中,经常会遇到某个线程执行超时.而程序如果不捕获这类情况,就会导致程序一直处于等待状态,从而影响后续线程的运行.比如说网络通迅.单任务下的复杂数据库查询等,通常处理这 ...

  4. 为什么要使用消息认证码（MAC）而非对称密钥？

    问题: 看了消息认证码的介绍后,小丽心想"如果用对称密码将消息加密后再发送的话,是不是就不需要消息认证码了呢?"原因有下: 1.对称密码的密文只有使用和加密时相同的密钥才能正确解密 ...

  5. arm-linux-androideabi-4.8/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-g++: Command not found 解决方法

    执行下列命令时: ndk-build -j16 出现如下错误: Android NDK: WARNING: Ignoring unknown import directory: jni/../../. ...

  6. oracle 主键自增 设置----杜恩德

    <div id="topicList"> <div class="forFlow"> <div class = "pos ...

  7. TypeScript学习笔记之类

    TypeScript的类,简单地定义如下: class Person { x: number; // 默认为public类型 y: number; constructor(x1: number, y1 ...

  8. 《python参考手册(第四版)》【PDF】下载

    <python参考手册(第四版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382222 内容介绍 本书是权威的Python语 ...

  9. JavaScript闭包基本概念

    闭包的概念 维基百科中是这么解释闭包的: 计算机科学中,闭包(也称为词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑定在一起.这个函数环境是一个存储该函数每个非局部变量(也叫自由变量)的 ...

  10. 【二十六】php之文件编程

    1.获取文件的相关信息 fopen.fstat.fclose(打开文件.获取文件相关信息.关闭文件) filesize.filectime.filemtime.fileatime(文件大小.上次cha ...