有句古话说得好，面试造火箭，工作拧螺丝。经历过职场的小伙伴都清楚，对于一般的工作需求，用不到太过高深的技术，但是，往往面试过程中，会进行所谓深层次的技术交流，所以，跳槽，回顾面试题，这大概是每位小伙伴都要做的事情，下面，小编在这里给大家总结一些常见的企业级面试题，如有bug，请赐教。

1、如何实现0.5px边框线

这是考察小伙伴对css的掌握深度，心细的小伙伴去试一下就会发现，我们设置0.5像素边框由于兼容性问题不会生效，跟设置1px没有区别，这也是出现频率比较高的一题，话不多说直接提供两个兼容性比较高的方式。

1、使用2D转换中的缩放：transform: scale(0.5);

注：即使使用缩放，也不能直接操作原来的盒子，要重新去定义一个盒子，给新盒子设置边框缩放

举例：

2、通过css3渐变属性

举例：

当然小伙伴们也可以根据自己的想法去调整代码结构，灵活变通。

2、opacity:0; visibility:hidden; display:none;有什么区别

3、标准盒模型和怪异盒模型(ie盒模型)有什么区别

4、transform会改变固定定位的显示效果

5、::before 和 :after中双冒号和单冒号有什么区别？

6、px、rpx、em、rem 、vw/vh、百分比的区别？

7、CSS3 transiton过渡不支持CSS3 渐变解决办法

对于之前的开发，我们可以使用图片的方式来代替颜色渐变，但是后期发现，该方法可拓展性差，还影响性能。所以css3引进了线性渐变的方式，书写渐变色。

语法：

background-image: linear-gradient(red,blue);   

新属性，过渡不支持也正常，如果非要实现颜色渐变过渡，也可以借助一下别的手法，看代码。

 注意本质上并不是过渡的渐变，而是过渡的背景图尺寸，我们先把背景图尺寸设置为200%，这样只看到一个颜色，当然可以根据盒子尺寸，继续增加背景图尺寸，最后滑过的时候，让背景图的尺寸变成宽度100%

8、如何给一个输入框添加放大镜作为提示文本

当然，很多移动端的收入框，都仅仅只是展示效果，点击搜索的时候会自动跳转带搜索页面，但也保不准会有个别情景需要直接在首页上展示的，上操作。

我们这一块的方式就是使用传统的阿里图标字体库。
使用unicode方式引入图标，注意，一定要添加类名 iconfont类名 <input type="text" placeholder="&#xe623; 请输入目的地" class="iconfont">

9、flex:1 1 0和flex:1 1 auto有什么区别？

首先我们要知道flex是三个属性的属性，即：flex-grow，flex-shrink和flex-basis的缩写形式。
默认值是 flex:0 1 auto;
首先要解析第一个：flex:1 1 0,可放大，可缩小，宽度或者高度为0，
其次要解析第二个：flex:1 1 auto,可放大，可缩小，宽度或者高度跟随我们自己设置的宽高，会被内容撑开，凸显自动的含义，

如图一：3后面还有一点空间，给3设置flex:1 1 0; 要注意此时主轴是自左而右的，所以3是没有宽度，但是有内容，所以是会被内容撑开一点空间，此时效果如图二，4会上去，占用空间，3有多少空间，就要看横向父元素还剩下多少空间，现在4的空间是200px全部展示，3的空间是50px,如果给4设置宽度为250px,那么4就不会上到第一行，因为放不下。如图三，剩下的空间都是3的。

回到最初状态

如图一：3后面还有一点空间，给3设置flex:1 1 auto; 要注意此时主轴是自左而右的。效果图直接如图三所示，3的基础宽度是200px,所以剩余空间都是3的。但是要注意拉伸后的空间并不是固定的，内容增加还是会撑开元素。

10、元素水平垂直居中的方式

这基本上是必问的一道题目，这里也给大家总结一下，最起码要掌握其中的三种方式。

以上七中居中方式，足够应付面试，可以针对性记忆。

11、单选选中添加文本

实现如上效果：

主要是考察到伪元素及伪类选择器的使用。
使用:checked{}选择器，匹配到被勾选的单选使用::after{}选择器，在被选元素内容最后添加内容