2023年6月20日发(作者：)

尚硅⾕前端HTML-CSSCSS尚硅⾕前端HTML-CSS /CSS-01sgg-27 CSS层叠样式。 ⽹页是多层样式 最终能看到的只是最上⼀层style 内联样式 ⾏内 Title

少⼩离家⽼⼤回

1 内联样式 只能对⼀个标签⽣效 每个元素复制⼀份 。 样式发⽣变化时 维护成本⾼开发时不使⽤ 内联样式 。2 写在head 中的style 中.设置选择器。通过CSS选择器 来设置各种样式 可以同时为多个标签设置并修改更⽅便对于样式进⾏重复使⽤。 不能跨页⾯进⾏⽣效3 外部样式：写在⽂件中。 通过link 标签进⾏引⼊11 Title

少⼩离家⽼⼤回

1234p{ color: tomato; font-size: 50px;}将样式写到外部CSS 中可以最⼤限度 利⽤浏览器缓存机制 加快加载。CSS 基本语法style中遵循CSS的规范Selectors选择器+声明块。常⽤选择器元素选择器 id 选择器。 根据id选择 类选择器 class 属性 和id 类似 可以重复使⽤。 .class属性 class: 可以为同⼀个元素指定多个class 属性 通配选择器 * 表⽰所有元素8293637383940 Title

semir

少⼩离家⽼⼤回

少⼩离家⽼⼤回

少⼩离家⽼⼤回

少⼩离家⽼⼤回
复合选择器交集选择器 选择器1.选择器2.选择器3 必须使⽤元素选择器开头。选择器分组 并集选择器 选定多个。关系选择器⽗元素 ⼦元素祖先后代元素兄弟元素⼦元素选择器; ⽗>⼦后代元素选择器：祖先 后代兄弟元素选择器 前⼀个+下⼀个 选的是下⼀个兄弟。只有⼀个前⼀个～下⼀个 : 下边所有兄弟 上⾯的不受影响。属性选择器/^. $ * 等。8293637 Title

不可沽名学

不可沽名学

不可沽名学

zhiruyuanlaiyingyouyi

伪类选择器伪类:特殊的类 ⽤来描述⼀个元素的特殊状态 。⽐如第⼀个元素，被点击的元素。 第⼀个状态的元素:first-child :last-child 选所有的 标签:nth-child()first-of-type: 选同类型的 标签last-of-typenth-of-type(n) 2n 2n+1:not()17181920 超链接的伪类8293031323312 Title 连接

连接

连接
****link 和visited 是 超链接独有的**

