2020年5月7日总结
一、cursor(光标)
1.1.cursor:
- 可以设置鼠标指针(光标)在元素上面时的显示样式
- cursor常见的设值有：
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和分文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针在元素上
二、定位
2.1.标准流(Normal Flow)
- 默认情况下，元素都是按照normal flow(标准流，常规流，正常流，文档流【document flow】)进行排布
- 从左到右，从上到下按顺序摆放好
- 默认情况下，互相之间不存在层叠现象
2.2.margin、padding定位
-
标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
-
比较明显的缺点是
- 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果
2.3.CSS属性-position
- 利用position可以对元素进行定位，常用取值由4个
- static：静态定位
- relative：相对定位，相对于自己原来的位置
- absolute：绝对定位，子元素设置了absolute后，会先看它的父元素的定位是否是static，如果父元素的定位是static，则开始相对于父元素开始定位；如果父元素的定位不是static，则再次找父元素的父元素，查看其定位是否是static，一直找到定位是static的元素为止。
- fixed：固定定位
2.4.static-静态定位
- position属性的默认值
- 元素按照normal flow布局
- left、right、top、bottom没有任何作用
2.5.relative-相对定位
-
元素按照normal flow布局
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
-
相对定位的应用场景：
- 在不影响其他元素位置的前提下，对当前元素位置进行微调
2.6.fixed-固定定位
-
元素脱离normal flow(脱离标准流、脱标)
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是视口(viewport)
-
当画布滚动时，固定不动
-
画布和视口
- 视口(Viewport)
- 文档的可视区域
- 画布
- 真个浏览器页面本身
- 视口(Viewport)
-
脱标元素的特点
- 可以设置宽高
- 宽高默认由内容决定
- 不再受标准流的约束
- 不再给父元素汇报宽高数据
-
脱标元素与display有什么关系?
2.7.absolute-绝对定位
-
元素脱离normal flow(脱离标准流、脱标)
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
-
定位元素(positioned element)
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素
-
子绝父相
- 在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
- 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用的解决方案是：
- 父元素设置position: relative(让父元素成为定位元素，而且父元素不脱离标准流)
- 子元素设置position: absolute
- 简称为“子绝父相”
-
绝对定位技巧
-
绝对定位元素(absolutely positioned element)
- position值为absolute或者fixed的元素
-
对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
-
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
- left: 0;right: 0;top: 0;bottom: 0;margin: 0;
-
如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
- left: 0;right: 0;top: 0;bottom: 0;margin: auto;
- 另外，还需要设置具体的宽高值
-
2.8.定位元素的层叠关系
-
父子关系
- 子元素会层叠在父元素上
-
非父子关系
- 都是非定位元素：在标准流中一般不存在层叠现象
- 一个是定位元素，一个是非定位元素：定位元素会层叠在非定位元素上面
- 都是定位元素：使用CSS属性z-index来控制层叠顺序
2.9.CSS属性-z-index
-
z-index属性用来设置定位元素的层叠顺序(仅对定位元素有效)
- 取值可以是正整数、负整数、0
-
比较原则：
-
如果是兄弟关系
- z-index越大，层叠在越上面
- z-index相等，写在后面的哪个元素层叠在上面
-
如果不是兄弟关系
- 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
- 而且这两个定位元素必须有设置z-index的具体数值
-
三、浮动float
3.1.定位方案
-
在CSS中，有3中常用的方法对元素进行定位、布局
- normal flow：标准流、常规流、文档流
- absolute positioning：绝对定位
- float：浮动
-
绝对定位和浮动都会让元素脱离标准流，以达到灵活布局的效果
3.2.CSS属性-float
- 可以通过float属性让元素产生浮动效果，float的常用取值
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动
3.3.浮动的规则一
-
元素一旦浮动后
- 脱离标准流
- 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
-
定位元素会层叠在浮动元素上面
3.4.浮动的规则二
-
浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容
-
利用此特性，可以轻松实现文字环绕功能
3.5.浮动的规则三
- 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
3.6.浮动的规则四
- 如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界
3.7.浮动的规则五
- 浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮，右浮找右浮)
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到右重组的空间为止
3.8.浮动的规则六
- 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端
3.9.浮动的应用
- 浮动的应用场景
- 解决行内级元素、inline-block元素的水平间隙问题
