盒子模型

边框

• border-color:aqua：边框颜色
• border-width:20px：边框宽度
• border-hight:20px：边框高度
• border-style:solid/double/dotted/dashed：边框样式，实线/双实线/点线/虚线
• border-left:1px solid red：左边框，边框1px宽度，实线，红色
• border-right:1px solid red：右边框
• border-top:1px solid red：上边框
• border-bottom:1px solid red：下边框
• border：复合样式

内边距

• padding-top:20px：上内边距
• padding-bottom:20px：下内边距
• padding-left:20px：左内边距
• padding-right:20px：右内边距

外边距

• margin-top:20px：上外边距
• margin-bottom:20px：下外边距
• margin-left:20px：左外边距
• margin-right:20px：右外边距

RESETCSS

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

浮动

float:ledf/right/左浮动，右浮动

定位

定位就是将元素定在网页中的任意位置
position:static/relative/absolute/fixed：默认值/相对定位/绝对定位/固定定位

• 绝对定位:position:absolute;以父级为参照对象，相对于父级的位置发生改变，没有父级就相对于浏览器发生位置变化
• 相对定位:posttion:relative;以本身为参照对象，相对于本身的位置发生改变
• 固定定位:position:fixed;固定定位于相对定位不脱离文档流，是相对于自己的一个偏移，绝对定位是脱离文档流的
• 父相子绝 保持页面的布局完整
  以网页页面为基础

left:100px
bottom:100px
right:100px
top:100px