一、CSS布局方式
设置元素在网页中排列方式及显示效果
1.标准流布局（文档流，普通流，静态流） 默认的布局方式
特点：将元素按照书写顺序及元素类型，从上至下，从左至右排列
2.浮动布局 设置元素浮动 float：left、right、none（默认值）
特点：脱离文档流，在文档中不再占位，后面正常的元素会向前占位，浮动元素会“漂浮”在文档流上方
多个元素同时左浮或右浮，浮动元素会一次停靠在前一个浮动元素的边缘，中间没有缝隙
浮动元素会在父元素的尺寸范围内浮动，多个浮动无法并排显示时会自动换行，停靠在其他浮动元素边缘
任何元素只要设置浮动，就具有块元素的特征，可以手动调整宽高
浮动引发的特殊效果：浮动元素脱流，在文档中不占位，后面正常元素会向前占位，可能被浮动元素遮挡。但是浮动元素只会遮挡正常元素的尺寸区域，不会这方正常文本内容。文本会围绕在浮动元素周围显示。
元素浮动引起的问题：子元素如果全部设置浮动，在文档中不占位，父元素高度为0，父元素的背景图片和背景颜色无法显示，父元素后面的正常元素会上移，影响布局
解决办法：为父元素指定高度
设置父元素 overflow：hidden；
清除浮动的影响 clear：left、right、both 为正常元素添加cleat属性，清除浮动元素带来的影响，表示不受右、左和两边浮动元素的影响
解决父元素高度为0的问题：为父元素末尾添加空的块元素，为空的块元素设置clear：both；
3.定位布局 通过调整元素的位置，实现网页布局 属性position
取值：static：默认值，使用文档流布局
relative：相对定位
absolute：绝对定位
fixed：固定定位
注意：只有元素设置position属性为三种定位之一才认为元素是“已定位的元素”
偏移属性：使用top、bottom、left、right偏移属性，调整已定位元素的位置
top：取像素值，正值表示向下移动，负值向上
bottom：正值表示元素向上移动，负值向下
left：正值表示元素向右移动，负值向左
right：正值表示元素向左，负值向右移动
相对定位：元素设置相对定位之后，可以使用偏移属性调整元素位置，相对定位的元素是参照元素在文档中的原始位置进行偏移
特点：相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置
绝对定位：绝对定位的元素会脱硫文档流，类似于浮动；绝对定位的元素会参照一个离他最近的已定位的祖先元素进行偏移，如果没有已定位的祖先元素，会参照浏览器窗口的（0,0）点偏移
使用：采用“父相子绝”的方式实现元素绝对定位，父元素采用相对定位，子元素使用绝对定位，实现子元素参照父元素的（0,0）点偏移
固定定位：永远都参照浏览器窗口进行偏移，固定定位的元素会被定位在窗口的某个位置，不会跟随网页滚动而滚动
调整已定位元素的堆叠次序： z-index
取值：无单位的数值，默认为0，数值越大，元素越靠上显示
注意：z-index只能在已定位的元素中使用
兄弟元素之间可以通过z-index的数值大小来调整堆叠次序
父子元素之间，永远是子元素在上
如果兄弟元素的z-index取值相同，后来者居上
二、元素显示效果
1.display
2.visibility
3.透明度设置 属性 opacity：取值0（透明）- 1（不透明）
注意：元素使用opacity设置半透明，所有显示的内容（背景颜色，文本颜色等）都会呈现半透明效果
opacity是对元素整体透明度的设置，包含元素自身和内部的子元素
子元素同时设置透明度，最终的透明度值是在父元素opacity取值的基础上再次进行透明度设置
4.行内块元素的垂直对齐方式 调整行内块元素左右元素与其自身的垂直对齐方式
行内块元素：img input buton
属性：vertical-align 取值：top、middle、bottom
5.设置鼠标形状 属性：cursor
取值：default默认值
pointer 鼠标在元素上展现为手指的样式
text 鼠标展示为 “I”，表示普通文本info
corsshair 鼠标展示为“+”
三、列表相关属性
列表自带内外边距和项目符号
1.list-style-type 设置项目符号
取值：none（取消项目符号，最常用）
disc 实心圆点
circle 空心圆点
square 实心方块
2.list-style-image 指定图片作为项目符号 取值：url（）
3.list-style-position 指定项目符号的显示位置 默认项目符号显示在内容外部，在左边的padding中展现
取值：outside默认值 inside设置项目符号显示在内容区域
4.属性简写 属性list-style
取值：type/image position
常用：list-style：none；取消项目符号