小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
相对定位
开启相对定位: 不脱离文档流。
如果把当前元素设置为脱离流的话,margin实现的水平居中失效。
由于父级容器没有设置height属性,父级元素出现高度塌陷的问题。
可以让menu元素相对于当前元素设置定位,只需要为当前元素开启定位。
注意:软件开发的基本原则:低耦合。软件开发最理想的状态:零耦合。耦合度:简单来说,就是指很多值之间的关联大不大。所谓的理想:就是一个美丽的扯~。
固定定位
固定定位: 设置当前元素相对于浏览器窗口定位。
-
电商首页的楼层导航
-
回到顶部
-
资讯网站文章精选(动态的固定定位)
继承
这里所说的继承,指的是 CSS 中的样式属性的继承。所谓继承,就是指当前样式属性不仅能作用于当前的元素,还能作用于所有的后代元素。
CSS 的样式属性分成两类:
-
具有可继承性的属性, 比如 color 属性
-
不具有可继承性的属性, 比如 margin 属性
疑问: 我怎么能知道哪些 CSS 属性是继承属性, 哪些 CSS 属性是不可继承属性? MDN 查阅
层叠
在浏览器运行 HTML 页面时, 最终看到的 HTML 页面的效果, 实际上是多个样式叠加在一起的综合效果:
-
浏览器本身对 HTML 页面提供了一个默认样式
-
用户对 HTML 页面也可以定义样式(比较少见)
-
开发者对 HTML 页面也会定义样式
用户定义的样式会覆盖浏览器提供的样式, 然后开发者定义的样式会覆盖用户定义的样式。
对于我们(开发者)比较关注的:
注意:即使是开发者定义的样式: 多重样式根据CSS选择器的优先级别, 判断最终有效的哪一个。CSS选择器的优先级别, 存在一个例外:当将某个样式属性设置为 !important, 表示该属性的级别最高。 !important吧(不建议使用)。
堆叠
堆叠: 更多指的是在开启定位的情况下(relative)在多个脱离文档流的元素中, 通过堆叠可以设置某个元素的层级高。z-index属性的值允许是负值, 但一般情况下不用。
兄弟关系的元素: 当这两个元素都脱离文档流之后。后面的元素会在前面的元素的上面。