2. 程式人生 > >padding ,margin百分比賦值時（無論豎，橫）都是相對於容器寬度的

padding ,margin百分比賦值時（無論豎，橫）都是相對於容器寬度的

阿新 • • 發佈：2019-01-03

你未必知道的CSS小知識：元素豎向的百分比設定是相對於容器的寬度，而不是高度!

這是一個很讓人困惑的CSS特徵，我之前也談到過它。我們大家都知道，當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

下面是一個例項演示，你可以調整容器的寬度，但你會發現，黃塊塊的padding-bottom的距離也會隨之寬度而變大或變小。

<!DOCTYPE html>
<html
 
>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style type="text/css">
            body {
                font-family: Arial, sans-serif;
                padding-top: 30px;
                text-align: center;
            }

            .wrapper
 
 {
                width: 400px;
                margin: 0 auto;
                border: solid 1px black;
            }

            .box {
                width: 100px;
                height: 100px;
                background: gold;
                margin-left: auto;
                margin-right: auto;
                padding-top
 
: 10%;
                padding-bottom: 10%;
                margin-bottom: 5%;
            }

            .range {
                display: block;
                margin: 20px auto;
            }

            output {
                text-align: center;
                display: block;
                font-weight: bold;
                padding-bottom: 20px;
            }

            output span {
                font-weight: normal;
            }
        </style>
    </head>

    <body>
        <div class="wrapper" id="w">
            <div class="box" id="b"></div>
        </div>

        <input type="range" min="120" max="400" value="400" class="range" id="r">
        <output>寬度是: <span id="op">400px</span></output>
        <output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>
    </body>
    <script type="text/javascript">
        var cw = document.getElementById('w'),
            r = document.getElementById('r'),
            b = document.getElementById('b'),
            op = document.getElementById('op'),
            op2 = document.getElementById('op2');

        r.onchange = function() {
            cw.style.width = this.value + 'px';
            op.innerHTML = this.value + 'px';
            op2.innerHTML = window.getComputedStyle(b, null).getPropertyValue('padding-top');
        };
    </script>

</html>

這裡寫圖片描述
上面的程式碼中，我們對內部子元素聲明瞭3個豎向的距離，都是百分比形式。當移動滑塊時，我們的js程式碼只需修改了容器的寬度。但是，這個這三個屬性高度都跟隨著變化，可以看出，它們的百分比計算是基於容器的寬度，而不是高度的

相關推薦

padding ,margin百分比賦值時（無論豎，橫）都是相對於容器寬度的

你未必知道的CSS小知識：元素豎向的百分比設定是相對於容器的寬度，而不是高度! 這是一個很讓人困惑的CSS特徵，我之前也談到過它。我們大家都知道，當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如padding

深入C++的拷貝構造和賦值函式 （深拷貝，淺拷貝）

參考了：點選開啟連結以及《高質量程式設計指南C++/C語言》 說明 拷貝建構函式是一種特殊的建構函式。相同型別的類物件是通過拷貝建構函式來完成整個複製過程的。 函式的名稱必須和類名稱一致。 它的引數是唯一的，該引數是const型別的引用變數。例如 類X的拷貝建構函式的形式為

C/C++——賦值理解（匿名臨時對象）

tex 類型 裏的 target tor 空間 創建 強類型語言 賦值 對三，王炸： 賦值的本質，是將變量傳遞給一個匿名臨時變量，之後再傳遞給另一個變量。 匿名臨時對象： #include <iostream> using namespace std;

當padding/margin的取值形式為百分比時。。。。。

基礎 https 技術分享 因此 w3c 就會 頁面 org 圖片加載 一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！也許你會說，left/r

c++類的拷貝、賦值與銷毀（拷貝構造函數、拷貝賦值運算符析構函數）

錯誤 保存 編譯 oid 生成 標準庫 int 為什麽 explicit 拷貝構造函數 如果一個構造函數的第一個參數是自身類類型的引用，且任何額外參數都有默認值，則此構造函數是拷貝構造函數。 拷貝構造函數第一個參數必須是一個引用類型。此參數幾乎總是一個con

MySQL中變量的定義和變量的賦值使用（轉）

會話 uic log 等於 name 選項 variable sql decimal 說明：現在市面上定義變量的教程和書籍基本都放在存儲過程上說明，但是存儲過程上變量只能作用於begin...end塊中，而普通的變量定義和使用都說的比較少，針對此類問題只能在官方文檔中才能找

變量和不同的賦值方式（四）

