box-sizing

最新推荐文章于 2024-07-23 22:43:52 发布

VVVGG

最新推荐文章于 2024-07-23 22:43:52 发布

阅读量163

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/VVVZCS/article/details/82772207

版权

ES6 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

先来看box-sizing在W3C上的说明：

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

语法：

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

值：

content-box：

这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。（即标准盒模型）

border-box：

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（即怪异盒模型）

我们如果不写box-sizing属性，那么浏览器默认是标准盒模型

我们会看到盒模型的可视区域其实是 = 内容区 + padding + border 组成的，即盒子会向外扩张

对于怪异盒模型来说，我们的padding和border会占用盒模型的width和height，盒子不会向外扩张

可视区域 = 内容区

--------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    ul{
      list-style: none;
    }
    li{
      width: 25%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      background-color: #ccc;
      float: left;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>
<script>
</script>
</html>