拓展：浏览器一次可以向服务器并发8个请求，第九个需要等到下一次
1、元素的显示方式
div标签：块级元素(block)独占一行
span标签：行级元素(inline)不会独占一行
（1）、块级(block)标签的特点：
1、独占一行
2、可以设置尺寸
3、没有明确宽度的时候，宽度由父级决定
4、没有明确高度的时候，高度由内容决定
（2）、行级inline元素的特点：对margin左右，padding左右支持较好，上 下 间距慎用
1、不会独占一行可以与其他行级元素并排
2、不支持尺寸设置
3、大小由内容决定
（3）、inline-block行块级的特点
1、支持盒模型，但不会独占一行，一行里面可以显示多个
2、可以设置宽高
2、盒模型
（1）、盒模型的具体内容由外边距margin border边界 padding内边距 内容尺寸width/height 四种样式组成的
盒子的外边距：margin
盒子的边框：border
盒子的内边距：padding
盒子的内容：内容
(2)、margin外边距盒子与盒子之间的间距
margin-top
margin-right
margin-bottom
margin-left
连写margin:0 0 0 0 ;上右下左
margin:0 0;上下 左右
margin:0;四个方向
margin误区：
1、 如果小盒子外面的大盒子没有边框，设置小盒子margin的时候大盒子会一块移动
解决方案：1、在大盒子样式中设置overflow：hidden或者float：left
2、给大盒子设置一个边框
（3）、padding:内边距会影响盒子的大小
padding设置选项与margin一样
（4）、盒子模型分为标准盒子模型和怪异盒子模型
怪异盒模型样式中有box-size:border-box;不改变盒子的尺寸，而使内容的尺寸缩小
标准盒模型 内容尺寸(width*height)
盒子尺寸(width,height,padding,border)
区域尺寸(width,height,padding,border,margin)
(4)、margin与padding对块级元素和行级元素得作用
margin、padding对块级元素正常影响
margin左右设置、padding左右设置对行级元素有用，上下慎用
（5）、总结：盒子与盒子之间用margin ，盒子内部用padding ，盒子尺寸尽量用auto
3、css基础选择器
1、基础选择器--通配选择器：作用于所有的标签，无论标签有没有在文档中出现
* {
...........
}
2、基础选择器--标签名选择器：作用于一类标签,通过标签名称，重置标签的样式
div {
width: 200px;
height: 200px;
background-color: pink;
}
3、基础选择器--群组选择器：选择器1，选择器2，...{} 作用于列出的标签，常用于优化代码，减少文档的体积
.class,h1,h2 {
margin: 0;
padding: 0;
}
4、基础选择器--类选择器： .类名{}
使用场景：可以应用于各种场景，是最常用的选择器，class名可以取多个，多个class名之间用空格隔开，主要用于具有相同样式的元素的设置
.f10 {
font-size: 10px;
}
.auto {
margin: 0 auto;
}
5、基础选择器--后代选择器：选择器1 选择器2 选择器3 {}
样式作用于最后一个选择器，前面的选择器知识一个过滤条件，帮助我们定位到最后一个选择器
span div {
/*作用于span里面的div*/
}
4、css代码样式（存放位置）
（1）、行间样式
优点：不会额外的产生请求
缺点：1、容易产生重复的代码，造成文档体积过大
2、不利于维护
3、不符合结构与样式分离的规范
综上所述：不建议使用行间样式
（2）、内部样式：在html文档中开辟一个书写css语句的区域
不会产生额外的请求
初步实现结构与样式的分离
代码复用不方便
适合单页面网站的应用
<style>
body {
margin: 0;
padding: 0;
}
</style>
(3)、外部样式
首先在.html文件中利用link标签引入.css文件
在.css文件中直接写样式，不用style标签
优点：1、利于后期维护
2、可以重复使用
3、完成实现结构与样式的分离
缺点：会产生额外的请求（但是后期我们还会借助工具抹平这个缺点）
