前端校招知识体系之css
本文将从以下四个方面展开介绍：
- 选择器
- 样式表继承
- css3部分特性
- BFC
css选择器优先级策略
先附上个链接：css选择器参考手册
内联>id>class=属性选择器=伪类选择器>tag=伪元素选择器
优先级的特殊情况：!important
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关
样式表继承
CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
由于继承而发生样式冲突时，最近祖先获胜（最近原则）。
至于可以被继承的样式有哪些？那真是太多了，我就不展开了，这里附上详细链接
css3
老规矩咱先甩个链接哈哈哈我是不是太懒了→css3
然后我们挑几个来说一下：
一、flex和grid布局
关于这两个布局，阮一峰老师写的实在是太好了，我又想直接放链接了，不行不行我还是稍微简单的写一点吧
1）flex
采用 Flex 布局的元素，称为 容器。它的所有子元素自动成为容器成员，称为 项目。
容器属性有：
flex-direction：row | row-reverse | column | column-reverse 决定项目的排列方向
flex-wrap：nowrap | wrap | wrap-reverse 决定项目是否换行以及如何换行
flex-flow：是flex-direction和flex-wrap的简写形式，默认值为row wrap
justify-content：flex-start | flex-end | center | space-between | space-around 定义了项目在横轴上的对齐方式
这里主要注意一下space-between和space-around
align-items：flex-start|flex-end|center|baseline|stretch 定义项目在纵轴上如何对齐
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目属性有：
- order：定义项目的排列顺序，数值越小越靠前
- flex-grow：定义项目的放大比例，默认为0
- flex-shrink：定义项目的缩小比例，默认为1
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认为auto
- flex：是
flex-grow,flex-shrink和flex-basis的简写 - align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items属性
2）grid
flex是轴线布局，是一维布局，grid是划分行和列，是二维布局
容器属性：
display：grid | inline-grid
grid-template-columns/rows：定义每一列/行的列宽
grid-row/column-gap：设置行间距/列间距
grid-auto-flow：row | column 决定排列顺序是先行后列还是先列后行
二、filter滤镜属性
这个属性可能你没用过或者没什么印象，但是它的确无处不在呢。
filter: none | blur()| brightness()| contrast()| drop-shadow()| grayscale()| hue-rotate()| invert()| opacity()| saturate()| sepia()| url();
最常见的是filter:blur( px)，用于给图像设置高斯模糊，值越大越模糊
其他详细介绍请戳这里~
三、媒体查询&rem
媒体查询@media
当我们需要设计响应式页面时，媒体查询是非常有用的，@media可以针对不同的屏幕尺寸设置不同的样式。
语法：@media mediatype and | not | only （media feature）
mediatype：all / print / screen / speech
常见media feature：
max-width / min-width：设备页面最大最小可见区域宽度
orientation：portrait / landscape 竖屏还是横屏
rem
rem多用于移动端适配，首先我们先来区分一下rem和em
em相对于当前对象文本的字体尺寸，由于em会继承父元素的大小，所以页面层级越深换算就越复杂
rem相对于根元素的大小，可以做到只修改根元素就能调整所有元素大小
js设置根元素font-size：
假设我们设计稿为750px，设它的根元素font-size为100px，
<script type="text/javascript"> /*动态调整rem值,除以100*/ function setsize() { var winW = document.documentElement.clientWidth, winH = document.documentElement.clientHeight, baseFontSize = 100, baseWidth = 750, winWidthSize = Math.min(winW, winH); if (winWidthSize < 270) { winWidthSize = 270; } var _html = document.getElementsByTagName('html')[0]; _html.style.fontSize =winWidthSize / baseWidth * baseFontSize + 'px'; } setsize(); </script>
四、transform&animation
transform转换
css转换，可以对元素进行移动、缩放、转动、拉长或拉伸
语法：transform：转换方法
tranform-origin：更改转换元素的原点
2D转换方法：
translate(平移)、rotate(旋转)、scale(放缩)、skew(倾斜)、matrix(以上合并)
3D转换属性：
transform-style：flat | preserve-3d
perspective：设置从何处查看一个元素的角度
perspective-origin：设置一个3D元素的底部位置
backface-visibility：定义元素在不面对屏幕时是否可见
transition过渡
必须指定要添加效果的css属性和效果的持续时间，如transition：all 2s
过渡属性：
transition-property：应用过渡的css属性的名称
transition-duration：定义过渡效果花费的时间，默认为0
transition-timing-function：ease | linear |ease-in/out |cubic-bezier( ) 规定过渡效果的时间曲线
transition-delay：规定过渡效果何时开始，默认为0
animation动画
要创建 CSS3 动画，你需要了解 @keyframes 规则。
- @keyframes 规则是创建动画，指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
- 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
- 在@keyframes中，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒 */
div
{
animation: myfirst 5s;
}
/* 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变 */
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
五、BFC
什么是BFC？
BFC（Block Formatting Context）块级格式化上下文，是web中盒模型布局的css渲染模式，指一个独立的容器。
形成BFC的条件
- 浮动元素，float除none以外的值
- 定位元素，position（fixed，absolute）
- display：inline-block，table-cell，flex，grid
- overflow除visible以外的值
BFC的主要特性
- 创建了BFC的元素中，子浮动元素也会参与高度的计算，即不会高度塌陷。
- 与浮动元素相邻的，创建了BFC的元素，不能与浮动元素相互覆盖。
- 创建了BFC的元素不会与他们的子元素发生外边距折叠。
- 内部的Box会在垂直方向一个接一个放置。
- BFC里面的子元素不会影响外面的元素。
