已完成
:nth-child 只计算父元素的第几个子元素 ,不管是否是同种类型,也不会排除干扰项.
:nth-of-type 计数时只计算同种类型的元素,会排除所有的干扰项
第一个模仿京东我的购物车
第二个模仿B站头部服务列表
务必下载!! 今日的代码和讲义 以及思维导图:【点击此链接下载 Day09.zip】
normal flow
(脱离标准流、脱标)left
、right
、top
、bottom
进行定位positioned element
)position
值不为static
的元素position
值为relative
、absolute
、fixed
的元素position: relative
(让父元素成为定位元素,而且父元素不脱离标准流)position: absolute
position
设置为absolute
/fixed
元素的特点严格按照从上到下
、从左到右
排布严格区分块级(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
设置具体的宽高值
(宽高小于定位参照对象的宽高)800 = 200 + ml0 + mr0 + 0 + 0
auto
-> 交给浏览器你来出来width: auto;
width: 包裹内容
width: 包含块的宽度
width: 包裹内容
position: sticky
,比起其他定位值要新一些.相对定位和固定(绝对)定位的结合体
;表现得像相对定位一样
,直到它滚动到某个阈值点;达到这个阈值点
时, 就会变成固定(绝对)定位
;sticky
是相对于最近的滚动祖先包含滚动视口
的( the nearest ancestor scroll container’s scrollport )z-index
兄弟关系
z-index越大
,层叠在越上面
z-index相等
,写在后面的那个元素层叠在上面
不是兄弟关系
从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
这2个定位元素必须有设置z-index的具体数值
float
属性可以指定一个元素应沿其容器
的左侧
或右侧
放置,允许文本和内联元素环绕它
。浮动图像
, 实现文字环绕的效果
;早期的CSS标准中
并没有提供好的左右布局
方案, 因此在一段时间里面它成为网页多列布局
的最常用工具;float属性
让元素产生浮动效果,float的常用取值none
:不浮动,默认值left
:向左浮动right
:向右浮动朝着向左或向右方向移动
,直到自己的边界紧贴着包含块
(一般是父元素)或者其他浮动元素的边界
为止定位元素会层叠在浮动元素上面
包含块
的左(右)边界行内级元素
、inline-block元素
、块级元素
的文字内容水平间隙问题
负margin