关于CSS3的学习

CSS的普通选择器：标签选择器、id选择器、类选择器、通用选择器(*)、分组选择器(将具有相同样式的元素放在一起，之间用","分隔)。注：类名和id名不能以数字开头。

rgba是rgb颜色的扩展，前三个值为三原色和rgb一致，第四个值是设置透明度的，1为完全不透明，0是完全透明为白色。hex颜色是用十六进制来表示颜色。hsl是使用色相、饱和度和明度来指定颜色，hsla再加一个透明度。

opacity属性可以设置元素的透明度，值从0到1。需要注意的是这个值会被子元素继承，所以要小心使用。

CSS背景属性简写（简写只是罗列了几条关于背景最常用的几个属性值），顺序background：background-color background-image background-repeat background-attachment background-position

CSS边框属性简写，顺序border:border-width border-style(必需) border-color。这是设置四条边框的属性，还可以单独设置每一条边框比如border-top等。简写中的每一个属性都可以设置四个值，分别为上右下左顺时针方向。

input输入框默认有实线边框，我们也可以使用border属性来定制我们好看的输入框，也可以定制按钮。

border-radius可以调节圆角边框，如果设置成一个正方形边长的一半，那么就会变成一个圆

CSS外边距合并，在垂直方向上，如果有两个margin接触到一起，那么就会合并成一个较大的那个margin。元素自身没有内容，且设置了上下margin那么也会发生合并。

CSS中的普通盒子的宽高指的是内容区的宽高，如果加内边距和边框的话就会加在盒子外面，这样排版就会很难受。因此我们可以设置盒子的属性box-sizing:border-box,这样盒子就是一个特殊盒子，外边距和边框会加在盒子里面。

CSS中表格因为table和td都设置了边框所以出现了双层边框，我们可以设置table的border-collapse: collapse;来将双边框合并为单边框。

tr后面加上:hover选择器，然后设置背景颜色，这样可以实现鼠标悬停时高亮。

tr后面加上:nth-child()选择器，通过填入参数even(或2n)、odd(或2n+1)，然后设置背景颜色，这样可以实现斑马纹表格效果。

CSS的display设置元素的呈现方式，元素有默认的呈现方式，但我们可以修改。比如无序列表ul中的li是一个块级元素，但是我们可以li{display:inline}，这样就让li水平处在一行内。

CSS的display属性值为none，那么就没有创建这个dom元素，visibility属性值为hidden则是创建了dom元素但看不见。

注意块级元素可以包裹行内元素，但是行内元素不能包裹块级元素。比如要用ul做一个水平导航栏，li可以使用display:inline或float:left的方式使其水平排列，但是我们的水平栏需要一个合适的高，因此li里面包裹的a标签就需要设置为display:block，然后设置内边距、外边距。这里设置li为行内元素就出现问题了，只能让其浮动。

CSS定位position，默认值为static，根据页面的正常流定位；relative相对于元素原本的位置进行定位；fixed相对于窗口进行定位；absolute相对于已定位的父元素进行定位，没有定位父元素则相对窗口进行定位；sticky相对于用户滚动位置进行定位，大致相当于relative和fixed切换。top、bottom、left 和 right 属性定位了才生效（static除外，static定位后不生效）

清除浮动可以在浮动元素的盒子外面加上一个::after伪类，设置clear:both。

div没有设置宽高默认是弹性盒子，会被里面的元素撑开。

ul是有默认的margin和padding的，我们一般使用可以将其清除。去除掉无序列表前面的符号使用list-style-type:none。

display: inline-block与`display: inline` 相比，主要区别在于 `display: inline-block` 允许在元素上设置宽度和高度。

伪类用来定义元素的特殊状态，伪类语法如下。

*selector*:*pseudo-class* {
*property*: *value*;
}

`a:hover` 必须在 CSS 定义中的 `a:link` 和 `a:visited` 之后，才能生效！`a:active` 必须在 CSS 定义中的 `a:hover` 之后才能生效！伪类名称对大小写不敏感。