box-sizing 屬性應用

時間 2019-12-26

標籤 box sizing 屬性應用简体版

原文原文鏈接

本文轉載於:猿2048網站box-sizing 屬性應用php

一、box-sizing屬性功能css

官方說明文檔爲：http://www.w3school.com.cn/cssref/pr_box-sizing.asphtml

box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。bootstrap

通俗來講就是：定義盒模型尺寸。瀏覽器

box-sizing屬性有一下三種值：

box-sizing: content-box|border-box|inherit;

二、本文主要講解：border-box值框架

盒模型的寬度元內邊距（padding）和邊框（border）。網站

示例代碼：spa

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>box-sizing 屬性應用</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                /*關鍵屬性配置*/
                box-sizing: border-box;
            }
            #test{
                width: 200px;
                height: 200px;
                padding: 10px;
                border: 2px solid green;
            }
        </style>
    </head>

    <body>
       <div id="test">
           box-sizing 屬性應用
       </div>
    </body>

</html>