**hover 和active 是所有标签都可以。****伪元素选择器不存在的元素 特殊的位置 并不是真实存在的元素⾸字母下沉继承只需要设置⼀次 就可以让 所有元素都有 相同样式 。并不是所有的样式都会被继承 布局背景相关的不会被继承选择器的权重样式冲突通过不同的选择器选中相同的元素 最终结果由选择器的优先级决定----内联样式 1000 优先 style=""----id选择器。 100----类和伪类选择器。10----元素选择器 1。这就是为什么不⽤内联样式 。⽤完之后没办法修改了 。所有的 选择器 的优先级之和 累加 计算 ⽐较 最⾼者显⽰ 。分组选择器单独计算 。类选择器 累加 再⾼ 也不会超过id选择器 。优先级计算相同 则优先使⽤靠下的样式。统配的选择器 优先级是 0继承的样式没有优先级! important 获取最⾼优先级样式 甚⾄超过内联样式。开发中慎⽤ 。像素和百分⽐长度单位 像素 pxem 和 rem1em=1font-size 默认1 font-size=16px 相对于⾃⾝的字体⼤⼩ rem 相对于根元素 html的 16pxRGB值 。 直接使⽤颜⾊名 不好去描述。0-255 之间 0-100% 之间。光的三⾊ rgb 000 ⿊⾊ rgb 255 255 255 ⽩⾊。 取⾊器 取出rgb 值。rgba a表⽰透明 1 表⽰完全不透明 0.5 表⽰半透明 0 完全透明16进制 RGB值 00-ff #0000000 #ffffff #bbffaa #bfa ⾖沙绿 。HSL 值 ⼯业设计⽤得⽐较多 H⾊相 S饱和度 L亮度HSLA值H ：0-360 S 0-100% L 0-100%⽂档流layout 布局⽹页的最底层 基础 ⽂档流 所创建的元素默认在⽂档流。元素状态：在⽂档流 / 不在⽂档流⾏内元素块元素 div块元素： 会默认在页⾯中占⼀⾏ 默认宽度就是 ⽗元素的全部 会把⽗元素撑满。默认⾼度：被⼦元素撑开不论宽度是多少总会独占⼀⾏⾃上⽽下 垂直排列⾏内元素 span不会占⼀⾏ 只会占⾃⾝⼤⼩ ⼀⾏容不下所有⾏内元素 元素会换⾏ 继续⾃左向右盒⼦模型页⾯中所有元素都设置为⼀个矩形的 盒⼦元素设置为矩形后 对页⾯的布局就变成了 不同盒⼦摆放在不同的位置 。每个盒⼦都有以下⼏个 部分盒⼦的内容区content盒⼦的边框 border内边距: padding 内容区和边框之间的距离外边距 margin 两个盒⼦之间的距离width head 设置内容区⼤⼩边框 border border-widthborder-colorborder-style边框的⼤⼩会影响到盒⼦的⼤⼩ 。sgg-46 盒⼦ 边框border-width ⼀般三个像素 。写四个值 上右 下左三个值 上 左右 下 。两个值 上下 左右⼀个值 均。border-top-width right bottom left /color不写border-color color 就会⽣效。border-style solid 实线 dotted 点状虚线。dashed虚线 double 双线 。内边距 padding padding-top bottom right left背景颜⾊会延伸到内边距。盒⼦ ：由 内容区 内边距 和边框⼤⼩共同决定。外边距 margin left right top bottom right 和bottom 会移动其他元素 设置负值 向 相反⽅向 移动 简写属性 margin margin-right 默认没有效果 元素 ⽔平布局: 由 margin-left border-left padding-left width 。。决定 ⽔平布局等于⽗元素内容区宽度 等式不成⽴ 会⾃动跳转 【过渡约束】 margin-right⾃动调节。 width margin-right 设置为auto ⾃动调整 。 width 默认是 auto width> 外边距 【都是auto】width 能多⼤就多⼤。 width 指定⼀个值 左右 auto 居中。 过⼤margin 为负。垂直⽅向的布局如果过⼤，⼦元素会从⽗元素中溢出overflow: hidden /visiable scroll ⽣成滚动条 通过滚动条查看。⽣成垂直⽔平两个滚动条。auto:根据需要 ⽣成滚动条外边距的折叠相邻的垂直⽅向外边距 会发⽣折叠 /重叠。相邻外边距 ⼀正⼀负 取两者的和。 都是正值 取较⼤的 都是负值 取绝对值较⼤的⽗⼦元素的相邻外边距 ⼦元素会传递给⽗元素。⾏内元素的盒⼦模型⾏内元素 不⽀持设置width 和head 内容区的宽⾼ 由内容决定可以设置padding 但是垂直⽅向 不会影响布局可以设置border 垂直⽅向 不会影响布局 margin 。< a href>display :⽤来设置 元素显⽰的类型 inline 设置为⾏内 block 设置为块元素 。 inline-block 将元素设置为 ⾏内块元素 既可以设置⾼度⼜不会独占⼀⾏ ⾏内块 开发中尽量少⽤。 table 将元素设置为表格 none 元素不在页⾯中显⽰123**visibility** hidden 设置元素的显⽰状态

