1.什么是定位？
定位：页面上的元素，出现的位置
2.定位分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位
又称文档流定位，他是页面元素默认的定位方式
文档流的规范：
1.块级元素
从上往下排列，独占一行
2.行内元素
从左到右，多个元素在一行中显示，
如果显示不下，自动换行
4.浮动(重点，难点)
作用：能够让多个 (块级)元素在一行中显示
1.特点
1.脱离文档流，不占据页面空间
2.浮动元素，会停靠在父元素的左边或左边其它已经浮动的元素的边缘
2.语法：
float
取值：
none:无浮动，默认值
left:左浮动
right:右浮动
**:父元素高度会消失
图文混排：
浮动，
文本、行内元素、行内块：采用环绕的方式来排列，不会被压在下面，会避开浮动元素
清除浮动带来的影响：
元素浮动以后，会对后面的元素带来位置的影响，如果后门的元素不想被影响，那就清除浮动
语法：
clear：
取值：none：默认值，不做任何清除浮动
left：清除当前元素左浮动带来的影响，即前面元素左浮动的话，当前元素不会上前占位；
right：清除当前元素右浮动带来的影响，即前面元素右浮动的话，当前元素不会上前占位；
both：清除所有浮动
练习：
新建多个div块元素，设置其浮动,flaot:left,float;right
新建多个行内元素，设置其宽高，背景色，然后再设浮动，看跟块级元素有什么区别？
10：37
3.背景
background:red;
background-color:red;
是指以背景色或背景图像的方式给元素设置背景
作用：
背景色：就是以单一的颜色作为背景进行填充
背景图像：以图片作为背景进行填充
1.背景色
语法：background-color：
取值：合法的颜色值 transparent(透明)
**：背景色和背景图片都从边框位置处开始填充
2.背景图像
语法：background-image background
取值：url(图片路径);
ex:background-image:url(images/a.jpg);
3.背景图像平铺
语法：background-repeat
取值：
repeat 默认值，水平和垂直方向同时平铺
no-repeat无平铺效果，只显示一次图片
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
4.背景图片位置
什么是背景图像定位？
作用：改变背景图片在元素中默认的位置
语法：background-position
取值：
1.x y
x:背景图像在水平方向的偏移距离
取值为正，向右偏移
取值为负，向左偏移
y:背景图像在垂直方向的偏移距离
取值为正，向下偏移
取值为负，向上偏移
2.x% y%
0% 0% 原点，左上角
100% 100% 右下角
50% 50% 正中间
3.x：
left/center/right
y:
top/cneter/bottom
eg:
left top
right bottom
center center
5.背景图像的尺寸
语法：background-size
取值：
1.具体数值 v1 v2
v1表示图片的宽度
v2表示图片的高度
2.v1% v2%
3.cover
将背景图扩大到足够大，以使背景图能够完全覆盖到元素区域
4.contain
将背景图扩大，以至于背景图的宽度或高度有一个适应了元素区域即可。
ex:
background-size:20px 50px;
background-size:50% 50%;
background-size:cover;
backgorund-size:contain;
6.背景属性简写方式
语法：
background:color url() repeat postion; ???size
ex:
background:url(images/a.jpg) no-repeat -60px -50px;
pm:
<font></font>
1.文本格式化
1.字体属性
1.指定字体类型
语法：font-family
取值：字体1，字体2，字体3；
ex:
font-family:"微软雅黑",Arial,"黑体";
2.字体大小
语法：font-size
取值：数值 (px,pt为单位)
3.字体加粗
语法：font-weight
取值：
normal 正常，大部分标记的默认值
bold：加粗（h1-h6,b）
value:400-900整百倍数字
eg:
font-weight:400;
font-weight:600;
font-weight:900;
font-weight:1500; ????
4.字体样式
语法：font-style
取值：
normal 正常
italic 斜体，i标记
eg:
font-style:italic;
2.文本格式
1.文本颜色
语法：color
取值：合法的颜色
2.文本排列方式(水平方向)
语法：text-align
作用：控制文本在水平方向对齐
取值：left/center/right/ justify(调整版面) ????
3.文本修饰（线条修饰）
语法：text-decoration
取值：
none:无线条修饰
underline:下划线 <u></u>
overline:上划线
line-through:删除线 <s></s>
4.行高
作用：控制一行文本的高度，如果行高的高度高于字体本身大小，
那么该行文本将在指定的行高内呈现垂直居中的效果。
语法：line-height
取值：以px为单位的数值
练习：
当页面加载时a标记无下滑线并且颜色为黑色，当鼠标放到a标记上时，
文本颜色为红色，并且出现下滑线，同时有加粗和放大的效果。
2.显示方式
1.什么是显示方式？
决定页面上的元素到底以什么样的方式来进行显示(块级，行内，行内块)
2.如何修改显示方式？
语法：display
取值：
none 隐藏，让生成元素不显示,不占空间
block 让当前元素表现的和块级元素一致
inline 让当前元素表现的和行内元素一致
inline-block 让元素变成行内块
特点：摆放方式如同行内元素，但是具有块级元素的特征
练习：
新建5个A元素，分别设置他们为块级，行内，行内块，隐藏，正常
新建div元素隐藏，
3.列表
1.列表项标记
属性：list-style-type
取值：
none:不显示标识
disc:实心圆
circle:空心圆
square:实心方块
2.列表项图像
属性：list-style-image
取值：url(路径);
3.列表项位置
属性：list-style-position
取值：
outside:默认值，列表项标记显示在内容区域之外
inside：将标记显示在内容区域之内
4.列表项简写属性
属性：list-style:type url() position;
**：
常用的方式：list-style:none;
新建一个ul里面写8个li，里面的列表项图片换一下？