1.background属性
background-color 背景颜色
有三种设置方式
1.关键字 （英文单词）
2.十六进制（#ffeedd）
3.rgb/rgba (red，green，blue)使用三原色来调配 a表示透明度
background-img url(图片地址) 将背景设置为图片
背景图片的显示设置
background-repeat：背景的平铺方式 通常都是no-repeat 即不平铺
background-position：背景定位 left top right bottom 通常使用雪碧图优化性能使用
background-size:背景大小
background-attachment:背景关联 默认scroll 设置为fixed 背景图将不再随页面滚动（适用，但是用的少）
通常可以简写为background属性
2.字体样式
font-family 设置字体库
font-weight 设置字体粗细
font-size 设置字体的大小pc常用单位px最最最常用手机端常用rem 最小字体12px
3.文本样式
color 最最最常用 设置方式与background-color一样
text-align :center(居中 常用） left（左对齐） right（右对齐） justify（两端对齐）
text-decoration :none;去除下划线 常用去a标签默认的下滑线 underline下划线
line-through 中划线 overline上划线
text-overflow 常用 ellipse（出现。。。） 和hidden（超出隐藏）
4.其他属性
vertical-align :middle 文字和图片根据中线对齐
5.雪碧图
简单说雪碧图就是将页面需要用的很多张小图整合成一张大图，从而减少页面向服务器发起请求从而提升性能
使用 ：background-img和background-position来控制
6.盒模型
我们把99.9%的标签都当作一个盒子 它由四个属性组成：mbpc
即 magrin：盒子的外边距(就是盒子告诉其他盒子要离他多远)
border:盒子的边框（就是盒子自身的厚度）
padding:盒子的内边距（就是盒子告诉他里面的内容要离边框多远）
content:盒子的内容区域也是我们主要使用的区域（我们能用的地方）
margin用起来还是很爽的，用来控制盒子的显示位置，但是它有问题，当两个盒子同时有相对方向的magrin时，生效的magrin值是两个中大
<style>
.box1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
border: 1px solid blue;
margin-top: 20px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
box1和box2之间的距离是50而不是70
会存在高度塌陷问题
怎么解决margin的问题？
使用BFC！！！（重点） 什么是BFC？独立容器，不影响外部元素
如何触发BFC
至此 对于单个标签内部的操作样式就基本学习完毕了，下面就是重点重点重点 重要的话说三遍，如何控制一个盒子所处的位置——让页面好看一些
