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

　　如图为两个浮动的盒子。

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

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

　　代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin负数Demo</title>

    <style>

    *{

        padding: 0;

        margin: 0;

        /*清楚浏览器的默认效果以便看得清楚*/

    }

        .p1{

            width: 100px;

            height: 100px;

            background-color: pink;

            float: left;

/*            margin-left: -5px;*/

            margin-left: -50px;

        }

        .p2{

            width: 200px;

            height: 200px;

            background-color: blue;

            float: left;

        }

    </style>

</head>

<body>

    <div class="p1"></div>

    <div class="p2"></div>

</body>

</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. PS插件CameraRaw-HSL色彩模式

    一.HSL百度百科 HSL色彩模式是工业界的一种颜色标准,是通过对色相(H).饱和度(S).明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色相,饱和度,明度三 ...

  2. 识别同音字词pypinyin, 分词 jieba

    一.pypinyin 在处理语音输入指令时, 比如 请给圆圆发消息,那么转化为文字识别时, 无法确定转换的是圆圆还是园园或是源源, 为了解决这个问题, 就把指令转换为拼音来处理,这样就可以处理同音字了 ...

  3. [luogu 5301][bzoj 5503] [GXOI/GZOI2019] 宝牌一大堆

    题面 好像ZJOI也考了一道麻将, 这是要发扬中华民族的赌博传统吗??? 暴搜都不会打, 看到题目就自闭了, 考完出来之后看题解, \(dp\), 可惜自己想不出来... 对于国士无双(脑子中闪过了韩 ...

  4. 题解 P5091 【【模板】欧拉定理】

    欧拉定理:若 \(gcd(a,n)=1\),\(a^{\varphi(n)}\equiv 1(mod\ n)\) 设 \(1\sim n-1\) 中与 \(n\) 互素的 \(\varphi(n)\) ...

  5. USACO December 铂金Maxflow

    USACO 2015 December Contest, Platinum Problem 1. Max Flow Farmer John has installed a new system of ...

  6. win7 docker 挂载共享目录

    在 win7 下用 docker 不像 win10 那样方便,安装包都不一样. 在 win7 下共享一个目录的方法如下: 1. 先设置 win7 到 VirtualBox 中 docker 用的那个虚 ...

  7. Keras学习笔记——Hello Keras

    最近几年,随着AlphaGo的崛起,深度学习开始出现在各个领域,比如无人车.图像识别.物体检测.推荐系统.语音识别.聊天问答等等.因此具备深度学习的知识并能应用实践,已经成为很多开发者包括博主本人的下 ...

  8. Python网络练习题

    练习题 什么是C/S架构? C/S架构客户端.服务端架构,C/S端软件主要有网络游戏,QQ等 互联网协议是什么?分别介绍五层协议中每一层的功能? 互联网协议:计算机之间的通信标准 物理层:主要是基于电 ...

  9. crontab命令使用文档.txt

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  10. Linux环境下Java中文乱码解决方案

    相信很多朋友遇到过Java的乱码问题,最近我也在解决一个“使用文本生成图片过程中中文以及特殊字符乱码”的问题:花了我大量时间,Debug了sun.font.sun.awt下面的各种源码,终于搞懂了其机 ...