其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。
一、网页布局的本质
网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？
其实就是把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
二、盒子模型
所谓盒子模型：
- 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
- 外边距（margin）、边框（border）、内边距（padding）、*实际内容（content）四个属性。*
首先，我们来看一张图，来体会下什么是盒子模型。
1.所有的文档元素（标签）都会生成一个矩形框，它描述了一个文档元素在网页布局汇总所占的位置大小。
2.因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置
三、盒子边框
1、边框综合设置
2、圆角边框
3、内边距（padding）
（上面的三个部分在之前的文章（part05）中已有详细解释，在这里就不赘述。这篇文章主要总结盒子的完整框架。）
4、外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
3.4.1.外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
- 必须是块级元素
- 盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
3.4.2.文字（行内元素）居中
- 文字水平居中是 text-align: center
- 盒子水平居中:左右margin 改为 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto */
3.4.3.清除元素的默认内外边距
为了更方便地控制网页中元素，制作网页时，可使用如下代码清除元素的默认内外边距：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
3.4.4.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
3.4.4.1.相邻块元素垂直外边距的合并(外边距塌陷)
在一部分在之前(part05)也详细解释过,这里也就不再提.
3.4.4.2.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。
四、插入图片和插入背景图片的区别
-
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
-
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
<style>
div {
width: 400px;
height: 400px;
border: 1px solid forestgreen;
background: #6a2d2d url(img/鸟.webp) no-repeat;
/* 背景图片更改位置 用 background-position */
/* 第一个值调节 左右 第二个值调节上下 */
background-position: 30px 50px;
}
img {
/* 插入图片更改大小 width 和 heigh */
width: 200px;
height: 210px;
/* 插入图片更改位置 可以用margin 或padding */
margin-top: 30px;
/* 插入当图片也是一个盒子 */
margin-left: 50px;
}
</style>
</head>
<body>
<div>1</div>
<img src="img/工作中的人.jpeg" alt="">
</body>
五、盒子阴影
语法格式：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
注意:
前两个属性是必须写的。其余的可以省略。
默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset 。
X轴与Y轴如果有值，就改变了（正值 向右 向下）。
<style>
.shadow {
width: 200px;
height: 200px;
border: 10px solid red;
box-shadow: 0 15px 30px green;
}
</style>
</head>
<body>
<div class="shadow">阴影</div>
</body>
六、overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible(默认) : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid green;
/* 不剪切内容也不添加滚动条。 */
overflow: visible;
/* 溢出隐藏 */
overflow: hidden;
/* 超出自动显示滚动条，不超出不显示滚动条 */
overflow: auto;
/* 不管超出内容否，总是显示滚动条 */
overflow: scroll;
}
</style>
</head>
<body>
<div class="box">
6月18日，高考623分的脑瘫少年姚俊鹏完成了在中国药科大学的学业任务，顺利毕业！接下来，姚俊鹏将前往苏州大学读研深造6月18日，高考623分的脑瘫少年姚俊鹏完成了在中国药科大学的学业任务，顺利毕业！接下来，姚俊鹏将前往苏州大学读研深造
</div>
</body>
