css标准,float元素上的负margin表示把下面的元素向对应方向移动,并且覆盖上一个元素(这里是指html中元素的声明顺序)。

标准情况下我们用float 时候是这样的。

-margin通俗点说,就是将盒子的大小减小,但是不影响显示。

当给一个盒子宽度为200px添加一个margin-left:-200px的时候,其实整个盒子的宽度已经是  0

这就是为什么说-margin其实不脱离文档流。。因为改变的只是他在文档中的实际宽度。

上面的例子当中,要怎样使红色盒子在右边,黄色盒子在左边显示?

因为绿色盒子宽度已经是100%了,已经没有位置可以放的下去,这时候,我们就要用到-margin。将盒子的实际宽度减为0;

首先 给红黄两个盒子添加-margin 数值等于盒子宽度。看显示

现在显示成这样,上面已经说过了。盒子的实际宽度其实已经是0了。所以盒子可以摆放的进来。

这样就很好办了。。现在让红色盒子在左边显示。我们只要给盒子设置position: relative;然后left:200px;那么红色盒子相对原先的位置移动200就填充了左边的空白

黄色盒子怎么才能在右边显示呢,这里我们就是用不了position: relative;然后定right了。。因为绿色盒子的宽度我们不知道。

所以这里可以设置margin-left:-100%; 那么显示的位置就是100% - 100的位置。。

修改后

然后在设置position: relative;left:-100px;

ps:如果设置红色盒子margin-rigth会是什么情况。。。

那样就更方便了,不用设置position: relative;

当全部设置margin-right 负值

其实只要理解一点,margin-left:从左边剪掉宽度。居左显示。

margin-right从右边剪掉宽度。居右显示。

float元素上-margin的用法的更多相关文章

  1. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  2. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  3. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  4. IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法

    IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.

  5. 好程序员分享居中一个float元素

    好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果.对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin: ...

  6. margin的用法

    margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...

  7. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  8. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  9. canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

    canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...

随机推荐

  1. springboot引入Oracle依赖

    最近学习spring boot,在网上找一些项目学习,有的项目引入了oracle驱动包,自己搭建一直不成功,百度发现说是权限问题无法下载. 然后参考下面博客终于解决:springboot引入Oracl ...

  2. Codeforces 1204D2. Kirk and a Binary String (hard version) (dp思路)

    题目链接:http://codeforces.com/contest/1204/problem/D2 题目是给定一个01字符串,让你尽可能多地改变1变为0,但是要保证新的字符串,对任意的L,R使得Sl ...

  3. C语言程序设计100例之(27):回旋方阵

    例27        回旋方阵 问题描述 编写程序,生成从内到外是连续的自然数排列的回旋方阵.例如,当n=3和n=4时的回旋方阵如下图1所示. 图1  由内到外回旋方阵 输入格式 一个正整数n(1≤n ...

  4. 题解【Codeforces1186A】 Vus the Cossack and a Contest

    这题是入门难度的题目吧-- 根据题意可以得出,只有当\(m\)和\(k\)都大于等于\(n\)时,\(Vus\)才可以实现他的计划. 因此,我们不难得出以下\(AC\)代码: #include < ...

  5. mybatis--多对一关联

    (1)首先,创建数据库mybatismanytoone并插入数据 create database mybatismanytoone; use mybatismanytoone; create tabl ...

  6. Ansible - 配置文件

    概述 再水一发 ref Ansible Configuration Settings 1. 查看 概述 查看 配置文件 的默认位置 命令 > ansible --version 结果 confi ...

  7. IDE - IDEA - tab - 方法相关的移动

    1. 概述 标题可能会改 一个 tab 里方法相关的操作 2. 前提 以默认的模式编辑 tab 对我来说, 就关掉 vim 插件 3. 操作 1. 查看文件结构 概述 唤出当前文件的 结构 唤出后可以 ...

  8. 多表更新:update,join

    1.多表更新: 下面我建两个表,并执行一系列sql语句,仔细观察sql执行后表中数据的变化,很容易就能理解多表联合更新的用法. 前期准备工作: update join_teacher_class jo ...

  9. java中Integer面试的坑

    class Test{ public static void main(String[] args){ //当值在[-128,127]中,不创建新的Integer Integer f1 = 100,f ...

  10. eclipse链接mySQL数据库常见错误

    1错误: 解决: 2,用户名输入错误 解决:查看自己的正确用户名https://zhidao.baidu.com/question/248308313.html 3. 解决: 链接示例:https:/ ...