1、浮动
1、定位
普通流定位(文档流定位)
浮动定位
相对定位
绝对定位
固定定位
2、浮动定位
1、特征
1、脱离文档流-不占据页面空间,后续元素上前补位
2、会停靠父元素的左边或右边，或者停靠在其他平级已浮动元素边缘上
3、依然包含在父元素内
4、让多个块级元素在一行内显示
2、语法
属性：float
取值：
none/left/right
3、浮动引发的特殊效果
1、父元素宽度已经不足以包含所有的已浮动子元素，最后一个将换行
2、元素浮动起来后，宽度将变得自适应
3、行内元素，行内块元素一旦浮动起来后，将变成块级元素
4、文本，行内元素，行内块元素采用环绕的方式进行排列，会巧妙的避开浮动元素而不会被压住
4、清除浮动
属性：clear
取值：
none/left/right/both
5、浮动元素对父元素带来的影响
对父元素高度带来的影响
1、设置父元素高度
弊端：必须知道父元素的高度
2、设置父元素也浮动
弊端：对后续元素有影响
3、为父元素设置 overflow
取值为：hidden 或 auto
弊端：如果有内容要溢出显示也会被一同隐藏了
4、在父元素中，追加空块级子级元素,并设置其clear属性为both
<div style="clear:both;"></div>
2、显示
1、显示方式
属性：display
取值：
1、none
隐藏，脱离文档流-不占据页面空间
2、block
块级
3、inline
行内
4、inline-block
行内块
除radio和checkbox外的其他行内块元素，是允许修改尺寸的
允许在一行内显示多个元素
2、显示效果
1、可见性
属性：visibility
取值：
1、visible
可见的
2、hidden
隐藏，但是会占据页面空间
3、collapse
2、透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐方式
属性：vertical-align
取值：
1、baseline
基线对齐
2、top
3、middle
4、bottom
3、光标
属性：cursor
取值：pointer
3、列表
1、列表项显示标识
属性：list-style-type
取值：
none
... ...
2、列表项图像
属性：list-style-image
取值：url()
3、列表项位置
属性：list-style-position
取值：
outside ：默认值
inside ：列表项区域之内
4、列表属性
属性：list-style
取值：type url positioin
常用方式：list-style:none;
******************************
1、定位
1、定位属性
1、定位属性
属性：position
取值：
1、static
默认值，默认定位方式
2、relative
相对定位
3、absolute
绝对定位
4、fixed
固定定位
注意：position取值为 relative，absolute，fixed 的元素被称为 已定位元素
2、偏移属性
作用：移动已定位元素
属性：
top:值;
bottom:值;
left:值;
right:值;
3、堆叠顺序
属性:z-index
取值:无单位数值
2、定位方式-相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
元素移动位置后，原来所占据的空间依然会保留
2、使用场合
位置微调
3、语法：
属性：
position:relative;
配合着 偏移属性 实现位置的移动
3、定位方式-绝对定位
1、绝对定位的特征
1、元素会脱离文档流
2、相对于 最近的 已定位的祖先元素 来实现位置的初始化
3、如果元素没有已定位祖先元素，那么它的位置就相对于最初的包含块(body,html)
2、语法
属性：
position:absolute;
配合着 偏移属性 实现位置的初始化或移动
3、绝对定位使用场合
弹出菜单
4、注意
1、绝对定位的元素会变成块级
2、绝对定位的元素可以使用 margin来改变位置，但是 margin:auto 会失效
4、堆叠顺序
1、作用
处理 已定位元素的 堆叠效果
2、默认堆叠效果
1、平级元素-后来者居上
2、子元素压在父元素之上-子压父
3、属性
z-index
取值：数值越大越靠上
4、注意
1、取值可以为负
取值为负时，当前元素会位于页面正常显示内容之下
2、z-index 是无法改变父子关系的堆叠顺序
5、固定定位
1、什么是固定定位
将元素固定在网页的某个位置处
不会随着滚动条而发生位置的变化
2、语法
position:fixed;
配合 片以属性 改变元素位置
3、注意
固定定位永远都是相对于浏览器窗口进行位置初始化的。