CSS两种盒子模型

盒子模型有两种，分别为标准 W3C 盒子模型和 IE 盒子模型。他们对盒子模型的解释各不相同。

我们先来看熟悉的标准 W3C 盒子模型：

从上图可以看出，标准 W3C 盒子模型的范围包括 margin、border、paddding、content，并且 content 宽度计算不包括其他部分。

再来看 IE 盒子模型:

从上图可以看到 IE 盒子模型的范围也包括 margin、border、paddding、content，不同的是，content 宽度计算包含了 border 和 paddding。

问：应该选择哪种盒子模型呢？

答：当然是“标准 W3C 盒子模型”了。

问：怎么样才算是选择了“标准 W3C 盒子模型”呢？

答：很简单，就是在网页的顶部加上 DOCTYPE 声明。那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

<!DOCTYPE html>
时间： 2024-10-10 00:26:01

CSS两种盒子模型的相关文章

DIV+CSS两种盒子模型（W3C盒子与IE盒子）

在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 特点: 每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置

css的两种盒子模型

css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其他部分:IE盒子模型的content部分包含border.padding部分. 举例说明:一个盒子模型margin为10px,border为2px,padding为5px,content为100px,高为50px. 1.W3C标准盒子模型 盒子需要占据的位置:宽10*2+2*2+5*2+100=13

CSS两种盒模型

盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别就是元素的宽度,元素的width=border + padding + content IE定义的盒模型较为合理,所以在css3中新增了box-sizing,包含两个属性content-box和border-box. content-box 元素的width = content  border-bo

CSS学习之盒子模型

1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容. 2. 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距. border:边框. margin:外边距. 盒子模型的示意图:

CSS学习摘要-盒子模型

注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容.内边距.边界和外边距像洋葱的膜那样,一层包着一层构建起来.浏览器渲染网页布局时,它会算出每个框的内容要用什么样式,周围的洋葱层有多大,以及框相对于其它框放在哪里.在理解如何创建 CSS 布局之前,你需要理解框模型. 框属性 文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的CSS

JMS两种消息模型

前段时间学习EJB,接触到了JMS(Java消息服务),JMS支持两种消息模型:Point-to-Point(P2P)和Publish/Subscribe(Pub/Sub),即点对点和发布订阅模型. 个人觉得这两个模型挺容易理解的,因为生活中的例子还挺多的. 1,  P2P模型 有以下概念:消息队列(Queue).发送者(Sender).接收者(Receiver).每个消息都被发送到一个特定的队列,接收者从队列获取消息.队列保留着消息,直到它们被消费或超时. (1) 每个消息只有一个消费者(Co

CSS Flexbox 弹性盒子模型

CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. flex-direction: 值 row | row-reverse | column | column-reverse默认值 row flex-wrap: 值 nowrap | wrap | wrap-reverse默认值 nowrap flex-flow: 值 <flex-direction>

css的两种盒模型

W3C标准盒模型 在标准盒模型中,width指content部分的宽度. IE的盒模型 在IE盒模型中,width表示content+padding+border这三个部分的宽度 box-sizing的使用 定义使用哪种盒模型的属性 box-sizing:content-box  是W3C 盒子模型 box-sizing:border-box 是IE盒子模型也叫怪异模型 box-sizing:padding-box   padding计算入width内,不包括border 原文地址:https:

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin.border.padding.content,和标准 w3c 盒子模型不同的是