盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

　　当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

　　<!DOCTYPE HTML>
　　以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式
　　box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

　　在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin
　　　　　　　　
　　在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
　　　　也就是盒子宽高 = 内容区域的宽高+padding+border;
　　　　　　　　
　　 那么，在此基础上介绍一下css3属性box-sizing;

　　　　box-sizing有两个值一个是content-box，另一个是border-box。



　　　　当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；




　　　　当设置为box-sizing:border-box时，将采用怪异模式解析计算；


　　　　　　目前使用此属性需要添加前缀：


　　　　　　　　-webkit-box-sizing: content-box;

　　　　　　　　-moz-box-sizing: content-box;


												


											
CSS的两种盒模型的更多相关文章
	

    
								
  1. css的两种盒子模型
		
    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
    
		
    2. 
						
  2. 深入css布局篇(1) — 盒模型 & 元素分类
		
    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
    
		
    3. 
						
  3. DIV+CSS两种盒子模型（W3C盒子与IE盒子）
		
    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
    
		
    4. 
						
  4. 前端开发：css基础知识之盒模型以及浮动布局。
		
    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...
    
		
    5. 
						
  5. CSS的两种格式化上下文：BFC和IFC
		
    CSS的两种格式化上下文   文章包含很多个人理解,如果错误,欢迎指出~   在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...
    
		
    6. 
						
  6. css文档之盒模型阅读笔记
		
    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
    
		
    7. 
						
  7. JMS两种消息模型
		
    前段时间学习EJB.接触到了JMS(Java消息服务),JMS支持两种消息模型:Point-to-Point(P2P)和Publish/Subscribe(Pub/Sub),即点对点和公布订阅模型.  ...
    
		
    8. 
						
  8. 引入外部CSS的两种方式及区别
		
    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...
    
		
    9. 
						
  9. 两种Tensorflow模型保存的方法
		
    在Tensorflow中,有两种保存模型的方法:一种是Checkpoint,另一种是Protobuf,也就是PB格式: 一． Checkpoint方法: 1．保存时使用方法: tf.train.Sav ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. word文档的导出（用freemarker模板导出）（桃）
			
    1.将要导出的word文档另存为xml格式的 2.用文档编辑器打开(如:notepad++),将要展示的数据用${name}的形式替换,“name”对应数据库中的字段 3.根据模板生成 package ...
    
			
    2. 
						
  2. hdu 4941 2014 Multi-University Training Contest 7 1007
			
    Magical Forest Time Limit: 24000/12000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...
    
			
    3. 
						
  3. html5(拖拽2)
			
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
    
			
    4. 
						
  4. 在IOS11中position:fixed弹出框中的input出现光标错位的问题
			
    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路:  ...
    
			
    5. 
						
  5. js-触屏滑动判断滑动方向（移动版）
			
    var startx, starty; //获得角度 function getAngle(angx, angy) {     return Math.atan2(angy, angx) * 180 / ...
    
			
    6. 
						
  6. HDU 5726 GCD（ST&RMQ）
			
    题目链接 GCD 先ST倍增预处理,f[i][j]表示从i开始(包含第i个数)的连续2^j个数的最大公约数. 这样就可以在O(1)内询问得到a[l]到a[r]之间的所有数的最大公约数的值. 然后对于每 ...
    
			
    7. 
						
  7. 最简单的window下使用Jenkins来做自动化部署的教程
			
    今天我们来说一下,如何使用Jenkins+powershell脚本,将我们的.NET CORE的脚本部署到对应的服务器上. 这里我们使用的源码管理工具是TFS.虽然源码管理器比较老旧,但是原理都差不多 ...
    
			
    8. 
						
  8. 一起来学Spring Cloud | 第六章：服务网关 ( Zuul)
			
    本章节,我们讲解springcloud重要组件:微服务网关Zuul.如果有同学从第一章看到本章的,会发现我们已经讲解了大部分微服务常用的基本组件. 已经讲解过的: 一起来学Spring Cloud | ...
    
			
    9. 
						
  9. 在spring中使用数据库
			
    若要在spring中使用数据库,首先需要配置数据源. 1.使用数据源连接池,可以使用DBCP(Data Base Connection Pooling) <bean id="datas ...
    
			
    10. 
						
  10. 笔记-迎难而上之Java基础进阶4
			
    内部类创建多线程 //匿名内部类创建多线程 public class InnerClassThread{ public static void main(String[] args){ //回忆一下之 ...
    
			
    11.