目录
1、CSS选择器
基本选择器【要注意权值】
层次选择器 
锚点伪类选择器
a:link {color:} /* 未访问的链接 */
a:visited {color:} /* 已访问的链接 */
a:hover {color:} /* 鼠标划过链接 */
a:active {color:} /* 已选中的链接 */
/*
元素:hover 表示聚焦后改变自己
元素:hover 元素 表示聚焦后改变其子元素
元素:hover + 元素 表示聚焦后改变其指定的“亲兄弟”（条件是该兄弟元素与其相邻）元素
元素:hover ~ 元素 表示聚焦后改变其指定的兄弟元素，两个元素相不相邻都行。
*/属性选择器 
结构伪类选择器
2、link标签常用场景
<link rel="stylesheet" href="https://example.com/styles.css">
//链接到一个CSS层叠样式表
<link rel="canonical" href="URL.html">
//SEO优化：重定向
<link rel="shortlink" href="https://example.com/?p=42">
//之前用于包含icon的链接（已被废弃不再使用）
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
//链接到当前文档的一个 AMP HTML 版本
<link rel="manifest" href="manifest.json">
//链接到一个指定Web应用程序“安装”证书的JSON文件
<link rel="author" href="humans.txt">
//链接到文档的作者
<link rel="license" href="copyright.html">
//指向一个适用于链接内容的版权申明
<link rel="alternate" href="https://es.example.com/" hreflang="es">
//给出可能的你的另一种语言的文档位置参考
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:599729022@qq.com">
<link rel="me" href="sms:+599729022">
//提供作者或其他的信息
<link rel="archives" href="https://example.com/archives/">
//链接到一个描述历史记录、文档或其他具有历史意义的材料的集合的文档
<link rel="index" href="https://example.com/">
//链接到层次结构中的顶级资源
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
//给出一个自我参考,当文档有多个可能的参考时非常有用
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="prev" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">
//分别是在一系列文件中的第一个、下一个、上一个和最后一个
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
//当使用第三方服务来维护 blog 时使用
<link rel="pingback" href="https://example.com/xmlrpc.php">
//当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论
<link rel="webmention" href="https://example.com/webmention">
//当你在自己的页面上链接到一个URL时通知它
<link rel="import" href="/path/to/component.html">
//加载一个外部的HTML文件到当前HTML文件中
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
//打开搜索
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
//Feeds
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
//预取、预载、预浏览
<link rel="icon" href="favicon.ico" type="image/x-icon" />
//网页加入图标
<link rel="Bookmark" href="favicon.ico">
//收藏夹中显示的图标
<link rel="canonical" href="http://example.com/article.html">
//用于该文章的样式
<link rel="mask-icon" href="path/to/icon.svg" color="red">
//固定网站（Apple Safari浏览器）
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
//禁用翻译提示（Google Chrome浏览器）
<link rel="manifest" href="manifest.json">
//链接到一个 manifest 并定义 manifest 的源数据
//manifest.json 中的例子也可以通过以下链接找到（Google Chrome Mobile 针对 Android）
<link rel="icon" sizes="192x192" href="highres-icon.png">
//主屏幕图标（Google Chrome Mobile 针对 Android）3、边距与table的border-collapse
/*
语法：
border-collapse : separate | collapse
取值：
separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
当border-collapse设置为collapse时，表格自身的border与cellspacing属性便没有作用了。
border-collapse
*/
/*
内边距
padding
padding-top
padding-right
padding-bottom
padding-left
内边距是元素的内容与边框(border)之间的距离
padding:
如果 padding 属性缺失 bottom、left; bottom 会参考 top, left 会参考
外边距
margin
margin-top
margin-right
margin-bottom
margin-left
外边距是元素的边框外的距离，用来设置两个元素之间的距离间隔，也用来实现元素的居中
marign:0 auto;
但需要一个条件，那就是该元素的上级一定要设置text-align:center内容居中属性样式。
*/4、伪类、伪元素
伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
伪元素：用于创建一些不在文档树中的元素，并为其添加样式。
伪类的分类：状态伪类和结构性伪类
常见的状态伪类主要包括：
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
常见的结构性伪类包括：
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个子元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty 选择的元素里面没有任何内容。
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
:disabled匹配禁用的表单元素。
:enabled匹配没有设置disabled属性的表单元素。
:valid匹配条件验证正确的表单元素。
常见的伪元素选择器：
::first-letter 选择元素文本的第一个字（母）。
::first-line 选择元素文本的第一行。
::before 在元素内容的最前面添加新内容。
::after 在元素内容的最后面添加新内容。
::selection匹配用户被用户选中或者处于高亮状态的部分
::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
应用：
/*伪元素的应用：
清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。
代码如下：*/
.clear::after {
content: '';
display: block;
clear: both;
}
/*画分割线：画一条如下的分割线
代码如下：*/
<style>
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
/*计数器：使用CSS实现计数器，用到的属性有
counter-reset: 属性设置某个选择器出现次数的计数器的值。默认为 0。
counter-increment: 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
content: 插入生成内容。
代码如下：*/
<style>
.chooses {
counter-reset: letters;
}
.chooses input:checked {
counter-increment: letters;
}
.choose span::after {
content: counter(letters);
}
</style>
</head>
<body>
<div class="chooses">
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
<input type="checkbox">d
<input type="checkbox">e
<input type="checkbox">f
<input type="checkbox">g
<input type="checkbox">h
<input type="checkbox">i
<input type="checkbox">j
</div>
<p class="choose">我选择了<span></span>个字母</p>
</body>
5、块元素、内联元素、浮动、文档流
块级元素诸如段落<p>、标 题<h1><h2>…、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。
而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……
block（块）元素的特点：【block元素才能使用margin：0 auto 居中对齐】
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
inline元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
相对定位， 即相对于元素在文档流中位置进行偏移。 但保留原占位。
绝对定位， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。
文档流
【有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中。】
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。
内联元素不会独占一行。
几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。
5.1 display属性
1、display：inline
此元素会被显示为内联元素，元素前后没有换行符，即display:inline的作用即可以将一个块级元素转换成行内元素，
那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。
2、display：block
该属性会把元素转换为块级元素，此元素前后会带有换行符，因此就可以设置元素的宽高和上下的margin和padding
3、display：inline-block
设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性
例如ul li a 标签组合float：left做成的横向导航用display：inline-block属性就可以完成：
3、display：flex【默认主轴水平排列】
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
它可以用于以下四个方面：
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，
结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
#justify-content justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
#align-items 属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6、css中auto的用法、居中对齐
margin-left:auto是右对齐，而margin-right:auto;是左对齐，margin:0 auto居中对齐并不是我打错了，它就是这样。
这三个与margin有关的auto是用来对齐元素的
1.该元素必须是区块
块区元素可以使用margin:0 auto;<img> <embed> <span>等等这些不是区块，是内联，使用了也没有效果。
(如果想让他们对齐可以手动将他们变为区块，display:block;)
2.该元素需要设置宽度，如果不设置宽度，则默认宽度为width:auto;，
你只需要记住，如果不设宽度，很多情况该区块的宽度会与父元素的宽度一样，这样就无所谓左对齐右对齐或居中对齐了，
因为该元素会一直占据着整个父元素的宽度。只有当该元素的宽度小于父元素的宽度时候，才能看出左对齐，右对齐和居中对齐的效果。
#{margin: 0 auto;} //auto就是根据浏览器的渲染而给她赋值
根据 上右下左的顺序，完整的代码应该是#{margin: 0 auto 0 auto;}
这个原理是盒子模型的顺序，意思是：盒子的上下边距是0，左右是auto，这样，就实现了盒子居中了。
一个区块设置为width:auto;之后，会根据父元素的width，该元素本身的margin，该元素本身的border，该元素本身的padding来一起决定该元素的width。
换句话说，该元素的width+padding*2+border*2+margin*2 = 父元素的width
7、CSS常用开发
7.1、图片、动画常用设置
/*
文字默认大小 8px
*/
//图片常用设置==============================================================================
//动画效果
如果transform简写形式，必须先移动，后旋转【一般z轴移动的是 需要先旋转转在移动的 如旋转木马案例】
做3D动画必须给父亲加透视【画面更富3D感】和3d效果保留【出现3D操作效果】
# {perspective:XXpx transform-style:preserve-3d}
# {transform: translateY(50%) rotateX(-80deg)}【注意transform:translateZ()中只能写XX px】
过渡效果是谁做过渡给谁加
# transition:属性 花费时间 运动曲线 延迟多久
//整体旋转效果要选择好旋转中心点，不然是会歪的
//radius 弧形边框
img {
border-radius:50%;/*边框变圆形*/
border-radius:7px;//边框变圆润
border:1px dashed pink;
}
//伪元素是内联元素，没有大小的，要设置width height的话，需要进行转换 方法有两种
1、子绝父相 其中绝对定位不要忘了要使用top right定位 和自己的宽高
2、display:block
//溢出隐藏
div {overflow: hidden;}
//隐藏旋转 div 元素的背面：:
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 、Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
//在一个div元素中设置多个背景图像（并指定他们的位置）：
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
background-color 指定要使用的背景颜色
background-position 指定背景图像的位置
值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。
background-size 指定背景图片的大小
background-repeat 指定如何重复背景图像
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image 不会重复
inherit 指定 background-repeat 属性设置应该从父元素继承
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。
inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容
background-image 指定要使用的一个或多个背景图像
//设置图像的 z-index：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，高的遮挡低的。默认为0
//添加阴影
div
{
box-shadow: 10px 10px 5px #888888;
}
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
//透明度
div
{
opacity:0.5;
}
值 描述
value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit Opacity属性的值应该从父元素继承7.2、文本设置
//文本、表格常用设置==============================================================================
//文本不会被挤到下一行
规定段落中的文本不进行换行：
p
{
white-space:nowrap;
}
//设置行高 不同行文字基线与基线的距离
div {line-height:XX px/inherit}
若想要垂直方向居中，line-geight设为盒子的height
//list-style 简写属性在一个声明中设置所有的列表属性。
ul/li {
list-style:list-style-type list-style-position list-style-image
}
list-style-type, list-style-position, list-style-image.
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块
//li加浮动后，ul高度坍塌解决
若ul高度没有指定，是靠li撑起来的，则在li添加浮动后，ul会高度坍塌。
ul::after {
clear: both;
display: block;
content: "";
}
ul li {
float: left;
width: 60px;
height: 35px;
list-style: none;
}
7.3、鼠标常用设置
//鼠标常用设置==============================================================================
//鼠标变小手
div {cursor:pointer}
//active
:active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，
它代表的是用户按下按键和松开按键之间的时间。
:active 伪类一般被用在 <a> 和 <button> 元素中. 这个伪类的一些其他适用对象包括包含激活元素的元素，
以及可以通过他们关联的<label>标签被激活的表格元素。
这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover 和 :visited。
为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。
这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
## <p>
<a href="#">This link will turn red while you click on it.</a>
</p>
CSS:
a:link { color: blue; } /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { background: yellow; } /* 用户鼠标悬停 */
a:active { color: red; } /* 激活链接 */8、px、em、rem之间的换算
rem是相对于根元素<html>的font-size,这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设为多少，由我们来定
我们知道，浏览器默认的字号是16px，如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。
注意：任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合1rem=16px
所以假定我们让一个div的宽度为2em,那么把它换算成px，width：32px，
同理，假如一个设计稿为宽度48px，高度为60px，则换算成rem就是width=48/16=3rem,height=60/16=3.75rem
当然如果我们在css中设置了html根元素的font-size的值，
如下所示（为了方便计算，时常将在<html>元素中设置font-size:值为62.5%,也就是16*62.5%=10px）
html{font-size:10px}
那么后面的css里面的rem值就以1rem =10px来换算
所以假定我们让一个div的宽度为2em,那么把它换算成px，width：20px，同理，假如一个设计稿为宽度48px，高度为60px，则换算成rem就是width=48/10=4.8rem,height=60/10=6rem
9、position属性
static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其
层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-
index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条
时，对象不会随着滚动。而其层叠通过z-index属性定义。
2650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