visible hidden 位置占据 不显⽰ 浏览器 的默认样式去除默认样式 。1234* { margin: 0; padding: 0; }清除样式 样式引⼊在 最上⾯ 重制样式 。练习修改布局尽量通过块元素⽗元素中 垂直居中 将⽗元素的line-height 设置为⽗元素的height 。text-decoration : none 去除下划线盒⼦的⼤⼩box-sizing 设置盒⼦的尺⼨的计算⽅式content-box 默认值 宽度和⾼度 ⽤来设置内容区的我⼤⼩可选值 border-box 可见框的⼤⼩width height 是内容区 和内边距 和边框的总⼤⼩。sgg-59 边框: 轮廓和圆⾓out-line ⼤⼩ 轮廓 solid阴影box-shadow ：阴影⽔平偏移量 垂直偏移量 阴影模糊半径 颜⾊border-radiussgg -60浮动float : none left right元素设置浮动后会从⽂档流中脱离 不再占⽤ ⽂档流位置 。浮动元素 不会盖过其他浮动元素浮动元素特点1.浮动元素会完全脱离⽂档流 不再占据⽂档流的位置2.设置浮动以后 浮动元素会向⽗元素的左侧或右侧移动3.浮动元素 默认不会从⽗元素中移出4.浮动元素向左或向右移动时 不会超过它前边的其他浮动元素5.如果浮动元素 的上边是⼀个没有浮动的块元素 则浮动元素⽆法上移6.浮动元素不会超过它上班的浮动兄弟元素 最多最多就是和他⼀样⾼主要的作⽤是可以让页⾯的元素 可以⽔平⽅向的布局浮动元素不会盖住⽂字 ⽂字会⾃动环绕 在 浮动元素的周围 利⽤浮动设置⽂字环绕效果。脱离⽂档流特点： 1 块元素 不再独占⼀⾏ 2 脱离⽂档流之后 块元素的⾼度和宽度都被内容撑开。 ⾏内元素脱离⽂档流之后 会变成块元素特点和 块元素⼀样 脱离⽂档流之后 不需要区分块和⾏内了导航条简单布局⾼度塌陷和BFC⼦元素 浮动后 脱离⽂档流 ⽆法撑起⽗元素的⾼度 使 ⽗元素⾼度丢失。会导致页⾯布局混乱。BFC block Format Context 块级格式化环境 开启独⽴独⽴布局区域。开启BFC 元素 不会被浮动元素所覆盖 ⼦元素⽗元素 外边距不会重叠。开启BFC 包含浮动⼦元素常⽤⽅式：设置元素浮动 不推荐将元素设置为⾏内块元素 不推荐将元素overflow 设置为⼀个⾮visible的值overflow hidden 开启BFC 使其可以包含浮动元素 。clearclear 属性清除浮动元素对 当前元素产⽣的影响 。浏览器会为元素添加上边距 不受影响。 left right both 清除两侧最⼤的after 伪类 解决⾼度塌陷after+ display -block 完美⽅式 CSS 添加元素。clearfixdisplay table ::before clearfix 是类名【样式】 这个样式专门解决⾼度塌陷。 可以同时解决外边距重叠和⾼度塌陷的问题123456 .clearfix::brefore, .clearfix::brefore { content: ""; display: table; clear: both; }相对定位定位 把元素摆放到任意位置 positionstatic 默认不开启。relative 相对定位 absolute 绝对定位。fixed 固定 sticky 粘滞定位relative 加偏移量。top。bottom。 left。 right。相对定位特点：元素开启相对对定位后 不设置偏移量 不会发⽣任何变化相对定位 是参照于 元素在 ⽂档流中的位置 进⾏定位的相对定位会提升元素的层级相对定位不会使元素脱离⽂档流相对定位不会改变元素的性质块还是块 ⾏内还是⾏内绝对定位position absolute开启了绝对定位之后 如果不设置偏移量 元素的位置不会发⽣变化开启了 绝对定位之后 元素会从⽂档流中 脱离开启绝对定位 会改变 元素的性质 ⾏内变成块元素 块的内容被⾏内撑开。绝对定位会使 元素提升⼀个层级绝对定位元素是相对器包含块进⾏定位的包含块 containing block正常情况下 包含块就是离当前元素最近的祖先块元素绝对定位包含块 就是离他最近的开启了定位的祖先元素如果所有的祖先元素都没有开启定位 则根元素 就是它的包含块html 根元素 初始包含块。固定定位fixed 特殊的 绝对定位唯⼀的区别：参照浏览器的 视⼝ 进⾏ 定位 固定定位的元素不会随着⽹页滚动条的滚动 view port粘滞定位sticky新推出 ⽀持度不是特别好 IE 不⽀持. 类似相对定位可以在元素到达某个位置时 将其固定包含块 是body绝对定位⽤的最多绝对定位结合固定定位⼀起⽤ 。绝对定位：垂直⽅向等式也需要满⾜。 ¥¥¥¥⽔平布局 : left + margin-left + border-left +padding-left+ width + ～ =包含块内容区的⾼度 。开启了绝对定位之后：⽔平⽅向 布局 等式需要添加left 和right 两个值 此时规则 和之前⼀样 只是多添加了两个 值当发⽣过渡约束可设置为auto 的 值：margin width left right因为 left right 默认auto 所以垂直⽅向 布局 的等式也需要满⾜top + margin-top / bottom +padding-top/bottom +border-top/bottom +height =包含块的⾼度元素的层级：zindex 指定层级 。元素层级⼀样 优先显⽰靠下的。定位层级 是⼀样的 ，祖先元素层级再⾼ 也不会覆盖 后代元素 。

