CSS样式

复合选择器

CSS复合选择器有后代选择器、子代选择器、并集选择器、交集选择器、相邻兄弟选择器、同辈选择器（以上叫法略有差异）

1)后代选择器：

中间用空格隔开，可以管多代。
有关后代选择器有一个易被忽视的方面，即两个元素之间的间隔是无限的。
例如如果写作ul em{},这个语法就会选择从ul元素继承所有em元素，而不论em嵌套多深。

2)子代选择器：

用符号>隔开，只管一代。
如果不希望被任意后代元素继承，那么就选用子代选择器，例如ul>em{},
也可以有子代后代结合写法，如 ul em>p{},这个语法就会选择从ul元素继承所有em内的p元素

3)并集选择器：

中间用逗号隔开，并在一起共用一个样式。
如ul1,ul2{}，表示ul1与ul2公用此样式。

4)交集选择器：

中间没有符号,取两个基本选择器的交集。

5)相邻兄弟选择器：

用+符号，只选一个。
如a+b{},为紧跟在标签a后的标签b使用此样式。

6)同辈选择器：

中间~符号。选择所有同一级的同辈元素。(可以选择多个。)
如a~b{},即a标签下的所有b标签使用该样式。

CSS框模型

1)border

边框，盒子的外边框。
border:10px，简写属性,所有方向的边框都为10px
border-方向，设置某一方向的边框

2)margin

外边距，盒子与外界元素的间距
margin:10px，简写属性,所有方向的外边距都为10px
margin-方向,设置某一方向的外边距

3)padding

内边距，盒子外边框与盒子内元素的间距
padding:10px，简写属性,所有方向的内边距都为10px
padding-方向,设置某一方向的内边距
（注：不声明方向，后面写两个值，意思为上下，左右；写三个值，意思为上，左右，下）
在上述条件后加 _color、_style、_width等等,为设置颜色、样式、宽度等，用法同理

4)外边距合并

垂直合并

取间距最大值

水平合并

取两间距之和

CSS 定位

1)固定定位

position:fixed;
right:10px;
top:300px;
意思是固定该元素位置，位置是距右边10px、距上方300px，无论网页如何滚动，位置不变
脱离了标准文档流，可以插队

2)绝对定位：

position:absolute;
right:10px;
top:300px;
意思是该元素绝对位置是距右边10px、距上方300px，跟随网页
脱离了标准文档流，可以插队

3)相对定位：

position:relative;
right:10px;
top:300px;
意思是该元素相对于其原本的位置，位置是距右边10px、距上方300px

4)子绝父相

父为相对定位，子为绝对定位

CSS浮动

脱离了标准文档流，可以插队
float:left;左浮，元素顺序不变
float:right;右浮，元素顺序颠倒

背景颜色_渐变色

做网页页面通常要用到此样式，代码很简单
background:linear-gradient(red,white)
此代码意思为红色渐变至白色
第一个写渐变色起始色号
第二个写渐变色终止色号
注意:若背景色采用了渐变色，如需要鼠标事件改变背景颜色，则不能再用普通颜色，也需要用到渐变色代码，否则变色样式无效，如获取鼠标事件后要将背景改为白色：

background:linear-gradient(white,white)

起始色号与终止色号相同即可