                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

盒模型--宽度和高度

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

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

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

慕斯卡4106679

2016-01-08

源自：初识HTML(5)+CSS(3)-升级版 12-7

关注问题我要回答

1189

操作

收起

3 回答

一杯茶的心情
2016-01-08

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

0 回复有任何疑惑可以回复我~

收起回答

qq_马扎罗_0
2016-01-08

<!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>

这是上图中的代码