图片、列表及浮动

背景图片显示方式　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　列表项标记

设置元素的背景图片的显示方式：background-attachment：scroll    fixed；　　　　　　　　　　　　　　　　　　　　　　　　　设置列表项的标记样式类型

说明：scroll：默认值，背景图片随滚动条滚动   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　list-style-type：关键字   none

　　　fixed:当页面的其余部分滚动时，背景图片不会移动（针对网页）　　　　　　　　　　　　　　　　　　　　　　　　　　无序列表：none（无标记）  disc（实心的圆点）  circle（空心圆）   square（实心方块）

背景图片定位     　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 有序列表：decimal（1.2.3...） lower-roman（小写罗马）  upper-Roman（大写罗马）  low-alpha（小写英文）  upper-alpha(大写英文)

设置元素背景的起始位置：background-position：百分比    值　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图片设置列表：list-style-image

　　　　　　　　　　　　top   right   bottom  left  center　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　列表项标记位置：list-style-position：inside    outside

背景缩写：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　inside：列表项标记在文本内且环绕文本根据标记对齐

background：各值间用空格分隔，不分先后顺序 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  outside：默认值    文本外   不根据标记对齐

css定位机制：普通流（标准流）   浮动   绝对定位　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　列表样式缩写  list-style：

普通流：默认状态，元素自动从左往右，从上往下排列　　　　　　　　　　　　　　　　　　　　　　　　　　　　说明：

css float（浮动）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　1.值之间空格分隔

float：left（左浮动） float：right（右浮动）  float：none（不浮动）　　　　　　　　　　　　　　　　　　　　　　　　　　2.顺序不固定

说明：浮动元素只影响后面的元素　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　3.image会覆盖type

float：inherit继承父元素的浮动　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　清除浮动：

使用浮动后产生的问题　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　clear：none   left   right  both

元素使用浮动后会脱离普通流，出现高度塌陷（浮动溢出）　　　　　　　　　　　　　　　　　　　　　　　　　　　　说明：设置了float元素会影响其他相邻元素，需使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响

清除浮动常用方法：

　　

 

 

清除浮动其他方法：（只做了解，不推荐使用）