css 盒模型

来源：互联网发布：投影机拼接融合软件编辑：程序博客网时间：2024/06/02 05:33

CSS标准盒模型

计算方式：一个块的总宽度 = width + margin(左右) + padding(左右)

html代码如下：

<div class="box1"></div><div class="box2"></div>

css如下：

.box1{    width: 200px;    height: 200px;    background: red;    box-sizing: border-box;    margin: 5px;    padding: 5px;    border: 5px solid green;}.box2{    width: 200px;    height: 200px;    margin: 5px;    padding: 5px;    border: 5px solid green;    background: blue;    -moz-box-sizing:content-box;    box-sizing: content-box;}

Chrome版本60.0.3112.7
具体效果如下(蓝块)：
这里写图片描述

标准盒模型也是Chrome默认的盒模型

IE怪异盒模型

计算方式：一个块的总宽度 = width(padding(左右) + border(左右)) + margin(左右)

具体效果如下（红块）：
这里写图片描述

由上面两张图看出区别，盒子的计算方式很不同

但是我们要说的是IE！！！！！！

下面是IE下的模样：
html:

<div class="box1"></div><div class="box2"></div>

css

.box1{    width: 200px;    height: 200px;    background: red;    //box-sizing: border-box;    margin: 5px;    padding: 5px;    border: 5px solid green;}.box2{    width: 200px;    height: 200px;    margin: 5px;    padding: 5px;    border: 5px solid green;    background: blue;    //-moz-box-sizing:content-box;    //box-sizing: content-box;}

分别针对IE版本做了对比：
IE7及以上：
这里写图片描述
在这里可以通过修改padding的值增大或缩小块的宽度，而且通过测量工具测出它的总宽度为220PX。为什么？不是说IE有怪异盒子吗？
IE5与IE7的比较效果：

在这里是可以通过修改padding的值增大或缩小块的宽度

那么造成他们不同的本质是什么？
IE5.X 和 6 在怪异模式中使用自己的非标准模型，在IE7之后就开始使用标准模型，网上有人说在html文件没有加上<!DOCTYPE html>就会触发所以的怪异解析，但是我没有试出来ʅ( T﹏T )ʃ
参考资料：

盒子模型
学习资料

阅读全文

0 0