1.什么是盒子模型
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
2.为什么要重视盒子模型
当我们 浏览网页或者使用各种软件的时候。总不可能千篇一律的由上而下的排版。
尤其是一些新闻网站，将排版分为各种大小的模块。越大的模块越显眼，故而显得新闻就重要。
在报纸上，若要登报，越重要的排在越前面，有一些民间作者想要登报，他们还会考虑作者的缴费故而将该排在某个地方。
简单来说，盒子模型是开发者进行排版的重要手段！
3.盒子模型讲解
3.1理论
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
3.2示例
写一个简单的实例
css_box.css:
body{
background-color: #00a2e8;
}
.box_demo1 {
margin: 75px;
border: 25px solid #22b14c;
padding: 50px;
background-color: #ffaec9;
width : 100px;
}
.box_content{
background-color: #c3c3c3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX</title>
<link rel="stylesheet" type="text/css" href="css_box.css">
</head>
<body>
<div class="box_demo1">
<div class="box_content">
我是内容
</div>
</div>
</body>
</html>
运行结果：
讲解：在css当中
将背景颜色设置为蓝色。
将外边距设置为75px；
将边框设置为25px，绿色；
将内边距设为50px，粉色；
将内容的背景色设置为灰色；
将宽度设置为了100px；
小结
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
盒子模型是一个很难单纯的理解，建议自己调一下参数，看一下效果。
2441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
