前端第三课CSS提升来啦！涉及的内容有box model：盒子模型；CSS floating：CSS浮动；CSS positioning and hierarchy：CSS定位和层级；reset styles：重置样式。
1. 盒子模型
1.1. 盒子模型（Box Model）
所有的HTML元素可以看做是一个div盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
1.2. 盒子模型的包含内容
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距，边框，填充和实际的内容。
1.3.盒子 各部分解释
Margin（外边距）：清除边框外的区域，外边距是透明的。
Border（边框）：围绕在内边框和内容外的边框。
Padding（内边距）：清除内容周围的区域，内边距是透明的。
Content（内容）：盒子的内容，显示文本和图像。
border-top: pink 2px solid;：给盒子顶部加2px的标准线粉色边框。
double：双线；dashed：虚线；dotted：点线。
display: inline-block;：设置成行块元素，既可以在同一行，也可以设置宽高。
display: inline;：设置成行内元素
盒子模型
Then
Then
2. CSS浮动
2.1. 文档流
文档流流动的是元素，可以将屏幕中显示的内容一一对应为文档中的一个元素。
2.2. CSS浮动
浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。
2.3. CSS浮动优缺点
优点：使元素脱离文档流，按照指定的（左右）方向移动，遇到父级边界或者相邻元素停下来。
缺点：浮动会带来高度塌陷的问题。
高度塌陷解决方式如下：
①给父级盒子设置高度，因为要随时调整，所以不推荐使用这种方法；
②新建一个空的div，给它设置高度，不过不推荐使用这种方法；
③给父级盒子设置overflow，不过会隐藏下拉框，所以不推荐；
④解决方法四：清除浮动，只有块状元素可以使用，推荐使用这种方法。
CSS floating
3. CSS定位
定位就是将元素定在网页中的任意位置。
3.1. 静态定位
static静态定位（没有定位），默认。
3.2. 相对定位
relative相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置。
3.3. 绝对定位
absolute绝对定位，没有占据位置，使元素完全脱离文档流；没有定位父级，则相对整个文档发生偏移;参考最近非static定位的父级进行定位。
3.4. 固定定位
fixed固定定位，相对于浏览器窗口进行定位方形词;left 、 right、top、bottom。
CSS positioning and hierarchy
4. 重置样式
浏览器在解析某些标签的时候,本身就自带了一些样式,导致我们写样式的时候就会效果不—致。在这里我们可以使用别人提供的 ResetCSS来去掉浏览器的样式，重新开始写自己的样式。
4.1. CSS文件代码（文件名称为04、reset styles.css）
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
4.2. HTML文件代码
reset styles
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots