css进阶（三）

1、盒子模型（css模型）

1、1 盒子模型的组成

盒子模型由内容，内边距，边框和外边距组成

1、2 盒子模型贴图

1、3 盒子模型之边框

边框线的类型：solid、dotted、dashed、double

贴图示例：

1、第一个示例及结果

1、第二个示例及结果

1、4  盒模型之内边距

截图示例：

1、5 盒模型之外边距

（1）盒模型之外边距代码：

（2）盒子模型内外边距问题的总结

注意四点：

A：margin调整内部div外边距；

B：padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）；

C：border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。

D：内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。

2、Reset CSS（重置css样式）

（1）为什么需要RESET CSS？

浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致

（2）RESETCSS 代码贴图（https://meyerweb.com/eric/tools/css/reset/）

3、浮动

3、1 浮动的基本知识点

（1）什么是浮动？

浮动，其实就是让元素脱离正常的文档流

（2）为什么需要浮动？

当正常文档布局不能解决的时候，则需要脱离正常文档流

（3）浮动带来的问题

高度塌陷、

3、2 浮动贴图

3、3 浮动带来的问题

3、5 浮动解决方案

4、定位

4、1 定位的基本知识点

（1）什么是定位？

定位就是将元素定在网页中的任意位置

（2）为什么需要定位？

因为有时候需要对某些元素进行定位

（3）定位的好处

想定哪里，定哪里

4、2 定位属性值

4、3 定位属性值解析

4、4 定位代码贴图

（1）贴图一

（2）贴图二