CSS 伪类+定位+display篇

伪类:

注:

• 注意事项:

  ​ 如果将来需要给某个元素添加以上四个伪类中的若干个(不止一个), 在书写css样式的时候, 从上到下的顺序按照:

  ​ link->visited->hover->active

  ​ “爱恨原则”

  ​ LoVe-HAte

伪类选择器

• 伪类选择器是一种虚构的状态或者是一个具有特殊属性的元素可以使用的css选择器

  ​ 伪类选择器不需要实现设置对应的类值, 系统已经为几乎所有的元素设置好了伪类选择器对应的标识符, 我们直接书写选择器即可.

  ​ 伪类选择器在书写语法上很有特点. 以:开头

• 选择器类型

1. :link 选择器

   ​ 能找到定义了超链接且没有被访问过的元素

2. :visited 选择器

   ​ 能找到定义了超链接且已经被访问过的元素

3. :hover 选择器

   ​ 能找到鼠标在其上面悬停的元素 (不止超链接标签, 所有标签)

4. :active 选择器

   ​ 找到鼠标在其上面按下且不松开的元素

定位布局

注:

• 布局方式:

  ​ 1. 盒模型布局

  ​ 2. 浮动布局 大块的区域划分时候块元素的水平布局

  ​ 3. 定位布局 对元素进行精确的位置调整

  ​ 4. 流式布局

  ​ 5. 媒介查询

  ​ 6. 多列布局

  ​ 7. 弹性布局

• 文档流:

  ​ 指html元素按照书写的顺序从上到下, 从左到右排列, 块元素独占一行, 行元素在一行显示(从左到右), 先写的先显示, 后写的后显示. 每个html元素都有自己合理的位置

• 颜色半透明效果

  rgba:

  red(0-255), green(0-255), blue(0-255), alpha(不透明度, 取值返回0-1, 0完全透明, 1完全不透明

  background-color: rgba(0, 0, 0, 0.6);
  

• 绝对定位与相对定位

  相同点: 都可以通过left, top, right, bottom移动元素

  不同点: 一个脱离文档流(absolute),一个保留自身的位置,不 　　　　完全脱离文档流(relative)

  ​ 一般情况下, 我们在为绝对定位的元素找参考的时候, 要选择能通用的祖先元素作为参考, 大部分情况下直接找absolute定位的元素的父元素，为其添加relative.

定位

定位: position

​ 对元素的位置进行精确的调整

​ 定位一共有四种定位方式:

1. 静态定位 static

​ static 是position的默认值

2. 相对定位 relative

​ 2.1 相对定位的元素不完全脱离文档流 (保留自己的位置, 但是层级提升)

​ 2.2 相对定位的元素移动的参考是元素自身的位置

3. 绝对定位 absolute

   3.1 绝对定位的元素, 脱离文档流, 失去自己的位置. 可以理解为漂浮在文档流的上方

   3.2 绝对定位的元素, 移动的参考是 距离它最近的, 设置了非static定位的祖先元素; 如果所有的祖先元素均没有设置非static定位, 则其相对于整个文档定位.

4. 固定定位 fixed

   4.1 固定定位的元素 脱离文档流 失去自己的位置

   4.2 固定定位的元素 移动的参考是整个html文档

   4.3 固定定位的元素 不会随着网页滚动而滚动

​ 以上四个值只是决定了元素的定位方式, 具体的元素该如何移动, 还需要借助left, right, top, bottom四个样式来决定.

​ 注意事项: 只有非static定位的元素, 才对left, right, top, bottom样式有效果, 不定位的元素, 以上四个css样式不起作用

注：

1. 在定位的四种方式中, 绝对定位和固定定位会使元素脱离文档流, 失去自己之前的位置，浮动元素也会脱离文档流, 也会失去自己之前的位置
2. 如果多个兄弟元素都绝对定位/固定定位, 它们都会脱离文档流
   此时, 越往后写的元素, 层级越高. 那么如果元素由重叠的部分, 后写的元素会覆盖前写的元素
3. 只要元素脱离文档流, 那么元素就可能存在层级问题
4. 如果想要调整定位元素的层级, 使用z-index样式调整元素的层级
   z-index 样式只对非static定位的元素起效果
   z-index的默认值都是0, 值越大, 层级越高, 值越小, 层级越低

display

​ display样式: 规定元素应该生成的框的类型(可以规定一个元素的特性)

​ 所有的HTML元素系统都给予的尤其默认的一些样式值, 导致这些元素会有一些直接能看到的特点

display:

​ 1. block 将此元素显示为块元素

​ 2. inline 将此元素显示为行元素

​ 3. inline-block 将此元素显示为行级块元素(css2.1之后添加的)

​ 4. none 此元素不会显示(我们一般用于隐藏元素)

​ 5. table

​ 6. table-cell

​ 7. flex

​ 8. inline-flex

• float和display:inline-block的区别:

1. float会使元素脱离文档流(会产生一些问题). display:inline-block元素不脱离文档流(出现缝隙)

2. 如果子元素高度不一致, 垂直对齐方式不同. float顶部对齐. display:inline-block底部对齐

​ display:inline-block的元素横向兄弟之间会出现缝隙. 出现原因是因为人为的换行

解决办法:

​ 1.1 改变书写方式:

​ 1.2 去掉人为的换行

​ 1.3 通过将标签的结束标签后尖括号挪到第二行

​ 1.4 通过加空注释

​ 1.5 使用代码打包工具(会自动删掉文档里所有的多余的空格)

​ 1.6 css hack

​ display:inline-block的元素与父元素底部会出现缝隙. 原因有行元素的默认垂直对齐方式导致的

• css hack css的兼容写法, 将父元素的font-size设置成0, 几乎可以适配绝大部分浏览器; 或者设置词间距

  ​ font-size: 0;

  ​ letter-spacing: -.3333em;