CSS定位和层叠

137 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

相对定位

开启相对定位: 不脱离文档流。

如果把当前元素设置为脱离流的话,margin实现的水平居中失效。

由于父级容器没有设置height属性,父级元素出现高度塌陷的问题。

可以让menu元素相对于当前元素设置定位,只需要为当前元素开启定位。

注意:软件开发的基本原则:低耦合。软件开发最理想的状态:零耦合。耦合度:简单来说,就是指很多值之间的关联大不大。所谓的理想:就是一个美丽的扯~。

固定定位

固定定位: 设置当前元素相对于浏览器窗口定位。

  • 电商首页的楼层导航

  • 回到顶部

  • 资讯网站文章精选(动态的固定定位)

继承

这里所说的继承,指的是 CSS 中的样式属性的继承。所谓继承,就是指当前样式属性不仅能作用于当前的元素,还能作用于所有的后代元素。

CSS 的样式属性分成两类:

  • 具有可继承性的属性, 比如 color 属性

  • 不具有可继承性的属性, 比如 margin 属性

疑问: 我怎么能知道哪些 CSS 属性是继承属性, 哪些 CSS 属性是不可继承属性? MDN 查阅

层叠

在浏览器运行 HTML 页面时, 最终看到的 HTML 页面的效果, 实际上是多个样式叠加在一起的综合效果:

  • 浏览器本身对 HTML 页面提供了一个默认样式

  • 用户对 HTML 页面也可以定义样式(比较少见)

  • 开发者对 HTML 页面也会定义样式

用户定义的样式会覆盖浏览器提供的样式, 然后开发者定义的样式会覆盖用户定义的样式。

对于我们(开发者)比较关注的:

  • 浏览器提供的默认样式

  • 开发者定义的样式

注意:即使是开发者定义的样式: 多重样式根据CSS选择器的优先级别, 判断最终有效的哪一个。CSS选择器的优先级别, 存在一个例外:当将某个样式属性设置为 !important, 表示该属性的级别最高。 !important吧(不建议使用)。

堆叠

堆叠: 更多指的是在开启定位的情况下(relative)在多个脱离文档流的元素中, 通过堆叠可以设置某个元素的层级高。z-index属性的值允许是负值, 但一般情况下不用。

兄弟关系的元素: 当这两个元素都脱离文档流之后。后面的元素会在前面的元素的上面。