CSS（day05）

显示

1. 显示方式
   决定元素在网页中的显示形式（块级、行内、行内块, table）
   属性display
   取值:

   block 让元素以块级的方式显示

   inline 让元素以行内的方显示

   inline-block 让元素以行内块的方式显示

   table 让元素以 table 的方式显示

   none 让元素隐藏, 脱离文档流, 不占位置

2. 显示效果
   显示/隐藏
   属性 visibility
   取值:

   visible 默认值, 可见的

   hidden 隐藏

   问题：visibility: hidden; 和 display: none 的区别

   display: none; 脱离文档流, 后续元素向前补位
   而 visibility: hidden; 不脱离文档流, 虽然看不到, 但是还占位置

3. 透明度
   属性 opacity

   取值 0~1 1为不透明, 0是全透明

   问题: opacity 和 rgba 的区别

   opacity 作用于元素只要是根颜色相关的属性都会改变透明度
   rgba 之后修改当前元素的透明度

4. 垂直对齐方式
   vertical-align 一般只有两个地方使用

   1. table 中使用 取值 top / middle / bottom 设置 table 中内容的对齐方式

   2. img 中使用 设置图片与图片前后文字的垂直对齐方式
      取值 top / middle / bottom / baseline 默认值, 基线对齐
      一般项目中通常会将所有的图片与文字垂直对齐方式, 更改为非基线对齐

5. 光标
   cursor

   取值: 默认值 default / 小手 pointer / 十字 crosshair / 文本 text / 等待 wait / 帮助 help

列表的样式

1. 列表表示项的样式
   list-style-type

   取值 desc（默认值）/ none 去掉标识项 / circle / square

2. 列表项设置为图片
   list-style-image: url(图片路径);

3. 列表项的位置
   ul 默认自带上下外边距（chrome 解析16px）自带左内边距（chrome 解析 40px）
   属性 list-style-position
   可以设置列表项在 li 里, 或者设置列表在内边距里

   取值:
   outside 默认值
inside 在 li 里

4. 简写方式
   list-style: type/url position;
   最间方式, 也是项目中使用最多的方式 list-style: none;

定位（相对、绝对、固定定位）

属性 position

• 取值:
  static 默认值, 静态（默认文档流）
  relative 相对定位
  absolute 绝对定位
  fixed 固定定位

  当一个元素设置了 position 属性, 并且取值为 relative/absolute/fixed 其中一种时, 这个元素被称为已定位元素

  已定位元素解锁了 4 个偏移属性 top / right / bottom / left

  四个偏移量的取值可以为负, 负值则是向反方向偏移 “例如：left: 10px; 元素向右移动 10px, left: -10px; 元素向左移动 10px”

1. 相对定位(position: relative;)

   相对定位, 没有脱离文档流 (配合偏移属性实现定位)

   如果相对定位元素不写 偏移属性 效果与没写定位是一样, 不会影响任何布局, 只是把这个元素变为已定位元素

   相对定位 相对自己原来的位置偏移某个距离

   使用场合:

   1. 元素本本身, 位置进行微调时 (类似 margin)
   2. 一般作为绝对定位的祖先元素

2. 绝对定位 (position: absolute)
   绝对定位, 脱离文档流

   注意：

   绝对定位元素, 如果祖先级元素没有已定位元素, 那么偏移量就相对于 body 的左上角

   绝对定位元素的偏移量, 会相对于离自己最近的, 祖先级元素, 已定位元素的左上角

   绝对定位由于脱离文档流, 产生如下效果:

   1. 页面不占据空间, 后续元素上前补位
   2. 绝对定位的元素会变为块级
   3. 没有写宽度的元素, 发生绝对定位以后宽度靠内容撑开

3. 固定定位
   position: fixed; 配合偏移量使用

   将元素固定再页面视口的某个位置, 不会根页面的滚动条滚动, 发生变化一直固页面的可视区域

   特点：
   脱离文档流, 位置始终相对 body 初始化

4. 堆叠顺序
   注意：

   1. 默认的堆叠顺序, html 元素后写的堆叠顺序高

   2. 浮动 和 定位 的堆叠顺序, 不是一个体系, 尽量避免在一起处理（如果非要处理那么 定位的层级会高一些）

   3. 手动调整堆叠的顺序 z-index: 整数; 整数的最大理论上线为 65536 但是超过也可以

   4. 堆叠顺序对父子关系的元素无效, 子元素永远在父级之上

CSS3（Core: 核心）

一、复杂选择器

1. 兄弟选择器
   兄弟元素: 具备相同父元素的平级之间称为兄弟元素
   兄弟选择器, 只能匹配到 弟弟, 不能匹配到 哥哥, 只能往前找不能往后找

   ① 相邻兄弟选择器（p+.c1 { color: red;}）

   选择器 + 选择器 { 样式声明 } 匹配紧紧靠在某元素后的兄弟元素

   ② 通用兄弟选择器（#p1~.c1 { color: red; }）

   选择器 ~ 选择器 { 样式声明 } 匹配元素之后所有符合条件的元素

2. 属性选择器
   允许通过元素所附带的属性, 及其值来匹配页面元素, 很精准

   [attr] 匹配有 attr 属性的元素

   [attr1][attr2] 匹配同拥有 attr1 和 attr2 属性的元素

   [attr=value] 匹配拥有 attr 并且值为 value 的元素

   elem[attr=value] 匹配拥有 attr 属性 值为 value 的 elem 元素

   模糊属性值的查询：
   [attr^=value] 匹配 attr 属性 以值 value 开头的元素
   [attr$=value] 匹配 attr 属性 以值 value 结尾的元素
   [attr*=value] 匹配 attr 属性 值中 含有 value 的元素
   [attr~=value] 匹配 attr 属性 值中 含有 value 单词的元素