前端面试题（三）（CSS篇）建议收藏，持续更新中...

CSS content属性特殊字符有哪些？

今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。

因为这些字符属于unicode字符集，所以，我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式；

还有一点需要注意的是，部分字符在不同浏览器中显示的效果不同，所以在使用的时候，需要自己在不同的浏览器中进行试验。在苹果和安卓等系统的智能设备下的识别度也比较差，所有希望慎用。

废话不多说上干货：

各种箭头
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
⇠ 8672 21E0
⇢ 8674 21E2
⇡ 8673 21E1
⇣ 8675 21E3
↞ 8606 219E
↠ 8608 21A0
↟ 8607 219F
↡ 8609 21A1
← 8592 2190
→ 8594 2192
↑ 8593 2191
↓ 8595 2193
↔ 8596 2194
↕ 8597 2195
⇄ 8644 21C4
⇅ 8645 21C5
↢ 8610 21A2
↣ 8611 21A3
⇞ 8670 21DE
⇟ 8671 21DF
↫ 8619 21AB
↬ 8620 21AC
⇜ 8668 21DC
⇝ 8669 21DD
↚ 8602 219A
↛ 8603 219B
↮ 8622 21AE
↭ 8621 21AD
形状
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
⇦ 8678 21E6
⇨ 8680 21E8
⇧ 8679 21E7
⇩ 8681 21E9
↷ 8631 21B7
↶ 8630 21B6
↻ 8635 21BB
↺ 8634 21BA
⟳ 10227 27F3
⟲ 10226 27F2
⟰ 10224 27F0
⟱ 10225 27F1
↵ 8629 21B5
↯ 8623 21AF
⇵ 8693 21F5
向右的箭头
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
➔ 10132 2794
➙ 10137 2799
➨ 10152 27A8
➲ 10162 27B2
➜ 10140 279C
➞ 10142 279E
➟ 10143 279F
➠ 10144 27A0
➤ 10148 27A4
➥ 10149 27A5
➦ 10150 27A6
➧ 10151 27A7
➵ 10165 27B5
➸ 10168 27B8
➼ 10172 27BC
➽ 10173 27BD
➺ 10170 27BA
➳ 10163 27B3
➾ 10174 27BE
基本形状
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
▲ 9650 25B2
► 9658 25BA
▼ 9660 25BC
◄ 9668 25C4
❤ 10084 2764
✈ 9992 2708
★ 9733 2605
✦ 10022 2726
☀ 9728 2600
◆ 9670 25C6
◈ 9672 25C8
▣ 9635 25A3
标点
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
« 171 00AB
» 187 00BB
‹ 139 008B
› 155 009B
“ 8220 201C
” 8221 201D
‘ 8216 2018
’ 8217 2019
• 8226 2022
◦ 9702 25E6
¡ 161 00A1
¿ 191 00BF
℅ 8453 2105
№ 8470 2116
& 38 0026
@ 64 0040
℞ 8478 211E
℃ 8451 2103
℉ 8457 2109
° 176 00B0
124 007C
¦ 166 00A6
– 8211 2013
— 8212 2014
… 8230 2026
¶ 182 00B6
∼ 8764 223C
≠ 8800 2260
法律符号
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
® 174 00AE
© 169 00A9
℗ 8471 2117
™ 153 0099
℠ 8480 2120
货币
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
$ 36 0024
¢ 162 00A2
£ 163 00A3
¤ 164 00A4
€ 8364 20AC
¥ 165 00A5
₱ 8369 20B1
₹ 8377 20B9
数学
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
½ 189 00BD
¼ 188 00BC
¾ 190 00BE
⅓ 8531 2153
⅔ 8532 2154
⅛ 8539 215B
⅜ 8540 215C
⅝ 8541 215D
‰ 8240 2030
% 37 0025
< 60 003C

