主要是CSS2
背景属性（非常重要）：背景颜色、图片、图片的重复方式、定位
合写属性：backgrand：
background-origin：content-box/border-box/padding-box。默认是padding-box,背景从内边距开始铺
盒子属性：
content（内容）:
padding（内边距）:
margin（外边距）:
border（边框）:
display:用于转换盒子的显示状态
display常用属性：none,inline,block,inline-block,以及弹性盒子flex
如果display属性设置了none ，则浮动float和定位position都不生效
display:none：将元素完全隐藏，整体内容和位置全部隐藏起来
visibility: hidden：只隐藏容器的内容，容器的位置被保留。
文档流的标准是按照标签各自的规则，从上到下，从左到右排列顺序
标准文档流是每一个标签都按照标签元素的特性进行排序
浮动（float）：left/right
1.加了浮动的盒子是浮起来的，漂浮在其他资标准流盒子的上面
2.加了浮动的盒子是不占位置的，他原来的位置漏给了标准流的盒子
3.特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙
浮动的元素会脱离文档流（脱标），脱离文档流之后会更改盒子的显示状态，类似于inline-block,所有标签都能够浮动
浮动后的元素不会影响前面的元素，但会盖住后面元素的位置，却不会盖住后面元素的内容。
推荐浮动的方式：需要在一行显示的元素，最好是都浮动
盒子在文档流中垂直方向的margin不叠加，以较大的为准（标准文档流中横向的margin值不叠加）
内联（行内）元素上下的margin是被忽略掉了，只有左右的margin值
定位position
定位需要偏移的方向（top,bottom,left,right）和偏移量(单位是px)，两个属性来配合使用
静态定位：position:static
默认定位，不写也是静态定位
相对定位position:relative
position: relative;/*相对定位*/
top: 20px; /*元素的上方离原来元素的位置20px*/
相对于自己本身的定位，不脱标，保留位置
绝对position:absolute
脱标，不保留位置。
设有绝对定位的祖先元素没有设置定位时，以浏览器边框为边界（原点）设置偏移量的
设有绝对定位的祖先元素有设置定位（非static定位）时，以祖先元素的边框为边界（原点）设置偏移量的（大多选择子绝父相）
给内联元素设置绝对定位之后，将转换成内联块元素（不推荐此做法）
固定position:fixed
会脱标，不保留位置，偏移量以浏览器边框左上角为原点，范围是浏览器的可视区域
页面布局遵循的原则：
1.尽量使用标准流
2.标准流解决不了，使用浮动
3浮动解决不了，使用定位
大范围的布局使用浮动，小范围的挪移使用定位，绝对定位一般来说不单独使用，必须配合相对定位来使用（子绝父相）
关系选择器：
相邻选择器（E + F）：只能选择一个，而且还是相邻的后一个元素
兄弟选择器(E ~ F)： 可以选择一个或多个，但只能选择后面的元素
伪对象选择器
伪对象：不能被选中的对象，不是一个实际的对象宽高无效可以转为block元素
:before：必须有一个配合的属性：content,content:"";
伪类选择器：
可以根据a标签使用，使用时要注意顺序，hover选择器的权值为0,1,0。
hover可以单独使用，:hover等同于*:hover
| E:link | CSS1 | 设置超链接a在未被访问前的样式。 |
|---|---|---|
| E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |
| E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
| E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
四个选择器,如果要一起使用，必须要按照一定的顺序，l>v>h>a.目前，link和visited、active这三个不常用，用的比较泛滥的是hover，而且hover不仅仅可以用在a标签中使用，它也可以在任何标签中使用。
/* a标签未被点击时初始（）的样式 */
a:link {
color: aquamarine;
}
/* a标签被点击过后的样式 */
a:visited {
color: salmon;
}
/* 鼠标移到a标签上显示的样式 */
a:hover {
color: #FA8072;
}
/* 鼠标点击a标签时的样式 */
a:active {
color: #F4A460;
}
常用的技能：hover配合相邻、兄弟选择器一起使用
E元素hover过后，相邻元素F出现：E:hover+F
.big {
background-color: salmon;
display: none;
}
.box:hover+.big {
display: block;
}
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 |
| E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
|---|---|---|
| E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。 |
| E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。 |
input:focus {
background: #F5DEB3;
}
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
| E:first-child | CSS2 | 匹配父元素的第一个子元素E。 |
| E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
| E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。 |
| E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:first-of-type | CSS3 | 匹配同类型中的第一个同级兄弟元素E。 |
| E:last-of-type | CSS3 | 匹配同类型中的最后一个同级兄弟元素E。 |
| E:only-of-type | CSS3 | 匹配同类型中的唯一的一个同级兄弟元素E。 |
| E:nth-of-type(n) | CSS3 | 匹配同类型中的第n个同级兄弟元素E。 |
| E:nth-last-of-type(n) | CSS3 | 匹配同类型中的倒数第n个同级兄弟元素E。 |
| E:empty | CSS3 | 匹配没有任何子元素（包括text节点）的元素E。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li {
list-style: none;
}
/* li元素的父元素的第一个子元素，而且这个子元素必须是li */
li:first-child {
color: red;
}
/* li元素的父元素的第一个li子元素(无论这个li是在哪个位置，只论第一次出现的) */
li:first-of-type {
color: antiquewhite;
}
/* 这个寻找div的父元素的第一个子元素div，但是第一个元素不是div因此没有效果 */
div:first-child {
font-size: 30px;
color: cadetblue;
}
/* p元素的父元素的第一个子元素p（第一个出现的p元素） */
p:first-of-type {
color: #7CFC00;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="box">
<!-- <div>111</div> -->
<span>
9999
</span>
<p>1</p>
<p>2</p>
<div>
5555
</div>
<p>3</p>
<p>4</p>
<div>666</div>
<p>5</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul:empty::before {
content: "没有任何内容";
display: block;
border: 1px solid cadetblue;
}
</style>
</head>
<body>
<ul></ul>
</body>
</html>
属性选择器可以单独使用，加上标签就是交集选择器。例如：
a[href=“baidu”]
过渡（transition）
元素从一个状态到另一个状态中的一种缓慢展示过程
改变状态通常通过hover或者target这些选择器来
过渡写在变换的元素里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡与变换</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 1px solid firebrick;
/* 允许过渡的 css属性 */
/* transition-property: background-color,margin; */
/* 允许全部属性过渡 */
/* transition-property: all; */
/* 过渡效果的持续时间 */
/* transition-duration: 2s; */
/* 过渡的速度函数 */
/* transition-timing-function: linear; */
/* 过渡延迟执行的时间 */
/* transition-delay: 0s; */
/* 合写属性 按照以上的顺序，写在transition后面即可property duration timing-function delay */
transition:all 2s linear 1s;
}
.box:hover {
background-color: salmon;
margin: 0 0 0 500px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
变换（transform）
四大类：平移，缩放，旋转，斜切
变换最好配合过渡来使用
perspective属性为透视属性，启用透视，要放在变换元素的父元素上开启
动画（animation）
动画和过渡类似
过渡必须由事件启动，动画是自动启动
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
