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

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

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

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

　　如圖為兩個(gè)浮動(dòng)的盒子。

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

　　如圖，藍(lán)色盒子移動(dòng)了，但是粉色盒子自身只是被壓住了，并沒有移動(dòng)。

　　代碼如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin負(fù)數(shù)Demotitle>
    <style>
    *{
        padding: 0;
        margin: 0;
        /*清楚瀏覽器的默認(rèn)效果以便看得清楚*/
    }
        .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ù)器盒子模型負(fù)數(shù)的平方 c語言 div盒子的切換 html盒子的布局

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2160.html

相關(guān)文章

盒子模型

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

魏明 2019-08-02 15:58 評(píng)論0 收藏0
盒子模型

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

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

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

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

摘要：盒子模型作用盒子模型就是一個(gè)盒子，封裝周圍的元素。允許我們?cè)谄渌睾椭車剡吙虻目臻g放置元素。 1、盒子模型作用：盒子模型就是一個(gè)盒子，封裝周圍的html元素。允許我們?cè)谄渌睾椭車剡吙虻目臻g放置元素。2、組成：外邊距（margin）：相鄰的兩個(gè)盒子margin，會(huì)發(fā)生折疊，可為負(fù)數(shù)邊框（border）：內(nèi)邊距（padding）：實(shí)際內(nèi)容（content）：百分比相對(duì)于父容器...

Crazy_Coder 2019-08-30 13:59 評(píng)論0 收藏0
CSS 盒模型簡介

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

netmou 2019-08-30 15:55 評(píng)論0 收藏0