box-sizing 属性应用

最新推荐文章于 2024-08-04 22:27:53 发布

chuluxie3918

最新推荐文章于 2024-08-04 22:27:53 发布

阅读量96

点赞数

原文链接：https://my.oschina.net/u/4191619/blog/3102757

版权

本文转载于:猿2048网站box-sizing 属性应用

1、box-sizing属性功能

官方说明文档为：http://www.w3school.com.cn/cssref/pr_box-sizing.asp

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

通俗来说就是：定义盒模型尺寸。

box-sizing属性有一下三种值：

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

2、本文主要讲解：border-box值

盒模型的宽度元内边距（padding）和边框（border）。

示例代码：

<!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>