css概述五
十一.显示
1.显示方式
|
决定元素在网页中的表现形式(块级，行内，行内块，table) 语法： display: 取值： 1.display:block； 让元素以块级的方式显示 2.display:inline； 让元素以行内的方式显示 3.display:inline-block； 让元素以行内块的方式显示 4.display:table； 让元素以table的方式显示 5.display:none； 让元素隐藏，脱离文档流，不占位置 |
2.显示效果
|
显示/隐藏 visibility 取值：1.visible 默认值，可见的 2.hidden 隐藏 问题：visibility:hidden和display:none的区别 display:none脱离文档流，后续元素上前补位 visibility:hidden，不脱离文档流，虽然看不到，但是还占位置 |
3.透明度
|
opacity: 取值 0~1 1是不透明，0是全透明 问题：opacity和rgba的区别 opacity作用于元素，只要是颜色相关的属性都会改变透明度 rgba只会修改当前颜色的透明度 |
4.垂直对齐方式
|
vertical-align 一般只有两个地方使用 table中使用 取值 top/middle/bottom 设置table中的内容的 对齐方式 img中使用 设置图片与图片前后文字的垂直对齐方式 取值 top/middle/bottom baseline 基线 默认值 一般项目中通常会将所有的图片与文字垂直对齐方式， 更改为非基线对齐 |
5.光标
|
cursor: 默认值 default 小手 pointer 十字 crosshair 文本 text 等待 wait 帮助 help |
十二.列表的样式
1.列表标识项的样式
|
list-style-type 取值 1.disc 默认值 2.none 去掉标识项 3.circle 4.square |
2.列表项设置为图片
|
list-style-image:url(图片路径) |
3.列表项的位置
|
ul默认自带上下外边距(chrome解析16px) 自带左内边距(chrome解析40px) list-style-position 可以设置列表项在li里，或者设置列表在内边距里 取值 outside 默认值 在内边距里，在li外 inside 在li里 |
4.简写方式
|
list-style:type/url position; 最简方式，项目中使用最多的方式 list-style:none; |
十三.定位---相对，绝对，固定定位
|
position: 取值：1.static 默认，静态(默认文档流) 2.relative 相对定位 3.absolute 绝对定位 4.fixed 固定定位 当一个元素设置了position属性，并且取值为 relative/absolute/fixed其中一种时 这个元素被称为 已定位元素 已定位元素解锁了4个偏移属性 top： + ↓ -↑ right +← -→ bottom +↑ -↓ left +→ -← |
1.相对定位
|
position:relative; 配合偏移属性实现定位 相对定位，没有脱离文档流 如果相对定位元素，不写偏移属性，效果与没写定位是一样的，不影响任何布局，只是把这个元素变成了已定位元素 相对定位，相对自己原来的位置偏移某个距离 使用场合： 1.元素本身，位置微调(类似margin) 2.一般作为绝对定位的祖先元素 |
2.绝对定位
|
position：absolute; 配合偏移量使用 绝对定位，脱离文档流 绝对定位元素，如果祖先级没有已定位元素，那么就相对于body左上角，执行偏移量 绝对定位元素，会相对于离自己最近的，祖先级，已定位元素的左上角，进行偏移 绝对定位，由于脱离文档流，产生如下效果 1.页面不占据空间，后续元素上前补位 2.绝对定位的元素，会变成块级 3.没有写宽度元素，发生绝对定位以后，宽度靠内容撑开 |
3.固定定位
|
position:fixed; 配合偏移属性使用 将元素固定在页面上某个位置，不会随着滚动条滚动，发生变化 一直固定在页面的可视区域 特点：脱离文档流，位置始终相对body初始化 |
4.堆叠顺序
|
注意： 1.默认的堆叠顺序，html元素后写的堆叠顺序高 2.浮动和定位的堆叠顺序不是同一个体系，尽量避免在一起处理 3.手动调整堆叠顺序 z-index:整数 4.堆叠顺序对父子关系无效，儿子永远在爹的上面 5.只有已定位元素，可以设置堆叠顺序 |
