css 盒模型

最新推荐文章于 2024-03-01 11:37:06 发布

personFeat

最新推荐文章于 2024-03-01 11:37:06 发布

阅读量363

点赞数

分类专栏： css 盒模型

本文链接：https://blog.csdn.net/personFeat/article/details/77248111

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

盒模型

1 篇文章 0 订阅

订阅专栏

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 )ʃ
参考资料：

盒子模型
 学习资料

personFeat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 盒模型

CSS标准盒模型计算方式：一个块的总宽度 = width + margin(左右) + padding(左右)html代码如下：<div class="box1"></div><div class="box2"></div>css如下：.box1{ width: 200px; height: 200px; background: red; box-sizing: b
复制链接

扫一扫