CSS的两种盒模型

最新推荐文章于 2024-03-20 07:49:07 发布

weixin_30918415

最新推荐文章于 2024-03-20 07:49:07 发布

阅读量104

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Kyaya/p/6003879.html

版权

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

　　当你用编辑器新建一个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;

转载于:https://www.cnblogs.com/Kyaya/p/6003879.html

weixin_30918415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的两种盒模型

　　盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。　　当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">　　&...
复制链接

扫一扫