background-attachment

33 阅读2分钟

background-attachment

background-attachment决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

可以设置以下3个值:

  • scroll:此关键属性值表示背景相对于元素本身固定, 而不是随着它的内容滚动
  • local:此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动
  • fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

background

background是一系列背景相关属性的简写属性。background-size可以省略,如果不省略,/background-size必须紧跟在background-position的后面。其他属性也都可以省略,而且顺序任意

列表

事实上现在很多的列表功能采用了不同的方案来实现:

  • 方案一: 使用div元素来实现
  • 方案二: 使用列表元素, 使用元素语义化的方式实现

事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局。原因是列表元素默认的CSS样式, 让它用起来不是非常方便。比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素。虽然我们可以通过重置来解决, 但是我们更喜欢自由的div。

HTML提供了3组常用的用来展示列表的元素:

  • 有序列表:ol、li
  • 无序列表:ul、li
  • 定义列表:dl、dt、dd

有序列表 – ol – li

ol(ordered list):有序列表,直接子元素只能是li

li(list item):列表中的每一项

无序列表 – ul - li

ul(unordered list):无序列表,直接子元素只能是li

li(list item):列表中的每一项

定义列表 – dl – dt - dd

dl(definition list):定义列表,直接子元素只能是dt、dd

dt(definition term):列表中每一项的项目名

dd(definition description):列表中每一项的具体描述,是对 dt 的描述、解释、补充。一个dt后面一般紧跟着1个或者多个dd