CSS面试细节整理（一）

最近面试时候发现自己最熟悉的css确实开发中好多细节没注意到，为了防止在栽跟头，打算从头到底捋一遍咯

语法部分：

1.css几种选择器的写法

（1）h1 em {color:red;} （后代选择器）  

（2）h1 > strong {color:red;} （子元素选择器）

（3）table.company td > p（结合后代选择器和子选择器）

（4）h1 + p {margin-top:50px;} （相邻兄弟选择器） 例子：li + li {font-weight:bold;} 会把列表中第二个元素变粗

 （5）html > body table + ul {margin-top:20px;}（结合其他选择器）

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

2.伪类元素的使用：

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

 

样式部分

3.background:

background-position 属性改变图像在背景中的位置。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

CSS背景的属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。