CSS3介绍

原创

菜园前端 2023-02-27 19:54:40 ©著作权

文章标签 盒子模型盒模型旧版 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者菜园前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是 CSS3？

CSS3 是 CSS 一个新的标准，直接理解为是 CSS 的升级版，里面新增了很多样式（特性）。

CSS3 盒子模型

注意

CSS3 盒子模型必须要掌握，否则你在实际开发中遇到样式错乱很难排查问题。

旧版的 IE 浏览器与其它浏览器解析盒子模型会出现差异，例如 IE 会把 border 边框和 padding 内边距计算在盒子的 width / height 宽度里面，而其它浏览器则是相反，不包含 border 边框和 padding 内边距的。但是在实际开发中，前者是相对更加灵活的，但是 W3C 规范中规定了它们不能被包含在其中，为了解决这个问题，在新的 css3 标准中新增了 box-sizing 属性，用于切换两种盒子模型。

可以把所有 HTML 标签都理解成一个盒子，例如 div 标签。

盒子模型主要由 4 个部分组成：content padding border margin

标准盒模型（W3C 盒模型） content-box

当我们设置 box-sizing: content-box; 时，浏览器会按照 W3C 标准进行解析，将 border 和 padding 不计算在 width 或 height 其中。

CSS3介绍_盒模型

width = content

height = content

怪异盒模型（IE 盒模型） border-box

当我们设置 box-sizing: content-box; 时，浏览器会按照旧版的 IE 标准进行解析，将 border 和 padding 计算在 width 或 height 其中。

CSS3介绍_旧版_02

width = content + padding + border

height = content + padding + border

<body>
    <div class="content-box">content</div>
    <div class="border-box">border</div>
</body>

<style>
    .content-box {
        padding: 20px;
        width: 100px;
        height: 100px;
        background-color: #5cd8a2;
        box-sizing: content-box;
    }

    .border-box {
        padding: 20px;
        width: 100px;
        height: 100px;
        background-color: #ff8077;
        box-sizing: border-box;
    }
</style>