前端校招知识体系之css

本文将从以下四个方面展开介绍：

选择器
样式表继承
css3部分特性
BFC

css选择器优先级策略

先附上个链接：css选择器参考手册

内联>id>class=属性选择器=伪类选择器>tag=伪元素选择器

优先级的特殊情况：!important

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关

样式表继承

CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

由于继承而发生样式冲突时，最近祖先获胜（最近原则）。

至于可以被继承的样式有哪些？那真是太多了，我就不展开了，这里附上详细链接

css3

老规矩咱先甩个链接哈哈哈我是不是太懒了→css3

然后我们挑几个来说一下：

一、flex和grid布局

关于这两个布局，阮一峰老师写的实在是太好了，我又想直接放链接了，不行不行我还是稍微简单的写一点吧

（但链接咱还是放这→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里面的子元素不会影响外面的元素。