CSS

CSS在html的基础上为网页“增色”，有了CSS，我们才做出如今灵动多彩的网页。

CSS将作为面试考察的第一关，对CSS足够了解，才能成为一个合格的网友开发者。

在大部分的面试中，会在开场丢出几个CSS相关的问题来考察基础。

本文为大家带来CSS的一些技巧，满足实际开发中的大部分场景。

css实现动画

过渡动画

过渡：transition:属性（all）花费时间运动曲线何时开始。搭配hover使用。谁要发生动画效果就给谁加。

转换：transform:与过渡一起使用，达到动画效果。

translate:移动效果
rotate:旋转效果
scale:缩放

css 关键帧动画

animation:相比于过渡，动画可以实现更多的动态效果。

//定义动画
@keyframs 动画名{
    0%{//开始状态
        转换操作
    },
    ....//可以在中间添加任意多的关键帧没实现复杂的动画
    100%{//结束状态
        转换操作
    }
}
//使用动画
.类{
    animation:动画名 持续时间 运动曲线 何时开始 步长  播放次数 是否逆向。。。。
}

网页元素的显示与隐藏

通常有几种控制元素隐藏的方式

display:none;:会使元素从渲染树上消失，元素不再占有原来的位置，更不能触发绑定的事件。
visibility:hidden;:这种方法与 display:none; 不同的是，这种方式隐藏的元素不会空出原来位置，会继续占有位置。但不会触发绑定的事件。
opacity=0;:该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件。
left:-1000px哈哈1000px有点夸张，意思就是让元素离开页面的可视区域。这种方法不建议使用，笔者唯一一次使用是为了避开浏览器的表单自动填充功能，将一个输入框放到可视区域外。
height:0也可以使元素隐藏。

溢出文字省略号效果：

常见的手写题：

write-space:nowarp;
overflow:hidden;
text-overflow:ellipsis;

css 三角

当我们把 box 的宽高置为 0，再设置边框时就会形成四个三角形，为他们设置不同颜色可以看到四个三角形。

css三角

设置其中一个有颜色，另外三个透明就可以得到一个css三角

代码如下：

   div {
            height: 0;
            width: 0;
            border: 100px solid transparent;
            border-left-color: blue;
            /* border-top: 10px solid black;
            border-bottom: 10px solid green;
            border-right: 10px solid red; */
        }

在工作中，我又遇到了一种制作三角形的方法：利用线性渐变。

——方向左上角到右下角，颜色从透明到想要的颜色，位置在 50%就可以了。

利用这种方式，我们可以制作出颜色渐变的三角形。

响应式布局

1.媒体查询+rem

rem是基于根节点字体大小的单位，可以随根节点字体的大小而改变。

如 html 的 font-size 为 100px那么1rem=100px

那么，我们又是怎么获取所在屏幕的大小尺寸的呢？

我们用了一种媒体查询的方式，media-query 可以帮助我们获取到当前所在屏幕的大小。

@media screen and (max-width:800px){
    html{
        font-size:80px; !important
    }
}

这段代码的意思是，屏幕小于 800px 时，根节点字体大小为 80px。

利用媒体查询+rem 的方式的确可以实现响应式布局。

可与之相关的问题就是，响应式布局只能在一个区间段内定义根字体的大小，具有阶梯式的变化特点，并不是时时改变的。

vw 和 vh 代替 rem

由于 rem 阶梯性的弊端，vw 和 vh 带来了解决方案 vh 是 window.innerHeight 视口高度的 1/100。 vw 是 window.innerWeight 视口高度的 1/100。

BEM规范

传统的 CSS 经常由于作用域的问题导致类名冲突而影响样式，我们在使用 vue 时虽然有 scope 这样的属性避免作用域冲突，但是在大多数时候还是会出现命名不易读，冲突等一系列问题。

一种解决方式是加一串随机编码（哈希），但这种方式也存在一定问题。

另一种方式就是对 css 的命名作要求，按照统一的规范来开发。

BEM 是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（元素） Block 的后代，以及 Modifier（修饰）不同状态的修饰符。

Block__Element--Modifier

通过这种统一的命名方式就能避免 css 不可读，同时搭配 less，scss 也会更加方便开发。

当然，对于命名规范可以灵活编排，只要团队内达成共识就好了。

BEM规范也并非完全完美，如需要大面积改动时，会存在需要把所有类名重新设计的问题。

最后

如果你需要找工作，可以评论或私信我，助你上岸。

我的字节跳动内推码：NAN4PZA

Good Luck！

前端校招面经分享：关于CSS那些事（二）

CSS