盒子模型的margin負數(shù)用法

Ververica 發(fā)布于2019-04-23 13:39 / 3483人閱讀

摘要：盒子的用法大家都應(yīng)該很清楚，在實際中一般使用來水平居中或者讓自己移動相應(yīng)的位置，但是給負數(shù)在實際中也是有用的。如圖為兩個浮動的盒子。代碼如下負數(shù)清楚瀏覽器的默認效果以便看得清楚

　　盒子的margin用法大家都應(yīng)該很清楚，在實際中一般使用margin來水平居中或者讓自己移動相應(yīng)的位置，但是margin給負數(shù)在實際中也是有用的。

　　如圖為兩個浮動的盒子。

　　給左邊的盒子margin-left: -50px;后如圖所示

　　如圖，藍色盒子移動了，但是粉色盒子自身只是被壓住了，并沒有移動。

　　代碼如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin負數(shù)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云服務(wù)器云服務(wù)器盒子模型負數(shù)的平方 c語言 div盒子的切換 html盒子的布局

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2160.html

相關(guān)文章

盒子模型

摘要：是外邊距，是一個盒子與另外一個盒子的距離沒有浮動的情況下上下疊加，取大值。有浮動的情況下，兩個外邊距相加例如第一個盒子的樣式第二個盒子的樣式如上圖所示，理論上上面的和下面的應(yīng)該相加等于，但是這里注意了，取較大的值作為這個盒子的距離。 padding padding: 10px; 表示上下左右的內(nèi)邊距都是10像素 padding: 0 10px; 表示左右的內(nèi)邊距為10像素 pa...

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

摘要：是外邊距，是一個盒子與另外一個盒子的距離沒有浮動的情況下上下疊加，取大值。有浮動的情況下，兩個外邊距相加例如第一個盒子的樣式第二個盒子的樣式如上圖所示，理論上上面的和下面的應(yīng)該相加等于，但是這里注意了，取較大的值作為這個盒子的距離。 padding padding: 10px; 表示上下左右的內(nèi)邊距都是10像素 padding: 0 10px; 表示左右的內(nèi)邊距為10像素 pa...

BigTomato 2019-08-29 13:53 評論0 收藏0
【零基礎(chǔ)入門】 css學習筆記（2）盒模型

摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節(jié)一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性：從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...

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

摘要：盒子模型作用盒子模型就是一個盒子，封裝周圍的元素。允許我們在其他元素和周圍元素邊框的空間放置元素。 1、盒子模型作用：盒子模型就是一個盒子，封裝周圍的html元素。允許我們在其他元素和周圍元素邊框的空間放置元素。2、組成：外邊距（margin）：相鄰的兩個盒子margin，會發(fā)生折疊，可為負數(shù)邊框（border）：內(nèi)邊距（padding）：實際內(nèi)容（content）：百分比相對于父容器...

Crazy_Coder 2019-08-30 13:59 評論0 收藏0
CSS 盒模型簡介

摘要：左右和會起作用。外邊距合并當一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。一、盒子模型概述盒子模型是CSS的基石,指定標簽如何顯示；頁面上的每個元素都被當成一個矩形盒子,占據(jù)一定的頁面空間,這個盒子由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊界（m...

netmou 2019-08-30 15:55 評論0 收藏0