CSS day05

css中常用的其它属性

1.显示方式

定义元素在页面中以什么方式显示(行内，行内块，块级，表格)
display:inline; 行内元素
block 块级
inline-block 行内块
table
none 脱离文档流的隐藏

2.显示效果

visibility: visible; 默认值，显示
hidden；隐藏,不脱离文档流
visibility: hidden；与display: none;的区别
visibility: hidden看不见但是占位置，
display: none;看不见也不占位置

3.opacity透明度

transparent<---->rgba(0,0,0,0);
opacity:0~1。 0 全透明，1是不透明
opacity和rgba的区别
rgba是让当前颜色透明
opacity会让元素内部所有与颜色相关的属性全都透明(包括后代元素，和图片)

4.关于vertical-align

只在3种情况下可以使用
①在table中使用 vertical-align：top/middle/bottom
让内部的文本垂直对齐
②给行内块设置 vertical-align：top/middle(默认值)/bottom
控制当前行内元素，之前/后，文本，行内，行内块与本元素的垂直对齐方式
③给img设置 vertical-align：top/middle/bottom/baseline(基线，默认值)
控制当前img，之前/后，文本，行内，行内块与本img的垂直对齐方式
通常项目中，会把img的vertical-align设置为非基线

5.光标的设置

光标的样式，要根据操作的系统不同，而使用系统光标
cursor: default; 默认值，小箭头
pointer；小手
wait；加载等待
help; 帮助
text 输入文本提示给用户的I
crosshair 截图光标，十字

6.关于列表的属性

列表标识项的类型

list-style-type: disc
              circle
              square;
              none

使用图片做列表标识

list-style-image: url()

列表标识的位置
list-style-position:outside(默认值，li外部)/ inside（li内部）;
简写方案 list-style:none;

定位

相对定位，绝对定位，固定定位

position:relative/absolute/fixed

一旦元素被position修饰，并且取值为relative/absolute/fixed中的一种时
1.这个元素被称为已定位元素
2.解锁四个偏移属性, 来控制元素在页面上的位置

top      + ↓    - ↑
right     + ←   - →
bottom  + ↑   - ↓
left      + →   - ←

（上下冲突，以上为准，左右冲突以左为准）
3.解锁堆叠属性 z-index

1.relative相对定位

position:relative; 配合top/left/bottom/right
①相对定位是相对元素原始位置做偏移
②相对定位的元素不脱离文档流
③如果一个元素，只设置相对定位，不设置偏移属性（偏移属性为0），
这个元素就出现在原始位置，同时不影响周围任何元素
相对定位的使用场合
1.类似于margin做元素位置的微调，但是会出现堆叠效果
2.项目中，常使用relative当做绝对定位的组先级已定位元素----------子绝父相

2.absolute绝对定位

position:absolute;
①绝对定位脱离文档流
②绝对定位相对谁位移
如果组先级没有已定位元素，以body左上角为基准做偏移
如果组先级有已定位元素，以离的"最近的"“组先级”“已定位元素"的左上角为基准做偏移
③最适合做"最近的”“组先级”"已定位元素"是相对定位relative
脱离文档流，会发生4件事
①不占页面空间
②后续元素上前补位
③没有设置宽度的元素，脱离文档流之后，宽度靠内容撑开
④任何元素脱离文档流之后，都可以设置宽高，都可以设置上下外边距

3.z-index 堆叠顺序

堆叠的特点：
1.默认情况下，后写的已定位元素，堆叠顺序高。默认堆叠在0~1,取不到1
2.浮动和定位的堆叠对比
浮动的堆叠在-1~0 之间，取不到0，还不能用z-index设置
3.z-index：取值为无单位的数字，一般在-1000~~1000之间取值
4.堆叠顺序对父子关系无效，永远儿子压在爹上面
5.只有已定位元素可以设置堆叠顺序

4.fixed固定定位

1.脱离文档流
2.永远以body左上角为基准偏移
3.不管页面怎么滚动，固定定位的元素都会显示在可视区域的某一个位置不动