盒子
在 CSS 中，盒子（box）是指网页中的元素所处的矩形区域，它包含了元素的内容、内边距、边框和外边距。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style>
.content{
/*
padding 会撑开盒子（盒子已经有宽高的情况下），border 也会撑开盒子。
所以盒子的宽度是由 border-left + padding-left + width + padding-right + border-right 组成。
所以盒子的高度是由 border-top + padding-top + height + padding-bottom + border-bottom 组成。
*/
/* 盒子位置 */
margin: auto; /* 盒子水平居中，与 margin:0 auto 一样效果 */
margin-left: auto; /* 盒子靠右 */
margin-right: auto; /* 盒子靠左 */
/* 盒子透明度 */
opacity: 1; /* 设置盒子的的透明度，1 是不透明，0 是完全透明，可以设置 0~1 之间的值（盒子里的字也会跟着透明） */
/* CSS2 盒子阴影 */
/* 依次是：水平阴影的位置(必须)、垂直阴影的位置(必须)，模糊距离，即虚实(可选)，阴影的尺寸(可选)，阴影的颜色(可选) 将外部阴影变成内部阴影(可选) */
box-shadow:4px 4px 5px 2px rgba(244,244,244,0.3) inset;
/* CSS3盒子尺寸 */
/* 如果设置了盒子 width 为 300px，这时候又设置了盒子 border 值或者 padding 值，那盒子总宽度就会超过 300px。
需要我们手工修改盒子的 width，才能保证盒子的总宽度仍为 300px。
为了避免这种情况，使用这行代码，盒子就会自动调整 width 了，最后总宽度还是 300px。*/
/* 默认的 box-sizing 的值为 content-box，盒子的总宽度为：width + border + padding；设置 border-box 后，盒子总宽度就是 width，border 和 padding 包含在 width 里面 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
