CSS 理解

选择器

通用选择器：

* {}

id选择器

#header {}

class选择器

.header {}

元素选择器

div {}

子选择器

ul > li {}

后代选择器

div p {}

伪类选择器

:hover {}
::selection {}
.action {}
:first-child {}
:last-child {}
:first-of-type {}
:last-of-type {}
:nth-of-type(n) {}
:nth-of-last-type(n) {}

伪元素选择器:

:after {}
:before {}

属性选择器:

input[type="text"] {}

组合选择器：

E,F/E F {} // 后代选择器
/E>F {} // 子元素选择器
/E+F {} // 直接相邻元素选择器----匹配之后的相邻同级元素
/E~F {} // 普通相邻元素选择器----匹配之后的同级元素

层次选择器

p~ul {} // 选择前面有p元素的每个ul元素

选择器区别

// 子选择器作用于元素的第一代后代，后代选择器作用于元素的所有后代
ul>li {} // 子选择器
div p {} // 后代选择器

css选择器优先级：

选择器优先级由高到低分别为

!important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器（* 应少用）>浏览器自定义；

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1、位于标签里的中所定义的CSS拥有最高级的优先权。

2、第二级的优先属性由位于标签中的 @import 引入样式表所定义。

3、第三级的优先属性由标签所引入的样式表定义。

4、第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。

5、第五级优先的样式有用户设定。

6、最低级的优先权由浏览器默认。

CSS哪些属性可以继承？

css继承特性主要是指文本方面的继承(比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。
不可继承的：

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承的：

visibility和cursor

终极块级元素可继承的：

text-indent和text-align

内联元素可继承的：

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

列表元素可继承的：

list-style、list-style-type、list-style-position、list-style-image

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

BFC的作用及原理：

自适应两栏布局
清除内部浮动
防止垂直 margin 重叠
BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

CSS函数有哪些？

根据w3cplus中可以划分为以下几类

属性函数：attr()；
背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
图形函数：circle()、ellipse()、inset()、polygon()、path()
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
数学函数：calc()、min()、max()、mixmax()、repeat()；
缓动函数：cubic-bezier()、steps()；
其他函数：counter()、counters()、toggle()、var()、 symbols()。