CSS进阶

1. 盒子模型

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

2. Reset 重置

Reset - 重置CSS
    浏览器解析标签的时候本身自带一些样式，有时会导致我们自身写的样式出现的效果不一致
    每个公司会根据自己的业务需求写一套属于自己的ResetCss
    以下是一个通用的RESETCSS：
        https://meyerweb.com/eric/tools/css/reset/

3. 浮动

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

4. 定位

作用：对元素进行精确的定位
三种形式
    1、绝对定位:position:absolute;
        绝对定位是脱离文档流的
    2、相对定位:posttion:relative;
    3、固定定位:position:fixed;
        固定定位与相对定位不脱离文档流，是相对于自己的一个偏移

父相（对）子绝（对）：保持页面的布局完整