2023年6月20日发(作者：)

尚硅⾕前端HTML-CSSCSS尚硅⾕前端HTML-CSS /CSS-01sgg-27 CSS层叠样式。 ⽹页是多层样式 最终能看到的只是最上⼀层style 内联样式 ⾏内 Title

少⼩离家⽼⼤回

1 内联样式 只能对⼀个标签⽣效 每个元素复制⼀份 。 样式发⽣变化时 维护成本⾼开发时不使⽤ 内联样式 。2 写在head 中的style 中.设置选择器。通过CSS选择器 来设置各种样式 可以同时为多个标签设置并修改更⽅便对于样式进⾏重复使⽤。 不能跨页⾯进⾏⽣效3 外部样式：写在⽂件中。 通过link 标签进⾏引⼊11 Title

少⼩离家⽼⼤回

1234p{ color: tomato; font-size: 50px;}将样式写到外部CSS 中可以最⼤限度 利⽤浏览器缓存机制 加快加载。CSS 基本语法style中遵循CSS的规范Selectors选择器+声明块。常⽤选择器元素选择器 id 选择器。 根据id选择 类选择器 class 属性 和id 类似 可以重复使⽤。 .class属性 class: 可以为同⼀个元素指定多个class 属性 通配选择器 * 表⽰所有元素8293637383940 Title

semir

少⼩离家⽼⼤回

少⼩离家⽼⼤回

少⼩离家⽼⼤回

少⼩离家⽼⼤回
复合选择器交集选择器 选择器1.选择器2.选择器3 必须使⽤元素选择器开头。选择器分组 并集选择器 选定多个。关系选择器⽗元素 ⼦元素祖先后代元素兄弟元素⼦元素选择器; ⽗>⼦后代元素选择器：祖先 后代兄弟元素选择器 前⼀个+下⼀个 选的是下⼀个兄弟。只有⼀个前⼀个～下⼀个 : 下边所有兄弟 上⾯的不受影响。属性选择器/^. $ * 等。8293637 Title

不可沽名学

不可沽名学

不可沽名学

zhiruyuanlaiyingyouyi

伪类选择器伪类:特殊的类 ⽤来描述⼀个元素的特殊状态 。⽐如第⼀个元素，被点击的元素。 第⼀个状态的元素:first-child :last-child 选所有的 标签:nth-child()first-of-type: 选同类型的 标签last-of-typenth-of-type(n) 2n 2n+1:not()17181920 超链接的伪类8293031323312 Title 连接

连接

连接
****link 和visited 是 超链接独有的**

