盒模型--宽度和高度

源自：12-7 长胖长高点--宽度和高度

盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

为什么要算边界？关于盒子尺寸用在哪里？

提问者：慕斯卡4106679 2016-01-08 12:55

个回答

一杯茶的心情

2016-01-08 13:30:19

算边界个人觉得主要就是为了方便排版，盒子的尺寸计算在以后网页的美观方面可以起到很大的作用，让人看上去很舒服，整齐

0

qq_马扎罗_0: 2016-01-08 13:21:46

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    width:80px;
    height:80px;
    
    border:1px solid red;
    padding:10px;
    margin:100px;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>

这是上图中的代码

qq_马扎罗_0

2016-01-08 13:20:21

边界就是盒子里内容边框外部margin的宽度，我们看到的盒子只是盒子的一部分边框外的margin是看不到的
下面就是例子中的盒子模型在firefox浏览器开发模式看到的盒子的实际宽度

0