HTML的两种盒子模型

一、引入

在网站的制作中，一个复杂的页面，被划分为一个一个的小块。
通过这种划分，把网站的开发过程化整为零、化繁为简，以达到减少开发工作，减轻维护压力的目的。
在网页中，把这种划分后的小块形象的看成一个个的盒子。只有理解了盒子模型才能更好的排版，更好的编写网站界面

二、盒子的布局

把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。

ps：浏览器默认的margin值为8px！

三、两种盒子模型

w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。

ps：一般都使用标准的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing属性进行修改。

w3c的盒子模型

.test1{box-sizing:content-box;width:200px;padding:10px;border:15px solid #eee;
}

IE的盒子模型

.test1{box-sizing:border-box;width:200px;padding:10px;border:15px solid #eee;
}

四、总结

W3C盒模型是与IE盒模型的区别就是对宽高的定义不同。
W3C认为：宽高是内容区的宽度（只包含节点显示的具体内容）
IE认为：宽高是显示效果的实际效果（包含节点的全部内容）

HTML的两种盒子模型相关推荐

DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
CSS的两种盒子模型
前言在CSS的学习过程中,经常会遇到由不同盒子模型带来的误解问题.这篇文章举例分析了两种不同的盒子模型:W3C盒模型和IE盒模型. 一.W3C盒模型(标准盒模型) 下图为W3C盒模型: CSS中设置 ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
深度解析两种信用评估模型
"大数据"概念的最早出现,是从2012年2月份纽约时报一篇文章开始的.到目前为止,在大数据领域当中的投资已经越来越热,该领域企业越来越多.大数据在美国金融当中最直接的场景,主要运用 ...
以两种异步模型应用案例，深度解析Future接口
摘要:本文以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类. 本文分享自华为云社区<[精通高并发系列]两种异步模型与深度解析Future接口(一) ...
C/S和BS两种开发模型
C/S和BS两种开发模型一.什么是C/S开发模式? 二.什么是B/S开发模式? 三.C/S和B/S的优缺点一.什么是C/S开发模式? C/S⼜称Client/Server或客户/服务器模式.服务器 ...
JMS的两种消息模型(Point-to-Point（P2P）和Publish/Subscribe（Pub/Sub）)应用举例
http://wuzhaohuixy-qq-com.iteye.com/blog/908395 1.P2P模型在P2P模型中,有下列概念:消息队列(Queue).发送者(Sender).接收者(Re ...
Hotspot虚拟机的两种架构模型
市面上的java虚拟机有很多种,整体来说分两种架构特点:栈.寄存器一.基于栈架构的特点(市面上常见的java虚拟机大多的架构方式) 设计实现更简单不需要考虑寄存器分配问题(使用零地址指令方式分配) ...
java model1和model2_Java项目(4)——探究两种开发模型的异同-Model1与Model2
弱弱的说一句: jsp在web服务器上,这一点应该没有疑问吧? 首先很俗套地看下两个模型. Model1就是实现,实现就行,系统简单,谈不上架构,正如简单工厂并不算在23个常用设计模式之列一样.Mod ...