盒模型的组成部分
1. 内容区域content
内容区域由width和height属性决定，一旦指定了大小，则只能在该区域内显示内容。
注意：虽然指定区域内容放不时，内容会超出可视区域，但是一般情况下超出部分都会隐藏掉。
2. 内填充padding
Padding用来调整内容与可视区域边界的距离（让内容离边界远一点）。
Padding-top: 上填充。
Padding-left: 左填充。
Padding-right: 右填充。
Padding-bottom：下填充。
Padding：复合属性。
Padding: 上下左右；
Padding：上下 左右；
Padding：上 左右 下；
Padding：上 右 下 左;
3. 边框 border
Border-left: 设置左边框
Border-right:设置右边框
Border-top: 设置上边框
Border-bottom: 设置下边框。
Border: 设置四个方向上的边框
Border: 边框宽度 边框样式 边框颜色;
边框样式：solid实线 dashed虚线 dotted点状。
4. 外间距 margin
Margin的作用用来设置该可视区域与其他元素的距离（调整当前元素的位置的）。
Margin-left: 左间距
Margin-right: 右间距
Margin-top: 上间距
Margin-bottom: 下间距
margin：复合属性。
margin: 上下左右；
margin：上下 左右；
margin：上 左右 下；
margin：上 右 下 左;
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box{
background-color: yellow;
font-size: 20px;
/*盒模型组成部分之一-- 内容 区域大小*/
width: 140px;
height: 200px;
/*盒模型组成部分之二-- 内填充padding*/
/*padding-top: 100px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px; */
/*
* 复合属性 ：padding
* 1.给一个值，四个方向都设置为40px.
* 2.两个值 ，第一个值上下，第二个值左右
* 3.三个值 ， 第一个值上 第二个值左右 第三个值下
* 4.四个值 ， 上， 右， 下， 左
*/
padding: 40px 50px 60px 70px;
/*盒模型组成部分之三 - 边框border*/
/*border: 边框宽度 边框样式 边框颜色
*边框样式：
* 1.solid: 实线。
* 2.dashed: 虚线。
* 3.dotted: 点状。
*/
border: 10px solid red;
/*盒模型组成部分之四 - 外间距 margin*/
/*margin-left: 100px;
margin-top: 100px;*/
/*margin复合属性*/
margin: 100px;
}
</style>
</head>
<body>
<div class="box">
盒模型内容测试
</div>
</body>
</html>
栗子图示：
5. Chrome浏览器的调试工具。
如何调出：
在浏览器网页中右击，点击检查按钮即可。
如何使用：
鼠标点击检查器左上角的选择按钮，然后移动鼠标到想查看的元素身上，然后点击一下。
图例：
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