62 003E
音乐符号
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
♩ 9833 2669
♪ 9834 266A
♫ 9835 266B
♬ 9836 266C
♭ 9837 266D
♯ 9839 266F
对号、错号
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
空格 160 00A0
☐ 9744 2610
☑ 9745 2611
☒ 9746 2612
✓ 10003 2713
✔ 10004 2714
✕ 10005 10005
✖ 10006 2716
✗ 10007 2717
✘ 10008 2718
十字
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
☨ 9768 2628
☩ 9769 2629
✝ 10013 271D
✞ 10014 271E
✟ 10015 271F
✠ 10016 2720
✚ 10010 271A
† 8224 2020
✢ 10018 2722
✤ 10020 2724
✣ 10019 2723
✥ 10021 2725
星星、星号、雪花
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
★ 9733 2605
✭ 10029 272D
✮ 10030 272E
☆ 9734 2606
✪ 10026 272A
✡ 10017 2721
✯ 10031 272F
✵ 10037 2735
✶ 10038 2736
✸ 10040 2738
✹ 10041 2739
✺ 10042 273A
✱ 10033 2731
✲ 10034 2732
✴ 10036 2734
✳ 10035 2733
✻ 10043 273B
✽ 10045 273D
❋ 10059 274B
❆ 10054 2746
❄ 10052 2744
❅ 10053 2745
杂项
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
☻ 9787 263B
☺ 9786 263A
☹ 9785 2639
✉ 9993 2709
☎ 9742 260E
☏ 9743 260F
✆ 9990 2706
� 65533 FFFD
☁ 9729 2601
☂ 9730 2602
❄ 10052 2744
☃ 9731 2603
❈ 10056 2748
✿ 10047 273F
❀ 10048 2740
❁ 10049 2741
☘ 9752 2618
❦ 10086 2766
☕ 9749 9749
❂ 10050 2742
☥ 9765 2625
☮ 9774 262E
☯ 9775 262F
☪ 9770 262A
☤ 9764 2624
✄ 9988 2704
✂ 9986 2702
☸ 9784 2638
⚓ 9875 2693
☣ 9763 2623
⚠ 9888 26A0
⚡ 9889 26A1
☢ 9762 2622
♻ 9851 267B
♿ 9855 267F
☠ 9760 2620
手型、铅笔、笔
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
☜ 9756 261C
☞ 9758 261E
☝ 9757 261D
☟ 9759 261F
✌ 9996 270C
✍ 9997 270D
✎ 9998 270E
✐ 10000 2710
✏ 9999 270F
✑ 10001 2711
✒ 10002 2712
天空、植物
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
☽ 9789 263D
☾ 9790 263E
♂ 9794 2642
♀ 9792 2640
☿ 9791 263F
♁ 9793 2641
♃ 9795 2643
♄ 9796 2644
♅ 9797 2645
♆ 9798 2646
♇ 9799 2647
星座
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
♈ 9800 2648
♉ 9801 2649
♊ 9802 264A
♋ 9803 264B
♌ 9804 264C
♍ 9805 264D
♎ 9806 264E
♏ 9807 264F
♑ 9809 2651
♒ 9810 2652
♓ 9811 2653
象棋，扑克牌
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
♚ 9818 265A
♛ 9819 265B
♜ 9820 265C
♝ 9821 265D
♞ 9822 265E
♟ 9823 265F
♔ 9812 2654
♕ 9813 2655
♖ 9814 2656
♗ 9815 2657
♘ 9816 2658
♙ 9817 2659
♠ 9824 2660
♣ 9827 2663
♥ 9829 2665
♦ 9830 2666
♤ 9828 2664
♧ 9831 2667
♡ 9825 2661
♢ 9826 2662
希腊字母
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ）和 JavaScript（在字符前加 \u ）
Α 913 0391
Β 914 0392
Γ 915 0393
Δ 916 0394
Ε 917 0395
Ζ 918 0396
Η 919 0397
Θ 920 0398
Ι 921 0399
Κ 922 039A
Λ 923 039B
Μ 924 039C
Ν 925 039D
Ξ 926 039E
Ο 927 039F
Π 928 03A0
Ρ 929 03A1
Σ 931 03A3
Τ 932 03A4
Υ 933 03A5
Φ 934 03A6
Χ 935 03A7
Ψ 936 03A8
Ω 937 03A9

写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法

flex布局；还有就是可以用定位也可以实现等等；
flex：父div：｛display：flex； justify-content: center;align-items: center;｝；
定位方法，相对定位在通过偏移元素实现水平垂直居中等等，我常用就是这两种，使用的时候注意兼容性

怎么给手持设备添加特殊样式？

-webkit-touch-callout:none ---------- 禁止长按弹出菜单

一个项目中有很多无用的css代码，怎么找到并清除这些无用的代码？

