本文详细介绍了CSS盒子模型的组成部分，包括内容区域、内边距、边框和外边距，通过实例演示了如何设置和计算盒子的实际大小，以及行内元素的内外边距处理技巧。
#目标#：能够认识盒子模型的组成，能够掌握盒子模型的边框，内边距，外边距的设置方法
学习路径：
1.盒子模型的介绍
1.1
1.>盒子的概念
1.页面中的每一个标签，都可以看成是一个“盒子”，通过盒子的视角更方便进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个矩形区域，我们也形象的称之为盒子
2.盒子模型：
css中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距（margin）构成，这就是盒子模型。
3.记忆：
可以联想成现实中的包装盒
代码示例：
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 边框区域--纸盒子 */
border: 1px solid black;
/* 内边距--填充泡沫：出现于内容和盒子的边缘之间 */
padding: 100px;
/* 外边距：出现在两个盒子之间，出现在盒子的外面 */
margin: 20px;
}
</style>
</head>
<body>
<div>内容区域-电脑1</div>
<div>内容区域-电脑2</div>
</body>
2.内容区域的宽度和高度
作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width/height
常见取值：数字+px
3.边框--连写形式
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：boder：10px solid red;
快捷键：bd+tab
边框（border）--单个属性设置
场景：只给盒子的某个方向单独设置边框
属性名：border--方位名
属性值：连写的取值
代码示例：
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色;---不分先后顺序，用空格隔开 */
/* solid：实线 */
/* dashed：虚线 */
/* dotted：点线 */
}
</style>
</head>
<body>
<div>盒子</div>
</body>
拓展：
3.4盒子实际大小的初级计算公式
代码示例：
<style>
div{
/* border撑大盒子尺寸 */
/* 盒子尺寸=（width+border）*(height+border) */
/* 如下：设置一个盒子尺寸为400*400，边框为10px */
width: 380px;
height: 380px;
background-color: green;
border:10px solid black;
}
</style>
</head>
<body>
<div>盒子</div>
</body>
4.内边距（padding）
padding的多值写法:
代码示例：
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* padding取一个值：添加了4个方向的相同长度的内边距 */
padding: 20px;
/* padding取四个值：上 右 下 左 */
padding:10px 30px 50px 70px;
/* padding取三个值：上 左右 下 */
padding: 10px 20px 30px;
/* padding取二个值：上下 左右 */
padding: 10px 20px;
}
</style>
</head>
<body>
<div>padding</div>
</body>
注意：padding和border一样，会撑大盒子
<tips>：变成css3的盒子模型，加了border和padding后，不需手动做减法（既加了border和padding不会撑大盒子）
box-sizing:border-box;
5.外边距（margin）
使用方法与padding相同，但是不会撑大盒子，而是会将盒子向外延申。
5.4：清除默认内外边距
代码示例：
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<ul>
<li>1</li>
<li>2</li>
</ul>
<p>一段文字</p>
</body>
5.5版心居中
版心指的是网页内的有效内容。
代码示例：
<style>
div{
width:1000px;
height:300px;
background-color: pink;
/* 若想要版心居中，则可加下面的这行代码 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>
div
</div>
新闻稿案例：
代码示例：
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 0 auto;
padding: 40px 30px 0;
}
.news h2{
font-size: 30px;
border-bottom:1px solid #ccc;
line-height: 30px;
padding-bottom: 8px;
}
.news ul{
/* 该行代码的作用是清除有序或无序列表中的序号 */
list-style: none;
}
.news li{
padding-left: 30px;
line-height: 50px;
border-bottom: 1px dashed #ccc;
}
.news a{
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
</ul>
</div>
</body>
注意事项：
行内元素，内外边距问题：
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
