盒子的margin用法大家都应该很清楚，在实际中一般使用margin来水平居中或者让自己移动相应的位置，但是margin给负数在实际中也是有用的。

　　如图为两个浮动的盒子。

　　给左边的盒子margin-left: -50px;后如图所示

　　如图，蓝色盒子移动了，但是粉色盒子自身只是被压住了，并没有移动。

　　代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>margin负数Demo</title>
  6.     <style>
  7.     *{
  8.         padding: 0;
  9.         margin: 0;
  10.         /*清楚浏览器的默认效果以便看得清楚*/
  11.     }
  12.         .p1{
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: pink;
  16.             float: left;
  17. /*            margin-left: -5px;*/
  18.             margin-left: -50px;
  19.         }
  20.         .p2{
  21.             width: 200px;
  22.             height: 200px;
  23.             background-color: blue;
  24.             float: left;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="p1"></div>
  30.     <div class="p2"></div>
  31. </body>
  32. </html>

盒子模型的margin负数用法的更多相关文章

  1. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  2. 盒子模型之margin相关技巧！

    废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并 指当两个垂直外边距相遇时,它们将形成一个外 ...

  3. 【css】盒子模型 之 概述

    摘要 一些基本的概念以及常见使用问题 概述 BFC 是css 中布局的核心 - 盒模型,根据块级元素及行级元素可分为块级容器, 行级容器,但容器内部都遵循 BFC BFC 空间布局 备注: IE 的盒 ...

  4. Web前端面试指导(九)：盒子模型你是怎么理解的？

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  5. 标准盒子模型和IE盒子模型

    标准盒子模型 ＝ margin + border + padding + content (content =  width | height) IE盒子模型 ＝ margin + content ( ...

  6. IT兄弟连 HTML5教程 W3C盒子模型

    日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中.网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁.更美观.有很好的用户体验,则也需要 ...

  7. 溢出处理、盒子模型、背景图片、float（浮动）

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  8. 前端-----margin用法(盒子模型里补充)

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

  9. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

随机推荐

  1. 【转】selenium webdriver三种等待方法

    原文:https://www.cnblogs.com/lgh344902118/p/6015593.html webdriver三种等待方法 1.使用WebDriverWait from seleni ...

  2. 通过Metasploit生成各种后门

    生成windows后门 1.首先生成后门 [root@localhost ~]# msfvenom -p windows/meterpreter/reverse_tcp -e x86/shikata_ ...

  3. 12_python_生成器

    一.生成器 python中有三种方式获取生成器 (1)通过生成器函数 (2)通过各种推导式来实现生成器 (3)通过数据的转换也可以获取生成器   1.只要函数中存在了yield,那么这个函数就是一个生 ...

  4. EF6使用Mysql，踏过的那些坑

    在vs2013中使用mysql连接entityFramework经常会遇到这个问题:您的项目引用了最新实体框架:但是,找不到数据连接所需的与版本兼容的实体框架数据提供程序.请退出此向导,安装兼容提供程 ...

  5. 【sping揭秘】9、容器内部事件发布（二）

    写在前面---------------------------------- 命运多舛,痴迷淡然 不知下一步该往哪里走,现在应该是我的迷茫期... 加油,快点走出去!!! 聪明的网友们,你们有没有迷茫 ...

  6. dubbo管控台安装

    1. jdk安装 #  cp installpkgs/jdk-7u67-linux-x64_tar_gz /usr/local #  tar -zxf jdk-7u67-linux-x64_tar_g ...

  7. odoo开发笔记 -- 官方模块一览表

    模块名称 技术名称 作者 电子发票管理 account OpenERP SA 会计与财务 account_accountant OpenERP SA 合同管理 account_analytic_ana ...

  8. Cookies与session的区别

    Cookies 机制 Cookies是服务器在本地机器上存储的一段文本,并随每一个请求发送至同一个服务器. IETF RFC2965 HTTP State Management Mechanism 是 ...

  9. Spring mvc 4系列教程（三）—— Spring4.X的新特性

    1.Spring4.0的新特性 从2004年Spring的1.0发布后,后面又发布了很多重要的版本:Spring2.0提供了XML命令空间和AspectJ的支持:Spring2.5提出了注解驱动(an ...

  10. 走进javascript——它是什么？

    javascript不是什么 如<把时间当作朋友>的作者所说,"有些时候,有些事物,从反面描述比从正面描述更为容易.如若先仔细说清楚这本书不是什么,之后,至于它究竟是什么,很可能 ...