1.使用浏览器插件
2.使用PurifyCSS
3.chrome浏览器 F12审查元素的Audits，手动删

你们团队中css的class命名采用的是什么方式呢？下划线还是横线还是驼峰？

形式 .a .a-b不用驼峰和_，因为这两样都需要 shift 辅助输入, 驼峰越多，按下shift 键的次数就越多。

举例说明CSS特性检测的方式有哪些？

原生的 @supports 的性能肯定是最好的，而且无需引入外部 javascript ，首推这个，但是无奈兼容问题，目前来看不是最好的选择。Modernizr 功能强大，兼容性好，但是需要引入外部 javascript，多一个 http 请求，如果只是进行几个特性检测，有点杀鸡用牛刀的感觉。
针对需要的特性检测，使用 javascript 实现一个简单的函数，再把上面用到的方法封装一下：/**用于简单的 CSS 特性检测@param [String] property 需要检测的 CSS 属性名@param [String] value 样式的具体属性值@return [Boolean] 是否通过检查
*/
(function(property, value) {
// 用于测试的元素，隐藏在页面上
var ele = document.createElement('div');// 只有一个参数的情况
if(arguments.length === 1) {
if(property in ele.style) {
return true;
}
// 两个参数的情况
}else if(arguments.length === 2){
ele.style[property] = value;if(ele.style[property]) {return true;}
}
ele = null;
return false;
})("font-size",'10px');

如何使用css给一个正方形添加一条对角斜线？

 background:linear-gradient(45deg,transparent 49.5%,deeppink 49.5%,deeppink 50.5%,transparent 50.5%);

说说position:sticky有什么应用场景

吸顶效果

用css画出一把刻度尺

html结构：

<div class='ruler'><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div><div class='mm'></div></div><div class='cm'></div>
</div>
<div id="mentionme">by <a href="https://www.linkedin.com/in/artur-arsalanov-ab3a6895" target="_blank" title="Find me in  LinkedIn!">ArturArsalanov</a>
</div>

CSS样式：

.ruler {position: relative;width: 70%;margin: 20px auto;height: 14px;
}
.ruler .cm,
.ruler .mm {position: absolute;border-left: 1px solid #555;height: 14px;width: 10%;
}
.ruler .cm:after {position: absolute;bottom: -15px;font: 11px/1 sans-serif;
}
.ruler .mm {height: 5px;
}
.ruler .mm:nth-of-type(5) {height: 10px;
}
.ruler .cm:nth-of-type(1) {left: 0%;
}
.ruler .cm:nth-of-type(1):after {content: "0";
}
.ruler .cm:nth-of-type(2) {left: 10%;
}
.ruler .cm:nth-of-type(2):after {content: "1";
}
.ruler .cm:nth-of-type(3) {left: 20%;
}
.ruler .cm:nth-of-type(3):after {content: "2";
}
.ruler .cm:nth-of-type(4) {left: 30%;
}
.ruler .cm:nth-of-type(4):after {content: "3";
}
.ruler .cm:nth-of-type(5) {left: 40%;
}
.ruler .cm:nth-of-type(5):after {content: "4";
}
.ruler .cm:nth-of-type(6) {left: 50%;
}
.ruler .cm:nth-of-type(6):after {content: "5";
}
.ruler .cm:nth-of-type(7) {left: 60%;
}
.ruler .cm:nth-of-type(7):after {content: "6";
}
.ruler .cm:nth-of-type(8) {left: 70%;
}
.ruler .cm:nth-of-type(8):after {content: "7";
}
.ruler .cm:nth-of-type(9) {left: 80%;
}
.ruler .cm:nth-of-type(9):after {content: "8";
}
.ruler .cm:nth-of-type(10) {left: 90%;
}
.ruler .cm:nth-of-type(10):after {content: "9";
}
.ruler .cm:nth-of-type(11) {left: 100%;
}
.ruler .cm:nth-of-type(11):after {content: "10";
}
.ruler .mm:nth-of-type(1) {left: 10%;
}
.ruler .mm:nth-of-type(2) {left: 20%;
}
.ruler .mm:nth-of-type(3) {left: 30%;
}
.ruler .mm:nth-of-type(4) {left: 40%;
}
.ruler .mm:nth-of-type(5) {left: 50%;
}
.ruler .mm:nth-of-type(6) {left: 60%;
}
.ruler .mm:nth-of-type(7) {left: 70%;
}
.ruler .mm:nth-of-type(8) {left: 80%;
}
.ruler .mm:nth-of-type(9) {left: 90%;
}
.ruler .mm:nth-of-type(10) {left: 100%;
}
#mentionme{  text-align:center;margin-top:10%;
}

