# CSS基础

# 选择器

# 选择器优先级

“越特别，越优先。”

# 单一的选择器

# 类选择器

最常用的选择器

CSS: .classname{}

HTML: <element class="classname"></element>

# id选择器

较常用的选择器，注意一个元素的id应当是唯一的

CSS: #id{}

HTML: <element id="id"></element>

# 元素选择器

选择一类元素

CSS: el{}

HTML: <el></el>

根据属性选择元素，支持部分包含（使用~=或|=，字段用空格或"-"分隔）和匹配所有值（只保留属性名，不限制属性内容）

CSS: [prototype="pro"]

HTML: <el prototype="pro"></el>

# 组合的选择器

组合的选择器仍然可以组合，符合逻辑就行。

# 派生选择器

如下后代选择器选择了a元素中的所有b元素。

CSS: a b{}

HTML: <a><b></b></a>

# 多类选择器

.class1.class2{}选择了class属性同时包含class1与class2的元素

# 结合元素的类选择器

如p.classname{}将选择class="classname"的p元素

# 结合元素的属性选择器

如a[href]选择了所有具有href属性的a元素

# 选择器中的符号

# 逗号,

a,b{}样式同时作用于a和b选中的元素，适用于选择多类元素

# 通配符选择器*

通配符选择器，允许选择所有元素

# 子元素选择器>

子元素选择器，a>b将选择a的所有直接子元素中的b元素。也就是说b元素与a元素之间不能有一层其他元素（如<a><span><b></b></span></a>是不行的）。

# 相邻兄弟选择器+

相邻兄弟选择器，a+b将选择与a具有同一父元素的相邻的b元素（如<p><a></a><b></b></p>中的b元素会被选中，但a不会被选中）。只能选择相邻的（下一个）元素，如果不相邻无法选择。

# 伪类与伪元素

伪类和伪元素用于css选择器，利用他们使css更灵活。

# 常见的伪元素

# ::after

::after用于描述处于css渲染层的一个伪元素，相当于选中元素的最后一个子元素，但这个元素与DOM节点无关，位于选择的元素之后，伪元素的内容用content属性描述。

# ::before

与after相对应，相当于被选中元素的第一个子元素。

# ::selection

将用户选择的内容作为伪元素。

# ::first-letter

选中第一个字符作为伪元素。但只能用于块级元素，并且第一个字符前不能有图片或内联表格。

# ::first-line

选中第一行作为伪元素，只能用于块级元素（行内元素也用不着这个说法...）。

# 伪元素与伪类的区别

伪元素将元素的某些部分作为元素选中（但不选中真正的元素），而伪类对应选择的元素的特殊状态（选择真正的元素）。

w3c的定义是，伪类用于向某些选择器添加特殊的效果（选择器已选中元素），伪元素用于将特殊效果添加到选择器（通过伪元素才能确定选中元素）。

更直观的理解是，伪元素达到的效果必须通过添加真实的元素替代，而伪类达到的效果必须通过添加真实的类替代。

# :hover

鼠标悬停于某一元素时生效。

# :active

通常用于<a>和<button>，对应鼠标按下时的状态。

# :link

匹配未访问过的链接，要求具有href属性的<a><area><link>元素。

# :focus

被聚焦的状态，通常用于<input>元素。

# :first-child

选择一组兄弟元素中的第一个元素。

# :first-of-type

选择一组兄弟元素中的第一个指定类型的元素（可以不是第一个元素）。

# :root

匹配文档树的根元素，在HTML文档中匹配html元素

# 盒子模型

content, padding,border,margin,(outline)

一个元素所占的空间由以上的数值决定，其中padding是内边距，border是边框，margin是外边距。通常我们设置的width与height决定了content的宽高，但我们可以使用box-sizing属性改变宽高的定义，从而width与height包括border与padding。

outline并不在盒子模型讨论的范围内，因为虽然也会显示，但不占用空间，只会覆盖其他元素。

# initial, inherit

任何属性都可以用这两个值填充，inherit表示继承父元素该属性的值，initial表示设为默认值。

# background

background-size：设定背景图片大小、缩放。“100% 100%”可令图片拉伸。

backgrounf-repeat：设定背景重复方式。

background-clip：决定背景是否占据border、padding的空间。

background-origin：决定背景图原点的位置由boder、padding或content决定。

background-position：基于origin的定义，决定背景图的初始位置（上下左右等）。“center center”可令背景图居中。

# flex

justify-content：决定主轴上的对齐方式。

align-items：决定交叉轴上元素的对齐方式（行内）。

align-content：决定交叉轴上不同行的对齐方式。

flex-direction：主轴方向可以是横向或竖向。

flex-wrap：决定是否换行。

flex-flow：direction和wrap的简写。

# flex的子元素

align-self：决定自己在交叉轴上的对齐方式。继承自父元素，无父元素默认stretch。

order：顺序，越小越靠前。

flex-grow：元素的放大比例，默认为0，如果大于0，有剩余空间时元素会占据更多主轴空间。

flex-shrink：元素的缩小比例，默认为1，如果等于0，即使空间不足也不会缩小。

flex-basis：分配具体空间前元素占据的主轴空间，默认取决于元素原本大小。空间不足或“空余且flex-grow大于0”，都会按flex-basis比例分配空间。

flex：flex-grow、flex-shrink、flex-basis的简写，默认为“0 1 auto”。

# gradient

# linear-gradient

CSS函数，用于表现两种或多种颜色的渐变，第一个参数是可选的角度，之后的参数是颜色和位置。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

# radial-gradient

径向渐变，也就是说有圆心，暂时不介绍。

# overflow

# BFC

# filter

# animation

animation-duration：定义动画持续时间，如0.3s，默认值为0

animation-delay：定义动画的延迟播放时间

animation-fill-mode：当动画不播放时应用的样式，可选forwards（应用动画结束时的属性）、backwards（应用第一个关键帧的属性）

animation-direction：播放方向。可选normal、reverse（反向）、alternate（奇数次正向播放，偶数次反向播放）、alternate-reverse（与alternate相反）

animation: 同时定义多个相关属性

animation-play-state running/paused 用于在播放过程中暂停

接下来看看如何定义和使用一个动画。

/*定义一个动画*/
@keyframes hidden{
  0%{
    opacity:1
  }
  100%{
    opacity:0
  }
}

.hide{
  animation-name:hide;
  animation-duration:1s;
  animation-fill-mode:forwards;/*动画结束后元素会一直隐藏*/
}

# 与动画相关的属性

backface-visibility：定义能否看到元素的背面，因为transform支持旋转，默认情况下，元素的背面是可见的。

# transition

# font

# text

text-align

text-decoration

word-break

word-wrap

word-spacing

# z-index

# float

# -webkit- -ms- -moz-

CSS方言，某种类型的浏览器会自己支持一部分特性。

# —webkit—appearance

# pointer-events

# 参考

https://www.guohere.com/3995.html