css 标准盒子模型和ie盒子模型的区别和各自的特点

最新推荐文章于 2024-07-14 17:04:23 发布

那个追逐的少年

最新推荐文章于 2024-07-14 17:04:23 发布

阅读量1.8w

点赞数 6

本文链接：https://blog.csdn.net/qq_37016928/article/details/79489293

版权

一、css 标准盒子模型

css盒子模型又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：

。

图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分，如果border设置颜色的时候会显示boder颜色当boder颜色是透明时会显示background-color的颜色。而该元素的子元素的是从content开始的。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right;

元素框的总高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

二、IE盒子模型

css盒子模型又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：

。

图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的，不会遮挡其他元素。

元素框的总宽度=width（padding-left+padding-right+border-left+border-right）+margin-left+margin-right;

元素框的总高度=height（padding-top+padding-bottom+border-top+border-bottom）margin-top+margin-bottom;

三、两个模型宽度和高度的计算（是一样的）

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin*2+border*2+padding*2+width;

height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。

因此我们应该选择标准盒子模型，在网页的顶部加上 DOCTYPE 声明。

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

利用盒子模型画三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div{
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-bottom: 100px solid blue;
    }
</style>
<body>
    <div></div>
</body>
</html>

那个追逐的少年

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
css 标准盒子模型和ie盒子模型的区别和各自的特点

一、css 标准盒子模型css盒子模型又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：。图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的，不会遮挡其他元素。元素框的总宽度=width+paddi...
复制链接

扫一扫