你会经常用到伪元素吗？一般都用在哪方面？

清浮动

说说sroll-snap-type属性的运用场景有哪些？相关联的属性还有哪些？

使用 sroll-snap-type 优化滚动
根据 CSS Scroll Snap Module Level 1 规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。

Tips：本文截的一些 Gif 图涉及容器滚动，效果不是很好，可以点进 Demo 里实际感受下。

sroll-snap-type
首先看看 sroll-snap-type 可能算得上是新的滚动规范里面最核心的一个属性样式。

scroll-snap-type：属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。

语法
{
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
}
举个例子，假设，我们希望一个横向可滚动容器，每次滚动之后，子元素最终的停留位置不是尴尬的被分割，而是完整的呈现在容器内，可以这样写：

<ul><li>1</li><li>2</li><li>3</li>
</ul>ul {scroll-snap-type: x mandatory;
}li {scroll-snap-align: center;
}

如果是 y 轴方向的滚动也是一样的，只需要简单改一下 scroll-snap-type：

ul {
scroll-snap-type: y mandatory;
}

scroll-snap-type 中的 mandatory 与 proximity
scroll-snap-type 中的另外一个重点就是 mandatory 与 proximity。

mandatory: 通常在 CSS 代码中我们都会使用这个，mandatory 的英文意思是强制性的，表示滚动结束后，滚动停止点一定会强制停在我们指定的地方

proximity: 英文意思是接近、临近、大约，在这个属性中的意思是滚动结束后，滚动停止点可能就是滚动停止的地方，也可能会再进行额外移动，停在我们指定的地方

也就是说，如上指定了 scroll-snap-type: y proximity 的滚动容器，如果不额外设置 scroll-snap-margin/scroll-snap-padding，是有可能停在下面这样尴尬的位置：

scroll-snap-type: both mandatory
当然，还有一种比较特殊的情况是，scroll-snap-type: both mandatory，表示横向与竖向的滚动，都会同时进行捕捉，也是可以的：

scroll-snap-align
使用 scroll-snap-align 可以简单的控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式。

其需要作用在父元素上，可选值有三个：

{
scroll-snap-align: start | center | end;
}
什么意思呢，看看示意图：

scroll-margin / scroll-padding

上述的 scroll-snap-align 很好用，可以控制滚动子元素与父容器的对齐方式。然而可选的值只有三个，有的时候我们希望进行一些更精细的控制时，可以使用 scroll-margin 或者 scroll-padding

其中：