**hover 和active 是所有标签都可以。****伪元素选择器不存在的元素 特殊的位置 并不是真实存在的元素⾸字母下沉继承只需要设置⼀次 就可以让 所有元素都有 相同样式 。并不是所有的样式都会被继承 布局背景相关的不会被继承选择器的权重样式冲突通过不同的选择器选中相同的元素 最终结果由选择器的优先级决定----内联样式 1000 优先 style=""----id选择器。 100----类和伪类选择器。10----元素选择器 1。这就是为什么不⽤内联样式 。⽤完之后没办法修改了 。所有的 选择器 的优先级之和 累加 计算 ⽐较 最⾼者显⽰ 。分组选择器单独计算 。类选择器 累加 再⾼ 也不会超过id选择器 。优先级计算相同 则优先使⽤靠下的样式。统配的选择器 优先级是 0继承的样式没有优先级! important 获取最⾼优先级样式 甚⾄超过内联样式。开发中慎⽤ 。像素和百分⽐长度单位 像素 pxem 和 rem1em=1font-size 默认1 font-size=16px 相对于⾃⾝的字体⼤⼩ rem 相对于根元素 html的 16pxRGB值 。 直接使⽤颜⾊名 不好去描述。0-255 之间 0-100% 之间。光的三⾊ rgb 000 ⿊⾊ rgb 255 255 255 ⽩⾊。 取⾊器 取出rgb 值。rgba a表⽰透明 1 表⽰完全不透明 0.5 表⽰半透明 0 完全透明16进制 RGB值 00-ff #0000000 #ffffff #bbffaa #bfa ⾖沙绿 。HSL 值 ⼯业设计⽤得⽐较多 H⾊相 S饱和度 L亮度HSLA值H ：0-360 S 0-100% L 0-100%⽂档流layout 布局⽹页的最底层 基础 ⽂档流 所创建的元素默认在⽂档流。元素状态：在⽂档流 / 不在⽂档流⾏内元素块元素 div块元素： 会默认在页⾯中占⼀⾏ 默认宽度就是 ⽗元素的全部 会把⽗元素撑满。默认⾼度：被⼦元素撑开不论宽度是多少总会独占⼀⾏⾃上⽽下 垂直排列⾏内元素 span不会占⼀⾏ 只会占⾃⾝⼤⼩ ⼀⾏容不下所有⾏内元素 元素会换⾏ 继续⾃左向右盒⼦模型页⾯中所有元素都设置为⼀个矩形的 盒⼦元素设置为矩形后 对页⾯的布局就变成了 不同盒⼦摆放在不同的位置 。每个盒⼦都有以下⼏个 部分盒⼦的内容区content盒⼦的边框 border内边距: padding 内容区和边框之间的距离外边距 margin 两个盒⼦之间的距离width head 设置内容区⼤⼩边框 border border-widthborder-colorborder-style边框的⼤⼩会影响到盒⼦的⼤⼩ 。sgg-46 盒⼦ 边框border-width ⼀般三个像素 。写四个值 上右 下左三个值 上 左右 下 。两个值 上下 左右⼀个值 均。border-top-width right bottom left /color不写border-color color 就会⽣效。border-style solid 实线 dotted 点状虚线。dashed虚线 double 双线 。内边距 padding padding-top bottom right left背景颜⾊会延伸到内边距。盒⼦ ：由 内容区 内边距 和边框⼤⼩共同决定。外边距 margin left right top bottom right 和bottom 会移动其他元素 设置负值 向 相反⽅向 移动 简写属性 margin margin-right 默认没有效果 元素 ⽔平布局: 由 margin-left border-left padding-left width 。。决定 ⽔平布局等于⽗元素内容区宽度 等式不成⽴ 会⾃动跳转 【过渡约束】 margin-right⾃动调节。 width margin-right 设置为auto ⾃动调整 。 width 默认是 auto width> 外边距 【都是auto】width 能多⼤就多⼤。 width 指定⼀个值 左右 auto 居中。 过⼤margin 为负。垂直⽅向的布局如果过⼤，⼦元素会从⽗元素中溢出overflow: hidden /visiable scroll ⽣成滚动条 通过滚动条查看。⽣成垂直⽔平两个滚动条。auto:根据需要 ⽣成滚动条外边距的折叠相邻的垂直⽅向外边距 会发⽣折叠 /重叠。相邻外边距 ⼀正⼀负 取两者的和。 都是正值 取较⼤的 都是负值 取绝对值较⼤的⽗⼦元素的相邻外边距 ⼦元素会传递给⽗元素。⾏内元素的盒⼦模型⾏内元素 不⽀持设置width 和head 内容区的宽⾼ 由内容决定可以设置padding 但是垂直⽅向 不会影响布局可以设置border 垂直⽅向 不会影响布局 margin 。< a href>display :⽤来设置 元素显⽰的类型 inline 设置为⾏内 block 设置为块元素 。 inline-block 将元素设置为 ⾏内块元素 既可以设置⾼度⼜不会独占⼀⾏ ⾏内块 开发中尽量少⽤。 table 将元素设置为表格 none 元素不在页⾯中显⽰123**visibility** hidden 设置元素的显⽰状态

