盒子模型的margin负数用法

Ververica 发布于2019-04-23 13:39 / 3358人阅读

摘要：盒子的用法大家都应该很清楚，在实际中一般使用来水平居中或者让自己移动相应的位置，但是给负数在实际中也是有用的。如图为两个浮动的盒子。代码如下负数清楚浏览器的默认效果以便看得清楚

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

　　如图为两个浮动的盒子。

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

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

　　代码如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin负数Demotitle>
    <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>

GPU云服务器云服务器盒子模型负数的平方 c语言 div盒子的切换 html盒子的布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2160.html

盒子模型

摘要：是外边距，是一个盒子与另外一个盒子的距离没有浮动的情况下上下叠加，取大值。有浮动的情况下，两个外边距相加例如第一个盒子的样式第二个盒子的样式如上图所示，理论上上面的和下面的应该相加等于，但是这里注意了，取较大的值作为这个盒子的距离。 padding padding: 10px; 表示上下左右的内边距都是10像素 padding: 0 10px; 表示左右的内边距为10像素 pa...

魏明 2019-08-02 15:58 评论0 收藏0
盒子模型

摘要：是外边距，是一个盒子与另外一个盒子的距离没有浮动的情况下上下叠加，取大值。有浮动的情况下，两个外边距相加例如第一个盒子的样式第二个盒子的样式如上图所示，理论上上面的和下面的应该相加等于，但是这里注意了，取较大的值作为这个盒子的距离。 padding padding: 10px; 表示上下左右的内边距都是10像素 padding: 0 10px; 表示左右的内边距为10像素 pa...

BigTomato 2019-08-29 13:53 评论0 收藏0
【零基础入门】 css学习笔记（2）盒模型

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性：从内往外： width:内容的宽度，而不是盒子的宽度； hei...

mrcode 2019-08-30 15:53 评论0 收藏0
css—盒子模型理解

摘要：盒子模型作用盒子模型就是一个盒子，封装周围的元素。允许我们在其他元素和周围元素边框的空间放置元素。 1、盒子模型作用：盒子模型就是一个盒子，封装周围的html元素。允许我们在其他元素和周围元素边框的空间放置元素。2、组成：外边距（margin）：相邻的两个盒子margin，会发生折叠，可为负数边框（border）：内边距（padding）：实际内容（content）：百分比相对于父容器...

Crazy_Coder 2019-08-30 13:59 评论0 收藏0
CSS 盒模型简介

摘要：左右和会起作用。外边距合并当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。一、盒子模型概述盒子模型是CSS的基石,指定标签如何显示；页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（m...

netmou 2019-08-30 15:55 评论0 收藏0