scroll-padding 是作用于滚动父容器，类似于盒子的 padding
scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin
举个例子，在竖向滚动下，给滚动父容器添加一个 scroll-padding-top: 30px 等同于给每个子元素添加 ``scroll-margin-top: 30px`：

我们希望滚动子元素在 scroll-snap-align: start 的基础上，与容器顶部的距离为 30px：

使用css实现一个loading的效果

<div class="donut"></div>
@Keyframes donut-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.donut {display: inline-block;border: 4px solid rgba(0, 0, 0, 0.1);border-left-color: #59a782;border-radius: 50%;width: 30px;height: 30px;animation: donut-spin 1.2s linear infinite;
}

为什么说css的选择器是从右向左匹配？

从右往左匹配会首先排除很多错误的匹配，打个简单的比方，孩子只有一个父亲，但是父亲可以有很多个孩子，从孩子找父亲简单，从父亲找某个指定的孩子可能就会找到错误的孩子。当然，选择器也是得优化的，不然哪怕从右往左匹配也会有一些性能上的问题。

表列举一些你认为最“昂贵”的css属性并解释为什么

filter 吧，学过高斯模糊算法的表示头疼

你了解CSS Houdini吗？说说它的运用场景有哪些？

Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

css的负边距有哪些应用场景？

垂直水平居中
通过伪元素扩大元素覆盖范围

clear属性只对块级元素有效么？为何无法应用于行内元素？

block元素浮动之后已经脱离了文档流了，排列的顺序都不一样了，所以清除了之后有效果。
inline-block还是在文档流里面，加浮动不加浮动都没有什么作用的，所以清除也没有影响

你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？

tab-size 属性规定制表符（tab）字符的空格长度。在 HTML 中，制表符（tab）字符通常显示为一个单一的空格字符

如何让背景图片固定不随滚动条滚动

background-attachment:fixed

举例说明与打印有关的属性有哪些？

page
page-break-before
page-break-after
page-break-inside

请写出font属性的快捷写法

p {
font:italic bold 12px/20px arial,sans-serif;
}

使用css写一个垂直翻转图片的效果

transform: rotateX(180deg);   /* 垂直镜像翻转 */

css中的url()要不要加引号？说说你的理解

可以加，也可以不加。这个跟html标签的属性书写可以加引号也可以不加引号是一样的道理，当然如果属性中含有特殊字符比如空格则需要加空格，否则会引起浏览器解析错误。如果想养成良好的程序书写习惯，则最好加上引号，这是标准做法。但是从安全角度来讲是要加上的...
否则容易被xss
因为url里面加了引号的话意味着url里面的内容是字符串...
但是不加引号的话传过来的万一是 下面的这种格式的话：

如何使用css显示a链接的url？

.some-a-tag:before {content: attr(href);
}

如何使用伪元素实现增大点击热区来增加用户体验？

.extend-via-pseudo-elem {position: relative;
}.extend-via-pseudo-elem::before {content: '';position: absolute;top: -20px;right: -20px;bottom: -20px;left: -20px;
}

使用css实现气泡框的效果

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.longen{
width:300px;
height:100px;
border:5px solid #09F;
position:relative;
background-color:#FFF;
}
.longen:before,.longen:after{
content:"";display:block;
border-width:20px;
position:absolute; bottom:-40px;
left:100px;
border-style:solid dashed dashed;
border-color:#09F transparent transparent;
font-size:0;
line-height:0;
}
.longen:after{
bottom:-33px;
border-color:#FFF transparent transparent;
}
</style>
</head>
<body>
<div class="longen">
css3气泡框
</div></body>
</html>

:placeholder-shown和:focus-within这两个伪类你有使用过吗？说说看

:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内）
:placeholder-shown CSS 伪类 在 或 <textarea> 元素显示 placeholder text 时生效.

使用css实现霓虹灯效果

 <div class="neon">Good evening, and good night!</div>body {display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;background: black;}.neon {color: #cce7f8;font-size: 2.5rem;font-family: 'Pacifico', cursive;text-transform: uppercase;animation: shining 0.1s alternate infinite;}@keyframes shining {from {text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),0 0 54px rgba(15, 115, 223, 0.9);}to {text-shadow: 0 0 6px rgba(182, 211, 207, 1),0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),0 0 60px rgba(15, 115, 223, 1);}}

当拿到一个新的项目，让你对这个项目的css做下架构设计，你该如何下手？

公共变量（主题色/主要空隙/主要字号字体等）
编译器（scss/less/postcss/stylus）
自适应方案（栅格/rem/vw/pt）
目录约定（mixin/common/theme/module/response）
私有化方案（scoped/css module/css in js）

除了可以用js跟踪用户信息外，如果不用js，使用纯css怎么做呢？

可以利用 css 的伪类 :hover :active :focus 之类的监听用户行为，然后给指定的url 发送请求。#link:active::after {content:url('xxx/xxx?active');}

使用css写一个红绿灯交替的动画效果

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body {
margin: 0;
/* 绝对定位使height: 100%生效 /
position: absolute;
height: 100%;
width: 100%;
}
/ 背景图 使用margin auto实现垂直水平居中 /
.wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 500px;
height: 350px;
background: rgb(97, 170, 189);
}
/ 灯框架 /
.traffic-light {
/ 居中代码 /
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;/ 绘制图案 /
width: 300px;
height: 90px;
background: #282f2f;
border-radius: 50px;
box-shadow: 0 0 0 2px #eee inset;
}
.traffic-light::after {
/ 居中代码 /
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);content: '';
display: inline-block;
width: 70px;
height: 70px;
border-radius: 50%;animation: traffic-light 5s linear 0s infinite;
}@Keyframes traffic-light {
from {
background: transparent; / 黄灯 /box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 /
}
25% {
background: transparent; / 黄灯 /box-shadow:
-85px 0 0 0 rgb(247, 78, 26), / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 rgb(247, 78, 26), / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 /
}
50% {
background: rgb(231, 183, 78); / 黄灯 /box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 rgb(231, 183, 78), / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 /
}
75% {
background: transparent; / 黄灯 /box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 rgb(38, 175, 84), / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 rgb(38, 175, 84); / 绿灯光影 /
}
to {
background: transparent; / 黄灯 /box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 */
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="traffic-light"></div>
</div>
</body>
</html>

判断如下边框的颜色，并解释为什么[代码]？

<p style="color: red;border: 1px solid;">给p设置border，但不给它设置border-color</div>

red
当边框颜色未设置值时，边框颜色则和当前字体颜色一致

box-sizing的宽度包含了哪些？

这个得根据box-sizing来计算：1.box-sizing: content-box;
width = width + 2border + 2padding
2.box-sizing: border-box;
width = width
但是元素内部会被压缩，content = width - 2border - 2padding

给一个图片设置透明有哪些方式呢？

1.opacity : 0 -> 子元素会继承
2.外层用盒子包裹，设置其rgba(255,255,255,0)

不用换行的标签，怎么伪元素实现换行的效果？

使用\A 换行，并且指定white-space: pre保留换行效果.foo::after {content: '123\A 456';white-space: pre;
}

固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？

使用 object-fit ，用法类似background-size，可选的值：cover、contain、fill等

如何让表格单元格等宽显示

table-layout: fixed;
width: 100%;

H5如何禁止显示系统菜单？

touch-callout:none;
user-select:none;

用css画一个平行四边形

.parallelogram {margin: 30px;width: 200px;height: 100px;border: 1px solid slateblue;transform: skew(-20deg);
}
<div class="parallelogram"></div>

如何阻止:hover、:active等鼠标行为状态的触发？

css属性：pointer-events: none;应用
避免重复提交---按钮点击后 即增加该属性 使其不
链接不可跳转---指定a标签加上该属性
点击被上方元素覆盖的下方链接---上方元素添加该属性

假如css的分号写在声明块之外，将会发生什么呢？解释下原因

这样写第一条规则的分号会被放到第二条规则的句首解析，导致第二条解析报错，从而略过。<style>
p {color: blue}
;.p1 {color: red}
.p2 {color: green}
</style>

父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法

父元素塌陷父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。
可能出现的情况 即子元素脱标的情况浮动固定定位绝对定位解决方案父元素底部增加一行 <div style='clear:both;'></div>缺点:添加了无意义的空标签 违背了结构表现分离父元素一起浮动本质是一个将错就错的方法利用BFC来给父元素增加CSS如给父元素加上 overflow:auto; 或display:table-cell;或display:table-caption;等利用after伪元素 父元素增加after伪元素parent:after{content: ".";display: block;height: 0px;clear: both;visibility: hidden;}  更优雅的改进方案 ---常用.clearfix:after,.clearfix:before{content: " ";display: table; }  .clearfix:after{clear: both;}

使用css实现蒙版的效果

filter: blur(1px)

用css实现一个等腰三角形的小图标

   <style>.box{width: 0;height: 0;margin: 100px auto;border-width: 0px 200px 200px 200px;border-style: solid;border-color: transparent transparent red transparent;}</style>

你有用过animation-fill-mode属性吗？它有什么应用场景

动画播放完成之后的动作，比如可以定义动画播放完成之后回到初始状态

你用过outline属性吗？它有什么运用场景

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

width属性的min-content和max-content有什么作用

max-content 在一个父元素上设置该元素后，元素的宽度会以子元素内最长的一个为准，子元素表现得会好像设置了white-space:nowrap一样一行展示min-content 在一个父元素上设置该元素后，子元素会按照最短断行进行换行

举例说明with属性的fill-available有什么应用场景

一些 div 元素默认宽度 100% 父元素，这种充分利用可用空间的行为就称为 fill-available。

第举例说明background-repeat的新属性值：round和space的作用是什么？

space 背景图不会产生缩放，会被裁切
round 缩放背景图至容器大小（非等比例缩放）

使用css如何设置背景虚化？

filter: blur(5px);

举例说明BFC会与float元素相互覆盖吗？为什么？

BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

什么是逐帧动画？

（1）相关联的不同图像，即动画帧；（2）连续播放。

为什么float会导致父元素塌陷
“当元素设置浮动后，会自动脱离文档流”，
翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容
（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）

如何形成BFC？

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

translate3D有什么作用？

3d动画，启用GPU硬件加速

行内元素可以设置padding和margin吗？

行内元素的纵向padding和margin都是不考虑的，这是css规范定义的。 inline元素确实可以设置垂直方向的 padding 和 margin 值，但是 inline 元素的 margin 和 padding 的垂直方向上不产生边距效果，即不影响布局。

pseudo-class与pseudo-element有什么区别？

伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。

使用css如何拉伸字体？

letter-spacing，transform:scale

写出固定子容器在固定的父容器下水平垂直居中的布

1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;transform:translate3d(-50%,-50%,0).
2.父容器 display:flex; align-items:center;just-content:center.

在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行

.item-codes{width:800px;word-break: break-all;white-space: normal;}

怎样把单位cm转换成px呢（在打印时有时会用到）

1px所代表的长度=2.54cm/分辨率
1cm=分辨率/2.54

flex与其他有什么不同，用它有什么好处？

flex 从根本上不同于之前常用的借助 定位、浮动 的布局。从逻辑思路上来说，flex 布局具有宏观性，提供了一种对于页面中元素如何排布的框架，开发者不需要关注细节和进行额外的操作，就能使得一系列元素按约定的规则排列。而之前常用的借助 float 、marging、position 的布局，则更像是一种“技巧”，不是真正意义上的布局，它们的存在更大意义上关注于单个元素或者某种场景下的特性而非全局。

::first-letter有什么应用场景？

段落首字放大效果p:first-letter {font-size: 2em;
}<p>This is a test article. This is a test article.</p>
<p>这是一个测试</p>

举例说说你对white-space属性的理解

值    说明
normal  默认。空白会被浏览器忽略。
pre     空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。
inherit     规定应该从父元素继承 white-space 属性的值。

第432天为什么伪类的content不能被选中？

伪类不是真正的DOM,无DOM相关的属性和方法

如何取消页面中选中的文字？

user-select: none;
/* browser-specific values */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;

什么是关键帧动画？

表示关键状态的帧动画叫做关键帧动画。
所谓关键帧动画，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。

未完待续...

前端面试题（三）（CSS篇）建议收藏，持续更新中...相关推荐

前端面试题之CSS篇
前端面试题之CSS篇一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
面试题：高频前端面试题之CSS篇
目录一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和inline-blo ...
前端面试题---（css篇①）15道题
什么是css???????? CSS全称为Cascading Style Sheets,中文翻译为"层叠样式表",简称CSS样式表,是一种用来表现HTML或XML等文件式样的计算机 ...
前端面试题之计算机网络篇
前端面试题之计算机网络篇一.HTTP协议 1. GET和POST的请求的区别 2. POST和PUT请求的区别 3. 常见的HTTP请求头和响应头 4. HTTP状态码304是多好还是少好 5. 常 ...
前端面试题（html篇）
前端面试题(html篇) 转载于:https://www.cnblogs.com/mc67/p/5311613.html
2020年拼多多校招面试题及答案-最全最新-持续更新中（2）
大家好我是好好学习天天编程的天天一个整天在互联网上种菜和砍柴的程序员~ 2020年拼多多校招面试题及答案-最全最新-持续更新中(2) 2020年拼多多校招面试题一面 2020年拼多多校招面试题一面- ...
我学习 Java 的历程和体会（写给新手看，欢迎老司机批评和建议，持续更新中）
我学习 Java 的历程和体会(写给新手看,欢迎老司机批评和建议,持续更新中) 最初写这篇文章的时候,是在今年的 9 月中旬.今天,我想再写写这将近两个多月以来的感受. 在今年的 10 月我来到北京求 ...
2020年拼多多校招面试题及答案-最全最新-持续更新中
大家好我是好好学习天天编程的天天一个整天在互联网上种菜和砍柴的程序员 2020年拼多多校招面试题及答案-最全最新-持续更新中 2020年拼多多校招面试题一面-牛客网 2020年拼多多校招面试题二面- ...

前端面试题（三）（CSS篇）建议收藏，持续更新中...

前端面试题（三）（CSS篇）建议收藏，持续更新中...相关推荐

最新文章

热门文章