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>

F12审查元素：ssr

box-sizing: border-box; 在移动端应用不少！code

在bootstrap框架中也应用，全部的元素的默认盒模型均为 box-sizing: border-box;：

三、兼容性

http://caniuse.com/#search=box-sizing

兼容IE8以上主流浏览器！