makefile 簡單賦值（:=） 遞歸賦值（=） 條件賦值（?=） 追加賦值（+=） 在 makefile 中是支持程序設計語言中變量的概念的，makefile 中的變量只代表文本數據（字符串）。那麽在 makefile 中的變量名的規則又有哪些呢？a> 變量名可以

textarea賦值時換行符無效的解決方法

字符串 spa substring 開始 repl tar txt json 兩個 1 //替換字符串中的換行符為br 2 var Content = JSON.stringify(txt); 3 Content = Content.replace(/\\n/g,

Java中List<E>對象賦值問題（深淺拷貝）

不能 沒有 add size for .get one util contains Java中List<E>對象賦值操作問題 業務需求是：取2個集合中的交集對象並返回。如下代碼，busMap中key值和stocks中Map中的key值相等的對象則返回繼續操作，

關於"&"操作符在變量賦值時的使用

變量 聲明變量 地址 現在 變量賦值 var_dump 發生 引用 關於 //聲明變量a,並賦值為123$a = "123"; //打印變量a的值為123var_dump($a); //聲明變量b,並將變量a的引用(地址)指向變量b$b = &$

python的類的屬性，可以不用宣告，在賦值時直接生效

資料屬性相當於Smalltalk中的例項變數，和C++中的資料成員。資料屬性不需要宣告，像區域性變數一樣，當第一次給它分配值的時候，它就立即建立並存在了。 data attributes correspond to “instance variables” in Smalltalk, and t

火狐瀏覽器用audio標籤，利用js給audio的src屬性賦值問題（這個問題 好像只有火狐才有）

html原始碼： <audio controls="controls" src="" id="src"/> js原始碼： var fileName=""; $(function(){ var locationUrl=window.location.href; var paramList =

八大基本變數在賦值時需要注意的一個原則

java中的變數型別： 1.數值型變數： byte    short    int    long（長度排序） 2.字元型別： char（單個字元）   String（字串） 3.浮點型別： float（單精

複合賦值運算子（Compound Assignment Operators）問題：a=a+b 真的等同於a+=b嗎？

首先看一個問題： int a=1; a=a+2L; System.out.println(a); 這段程式碼是不能通過編譯的，因為a+2L計算結果是long型別的，即3L，賦值給a,會損失精度，所以編譯失敗；如果最終賦值給long類新的變數，是可以的，如下： int a=1; long

mybatis免sql外掛之JpaMapper-以Jpa hibernate的風格寫mybatis（主鍵賦值策略及useGeneratedKeys無效的坑）

mybatis免sql外掛之JpaMapper-以Jpa hibernate的風格寫mybatis（主鍵賦值策略及useGeneratedKeys無效的坑） 簡介 JpaMapper以Jpa hibernate的風格寫mybatis的程式碼，可以減少手動寫sql的煩惱。 優勢：

C++：對結構體中字元陣列賦值時，出現表示式必須是可修改的左值的問題

問題描述：         在C++中為結構體中的字元陣列賦值時，出現”表示式必須是可修改的左值“的錯誤提醒，編譯報錯“不可指定資料型別”。           &n

spring controller介面中，用pojo物件接收頁面傳遞的引數，發現spring在對pojo物件賦值時，有一定順序的問題

1、我的專案中的實體類都繼承了基類entityBase,裡面封裝了分頁的一些屬性，pageindex、pagesize、pagerownum等。 2、思路是頁面可以靈活的傳遞分頁引數，比如當前頁pageindex=1、每頁總數pagesize=6等靈活請求資料。然後可以根據當前頁pageindex的賦值，來

spring controller接口中，用pojo對象接收頁面傳遞的參數，發現spring在對pojo對象賦值時，有一定順序的問題

根據 自動 nbsp pojo spring ron 接口 () size 1、我的項目中的實體類都繼承了基類entityBase,裏面封裝了分頁的一些屬性，pageindex、pagesize、pagerownum等。 2、思路是頁面可以靈活的傳遞分頁參數，比如當前頁pa

MySQL中變數的定義和變數的賦值使用（轉）

說明：現在市面上定義變數的教程和書籍基本都放在儲存過程上說明，但是儲存過程上變數只能作用於begin...end塊中，而普通的變數定義和使用都說的比較少，針對此類問題只能在官方文件中才能找到講解。 前言 MySQL儲存過程中，定義變數有兩種方式：  1、使用set或select直接賦值，變數名以@開頭 例如:

Revit二次開發—賦值問題（單位轉化）

通過二次開發設定引數值，存在單位轉化問題 原因：Revit內部基本單位是英尺（foot），如果要獲取或設定構件引數數值需要進行單位轉換   1英尺 = 304.7999995367 mm = 304.8 mm 可以使用RevitAPI內建的轉換函式進行目標單