【CSS】基础css（四）阴影、浮动、清除浮动、浮动特性、定位、列表样式、鼠标光标

目录

阴影

浮动

清除浮动

定位position

定位特性：

列表样式

鼠标光标样式cursor

---

阴影

字体阴影：text-shadow: px px px 阴影颜色 (四个值)

框选阴影：box-shadow: px px px px 阴影颜色 (六个值)

浮动

float : left 左浮动

float ：right 右浮动

float : none 默认 不浮动

浮动特性

1.属于浮动流(脱离了标准文档流)

2.经过浮动的元素会变成行内块级元素

3.块级元素看不到浮动元素，行级元素看的到浮动元素

4.不经过浮动的文本会在剩余空间环绕排列，经过浮动的文本如果剩余空间不够 会自动往下一行排列

5.浮动元素所在的父级元素剩余空间不够，会自动往下行排列

清除浮动

1.给 有浮动子元素 的父元素加height

2.给 有浮动子元素 的父元素加overflow:hidden

3.在所有有浮动的元素后加一个空元素div，给此空元素添加样式clear: left / right / both

(clear清除的是浮动特性，而不是清除浮动)

clear:left 清除左浮动

clear:right 清除右浮动

clear:both 清除左、右浮动

clear:none 不清楚浮动

4.伪元素清除浮动

.clearfix::after{

                display:block;

                contain:" ";

                clear:both;

}

定位position

1.static 默认 正常文档流定位

2.relative 相对定位 相对于原来的自己正常文档流的位置，没有脱离标准文档流

3.absolute 绝对定位 (margin：0 auto对绝对定位的元素没有影响)

(a)包含框无定位，相对于浏览器定位

(b)包含框有定位，相对于离自己最近的有定位的元素定位

4.fixed 固定定位 始终相对于浏览器定位

5.sticky 粘性定位 层级自动提高 跨越到特定阀值时停止

以上均配合left、right、top、bottom的值来改变元素位置

5.z-index(紧对定位元素产生效果)

z轴(可以理解为箭头朝向屏幕)的堆叠顺序，谁数字大谁在最上面

定位特性：

1.相对定位

没有脱离正常文档流，层级可以覆盖浮动流

2.绝对定位

1)绝对定位会脱离标准文档流，影响下面元素

2)经过绝对定位的元素会变成行内块级元素，使其具备行内块级元素的特性

3)绝对定位层级>浮动层级>标准文档流

列表样式

list-style:none 列表没有样式

list-style-type：

disc 黑色圆点

circle 空心圆

square 实心方形

decimal 数字

list-style-image：url( "图片位置") 图片小标

list-style-position：

        outside 默认在外边

        inside 在里面(向右移动)

鼠标光标样式cursor

1）default 默认 白箭头

2）text 默认 文本工字型

3）wait 等待状态

4）help 帮助状态

5）pointer 链接样式 小手状

6）url("图片路径"),auto 自定义光标样式

7) not-allowed 禁止图标

其他

opacity 不透明度 取值范围 [0,1]

兼容ie8及以下版本 filter : alpha(opacity=数值) 数值取值范围[0,100]