03- CSS进阶

• 盒子模型
• Reset CSS
• CSS 浮动
• CSS 定位

盒子模型

能够把页面上的元素当作一个盒子
盒子模型由内容、内边距、边框、外边距构成
padding - 内边距
margin - 外边距 ☆
border - 边框
content(width、height) - 内容
border-top: 上边框
border-right: 右边框
border-left: 左边框
border-bottom: 下边框 
double 双线
dotted 点
dashed 虚线
solid 实线
padding、margin - 参数 上右下左 顺时针
px 像素

Reset 重置

Reset - 重置CSS
浏览器解析标签的时候自己自带一些
样式，有时会致使咱们自身写的样式
出现的效果不一致，每一个公司会根据
本身的业务需求写一套属于本身的ResetCss

浮动

float:left 向左浮动
float:right 向右浮动
要先改为内联块状
脱离文档流
可能会形成高度塌陷
三种解决方法：
    一、overflow:hidden;不推荐只适用于纯浮动的页面布局
    二、加一个空的<div></div>;也不推荐
    三、.clearfix::{
            display:block;
            clear:both;
            content:''; 空字符
        } 推荐 比较经常使用

定位

做用：对元素进行精确的定位
三种形式
	一、绝对定位:position:absolute;
	二、相对定位:posttion:relative;
	三、固定定位:position:fixed;
固定定位于相对定位不脱离文档流，是相对于本身的一个偏移
绝对定位是脱离文档流的
父相子绝 保持页面的布局完整
以网页页面为基础 
left:100px
bottom:100px
right:100px
top:100px