寒假提升｜ Day9 CSS 第七部分

已完成

:nth-child 只计算父元素的第几个子元素 ,不管是否是同种类型,也不会排除干扰项.

:nth-of-type 计数时只计算同种类型的元素,会排除所有的干扰项

第一个模仿京东我的购物车

第二个模仿B站头部服务列表

务必下载！！

今日的代码和讲义以及思维导图：【点击此链接下载 Day09.zip】

一. 绝对定位(absolute)

元素脱离 normal flow(脱离标准流、脱标)
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
定位元素(positioned element)
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是:
- 父元素设置position: relative(让父元素成为定位元素，而且父元素不脱离标准流)
- 子元素设置position: absolute
- 简称为“子绝父相”
- 当然，也有子绝父绝子绝父固不要死记

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局
绝对定位元素(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
- 另外，还得设置具体的宽高值(宽高小于定位参照对象的宽高)

另外还有一个定位的值是position: sticky，比起其他定位值要新一些.
- sticky是一个大家期待已久的属性;
- 可以看做是相对定位和固定(绝对)定位的结合体;
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
- 当达到这个阈值点时, 就会变成固定(绝对)定位;
sticky是相对于最近的滚动祖先包含滚动视口的( the nearest ancestor scroll container’s scrollport )

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
- float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
- 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
可以通过float属性让元素产生浮动效果，float的常用取值
- none:不浮动，默认值
- left:向左浮动
- right:向右浮动