这是我参与「第四届青训营 」笔记创作活动的第七天
1. 盒子概述
将HTML元素看作是盒子，来实现的网页布局
边框：盒子的厚度
外边距：不同盒子的边框与边框的距离
内边距：盒子的内容距离边框距离
内容： 盒子的内部
2. 有关盒子模型的 css 属性
内容：(width,height)
边框：border(-width-style-color);
外边距：margin(-top-right-bottom-left)
内边距：padding(-top-right-bottom-left)
2.1 边框 border
| border-style的值 | 描述 |
|---|---|
| none | 定义无边框。 |
| dotted | 定义点状边框。 |
| dashed | 定义虚线。 |
| solid | 定义实线。 |
| double | 定义双线。 |
<style>
.box{
width: 100px;
height: 100px;
/* border-width: 10px;
border-style: solid;
border-color: red; */
border:10px solid red;
}
</style>
2.2 外边距 margin & 内边距 padding
与 border 很类似，不做展开
这里需要指出，margin 和 padding 是可以简写的
margin: 12px 12px 20px 20px;
如果有四个值，则默认为顺时针对于上右下左
如果只有两个值默认分别代指上下和左右
如果只有一个值默认代指上下左右
3 容器的长宽限制
设置内边距会发现边框的长度发生了变化，因此这里给出元素的长宽计算公式
默认情况：元素的宽度和高度计算
元素的实际宽度 = border-left(左边框厚度) + border-right（右边框厚度） + width（内容宽度） + padding-left（左内边距长度） + padding-right（右内边距长度）
元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom
设置 box-sizing：border-box;
元素的实际宽度 = width
元素的实际高度 = height
这里要注意，设置的 width 和 height 如果被 padding 和 内容 的加和给超越了，容器不会被撑大，但内容会跑到容器外。要避免设置长度过大。
4 初始化
当设置 css 样式的过程中，如果 margin 属性为 0px 时，会发现边框还是会存在一定外边距，这是 html 标签默认的外边距。但是实际开发过程中我们希望严格按照我们设定的样式走，因此我们需要进行元素边距的初始化。
/* 元素边距初始化 */
*{
margin:0px;
padding:0px;
}
*代表通配，即所有元素。
5 容器元素居中
左右元素宽度设置为 auto
.container{
width:800px;
height:300px;
bordere:1px solid red;
margin:0 auto;
}
如果不用auto，而是设置为一个固定值。
那么在浏览器的页面大小因拖拽产生变化时，页面的容器是不会跟着变化的。
6 列表的样式
取消列表样式：list-style:none;
列表样式在边距之内：list-style:inside;
7 示例
该示例的重要知识点有：
- 边距的初始化
- 容器居中
- 限制容器长与宽+内容越界
- 列表的样式：设置表格在边距内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.fruits{
width: 800px;
/* 这里没有设置height，因此容器会被padding-top撑大
这是因为height默认取padding-top+内容高度
如果设置height后，容器大小不变，内容会超出容器*/
border: 1px solid red;
margin: 0px auto;
padding-top: 20px;
padding-left: 30px;
/* 限制容器的长与宽 */
box-sizing:border-box;
}
.sports{
width: 800px;
border: 1px solid blue;
margin: 0px auto;
/* 这里的margin重定义的先后顺序会影响结果 */
margin-top: 50px;
}
/* 将表格置于容器内部 */
.fruits,.sports{
list-style: inside;
}
</style>
</head>
<body>
<div class="fruits">
<h3>水果列表</h3>
<ul>
<li>菠萝</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</div>
<div class="sports">
<h3>运动列表</h3>
<ul>
<li>足球</li>
<li>篮球</li>
<li>羽毛球</li>
</ul>
</div>
</body>
</html>
