CSS盒子模型box-sizing属性详解

最新推荐文章于 2024-05-20 14:00:52 发布

oneheart初心

最新推荐文章于 2024-05-20 14:00:52 发布

阅读量1.2w

点赞数 21

分类专栏： CSS 文章标签： css3 css html 前端 chrome

本文链接：https://blog.csdn.net/qq_34466755/article/details/109460794

版权

CSS 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一、box-sizing属性

box-sizing属性的三个值：
content-box，border-box，inherit

content-box
chrome浏览器默认的盒子属性值。
content-box的width和height从content算起，不包含border和padding。
border-box
IE浏览器默认的盒子属性值。
border-box的width和height从border算起,包含border和padding
inherit
inherit 关键字指定一个属性应从父元素继承它的值。

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="lanye" />
  <meta name="description" content="HTML CSS JavaScript" />
  <meta name="generator" content="" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <title>Document</title>
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
  <![endif]-->
  <style>
    /*content-box的width和height从content算起，不包含border和padding*/
    .chrome {
      width: 100px;
      height: 100px;
      background-color: green;
      border: 5px solid black;
      padding: 5px;
      box-sizing: content-box;
    }

    /*border-box的width和height从border算起,包含border和padding*/
    .ie {
      border: 5px solid black;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      background-color: red;
      padding: 5px;
      position: relative;
      bottom: 110px;
      left: 10px;
    }
  </style>
</head>

<body>
  <div class="chrome"></div>
  <div class="ie"></div>
</body>

</html>

chrome显示如下：
在这里插入图片描述
IE显示如下：

二、 content-box和border-box的区别

当width和height属性设置为同一个值时，content-box的内容区域大小等于border-box整个盒子的大小。content-box额外多出来border和padding区域的大小。
content-box的width，height与padding，border的大小无关。border-box的width，height与padding，border的大小有关。

oneheart初心

关注

21
点赞
踩
138

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型box-sizing属性详解

1.content-boxchrome浏览器默认的盒子属性值。content-box的width和height从content算起，不包含border和padding。2.border-boxIE浏览器默认的盒子属性值。border-box的width和height从border算起,包含border和padding<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" />
复制链接

扫一扫