visible hidden 位置占据 不显⽰ 浏览器 的默认样式去除默认样式 。1234* { margin: 0; padding: 0; }清除样式 样式引⼊在 最上⾯ 重制样式 。练习修改布局尽量通过块元素⽗元素中 垂直居中 将⽗元素的line-height 设置为⽗元素的height 。text-decoration : none 去除下划线盒⼦的⼤⼩box-sizing 设置盒⼦的尺⼨的计算⽅式content-box 默认值 宽度和⾼度 ⽤来设置内容区的我⼤⼩可选值 border-box 可见框的⼤⼩width height 是内容区 和内边距 和边框的总⼤⼩。sgg-59 边框: 轮廓和圆⾓out-line ⼤⼩ 轮廓 solid阴影box-shadow ：阴影⽔平偏移量 垂直偏移量 阴影模糊半径 颜⾊border-radiussgg -60浮动float : none left right元素设置浮动后会从⽂档流中脱离 不再占⽤ ⽂档流位置 。浮动元素 不会盖过其他浮动元素浮动元素特点1.浮动元素会完全脱离⽂档流 不再占据⽂档流的位置2.设置浮动以后 浮动元素会向⽗元素的左侧或右侧移动3.浮动元素 默认不会从⽗元素中移出4.浮动元素向左或向右移动时 不会超过它前边的其他浮动元素5.如果浮动元素 的上边是⼀个没有浮动的块元素 则浮动元素⽆法上移6.浮动元素不会超过它上班的浮动兄弟元素 最多最多就是和他⼀样⾼主要的作⽤是可以让页⾯的元素 可以⽔平⽅向的布局浮动元素不会盖住⽂字 ⽂字会⾃动环绕 在 浮动元素的周围 利⽤浮动设置⽂字环绕效果。脱离⽂档流特点： 1 块元素 不再独占⼀⾏ 2 脱离⽂档流之后 块元素的⾼度和宽度都被内容撑开。 ⾏内元素脱离⽂档流之后 会变成块元素特点和 块元素⼀样 脱离⽂档流之后 不需要区分块和⾏内了导航条简单布局⾼度塌陷和BFC⼦元素 浮动后 脱离⽂档流 ⽆法撑起⽗元素的⾼度 使 ⽗元素⾼度丢失。会导致页⾯布局混乱。BFC block Format Context 块级格式化环境 开启独⽴独⽴布局区域。开启BFC 元素 不会被浮动元素所覆盖 ⼦元素⽗元素 外边距不会重叠。开启BFC 包含浮动⼦元素常⽤⽅式：设置元素浮动 不推荐将元素设置为⾏内块元素 不推荐将元素overflow 设置为⼀个⾮visible的值overflow hidden 开启BFC 使其可以包含浮动元素 。clearclear 属性清除浮动元素对 当前元素产⽣的影响 。浏览器会为元素添加上边距 不受影响。 left right both 清除两侧最⼤的after 伪类 解决⾼度塌陷after+ display -block 完美⽅式 CSS 添加元素。clearfixdisplay table ::before clearfix 是类名【样式】 这个样式专门解决⾼度塌陷。 可以同时解决外边距重叠和⾼度塌陷的问题123456 .clearfix::brefore, .clearfix::brefore { content: ""; display: table; clear: both; }相对定位定位 把元素摆放到任意位置 positionstatic 默认不开启。relative 相对定位 absolute 绝对定位。fixed 固定 sticky 粘滞定位relative 加偏移量。top。bottom。 left。 right。相对定位特点：元素开启相对对定位后 不设置偏移量 不会发⽣任何变化相对定位 是参照于 元素在 ⽂档流中的位置 进⾏定位的相对定位会提升元素的层级相对定位不会使元素脱离⽂档流相对定位不会改变元素的性质块还是块 ⾏内还是⾏内绝对定位position absolute开启了绝对定位之后 如果不设置偏移量 元素的位置不会发⽣变化开启了 绝对定位之后 元素会从⽂档流中 脱离开启绝对定位 会改变 元素的性质 ⾏内变成块元素 块的内容被⾏内撑开。绝对定位会使 元素提升⼀个层级绝对定位元素是相对器包含块进⾏定位的包含块 containing block正常情况下 包含块就是离当前元素最近的祖先块元素绝对定位包含块 就是离他最近的开启了定位的祖先元素如果所有的祖先元素都没有开启定位 则根元素 就是它的包含块html 根元素 初始包含块。固定定位fixed 特殊的 绝对定位唯⼀的区别：参照浏览器的 视⼝ 进⾏ 定位 固定定位的元素不会随着⽹页滚动条的滚动 view port粘滞定位sticky新推出 ⽀持度不是特别好 IE 不⽀持. 类似相对定位可以在元素到达某个位置时 将其固定包含块 是body绝对定位⽤的最多绝对定位结合固定定位⼀起⽤ 。绝对定位：垂直⽅向等式也需要满⾜。 ¥¥¥¥⽔平布局 : left + margin-left + border-left +padding-left+ width + ～ =包含块内容区的⾼度 。开启了绝对定位之后：⽔平⽅向 布局 等式需要添加left 和right 两个值 此时规则 和之前⼀样 只是多添加了两个 值当发⽣过渡约束可设置为auto 的 值：margin width left right因为 left right 默认auto 所以垂直⽅向 布局 的等式也需要满⾜top + margin-top / bottom +padding-top/bottom +border-top/bottom +height =包含块的⾼度元素的层级：zindex 指定层级 。元素层级⼀样 优先显⽰靠下的。定位层级 是⼀样的 ，祖先元素层级再⾼ 也不会覆盖 后代元素 。