css3两种盒模型的区别有哪些

这篇“css3两种盒模型的区别有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css3两种盒模型的区别有哪些”文章吧。

创新互联建站专注于临武企业网站建设,响应式网站开发,商城开发。临武网站建设公司,为临武等地区提供建站服务。全流程按需定制制作，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

区别：1、标准盒子的width和height就是内容区域的宽度和高度，而怪异模型的width和height是指“内容区域+border+padding”的宽度和高度；2、标准盒子增加内边距、边框和外边距不会影响元素的尺寸，而怪异模型会。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

盒子模型包括content（内容）、padding（内边距）、border（边框）、margin（外边距）

CSS中有两个盒子模型，分别是W3C标准模型和IE怪异模型。

引入：

<!DOCTYPE html>  
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html> 申明文档的解析类型，那么它到底有多重要呢
解析类型：
BackCompat：怪异模式，浏览器自己的模式
CSS1Compat:标准模式，W3C标准解析渲染页面
如果不做申明，则按照怪异模式进行渲染，不同的浏览器渲染有所不同

一、标准模型

css3两种盒模型的区别有哪些
W3C 标准模型

当我们对一个元素设置他的width和height的时候，标准盒模型只是对content(蓝色部分)设置了宽高，那么这个元素真正的宽高就还要加上他的padding(内边距)border（边框）margin（外边距）。

公式：

width = 内容的宽度
height = 内容的高度

二、怪异模型

css3两种盒模型的区别有哪些
怪异模型

当我们对一个元素设置他的width和height的时候，怪异盒模型把整个盒子看成是一个整体。给整个盒子一个宽高。如果你还给盒子设置了额外的边距和边框。那么中间的content蓝色部分就要受到挤压,变小。

公式：

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

W3C标准模型和IE怪异模型的主要区别是盒子的宽高。

①标准盒子的width和height表示内容content的宽高，width=内容的宽度、heigth=内容的高度；增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

②而怪异盒子的width包含padding、内容的宽度、border。height包含内容的高度、border、padding

width=（border-left+padding-left+内容的宽度+padding+right+border+right）

height=(border-top+padding-top+内容的高度+padding-bottom+border-bottom)

以上就是关于“css3两种盒模型的区别有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

文章名称：css3两种盒模型的区别有哪些
本文链接：https://www.cdcxhl.com/article18/ipggdp.html

成都网站建设公司_创新互联，为您提供、Google、移动网站建设、网站建设、ChatGPT、面包屑导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容