前端面试题整理-CSS

CSS

1. Box-sizing的值？

   content-box: padding和border在定义的宽度外绘制

   border-box：padding和border在定义的宽度内绘制

2. CSS长度单位？

   绝对长度px

   相对字体长度em，1em = font-size的大小，默认=16px=12pt=0.17in = 4.2mm =1pc（相对父元素）

   若是一个设置了font-size:1.1em的元素在另外一个设置了font-size:1.1em的元素里，而这个元素又在另外一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem

   相对根元素长度rem ，只相对于html的font-size作出改变，若是一个设置了font-size:1.1rem的元素在另外一个设置了font-size:1.1rem的元素里，而这个元素又在另外一个设置了font-size:1.1rem的元素里，那么最后计算的结果是1.1rem

   vh:相对视窗高度，均分为100单位

   vw:相对视窗宽度，均分为100单位

   vmax：相对于视窗高度或宽度中较大的那个，均分为100单位

   vmin：相对于视窗高度或宽度中较小的那个，均分为100单位

3. 实现不使用 border 画出1px高的线，在不一样浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

   .hairline:before{
     content:'';
     position:absolute;
     left:0;
     top:0;
     bottom:auto;
     right:auto;
     height:1px;
     width:100%;
     background-color:#333;
     display:block;
     z-index:0;
     html.pixel-ratio-2 & {
         .transform(scaleX(0.5));
     }
     html.pixel-ratio-3 & {
        .transform(scaleX(0.33));
     }
   }

   html.pixel-ratio-2:是为了适配不一样手机设备像素比不一样。

4. 介绍一下标准的CSS的盒子模型？

   标准盒模型：给定width，padding和border在width以外绘制，同content-box

   IE盒模型：给定width，padding和border在width内绘制，同border-box

5. CSS选择符有哪些？哪些属性能够继承？

   id class 后代 子元素 伪类……

   css有继承的属性：font及相关、文本系列text-align（不包括垂直文本、阴影、装饰等）、visibility、表格布局border-collapse（不是边框border）、列表list、光标cursor

6. CSS3新增伪类有那些？

   :last-of-type(最后一个元素，多是孙元素)

   :last-child（最后一个子元素）

   :nth-child(n)选择父元素第n个

7. position的值relative和absolute定位原点是？

   relative:元素自己位置

   absolute：最近一级position设置为absolute或relative的父元素的左上角

8. 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

   flex: 扩充比，缩小比，基础宽度

   使用场景：居中对齐、自适应导航

9. 用纯CSS建立一个三角形的原理是什么？

   元素是块级元素，设置元素的边框显示。不须要显示的边框用透明色。块元素按对角线分为4个三角，能够在border中进行设置各三角形。

   必需要设置四个方向的border才能以三角形显示，border:6px solid transparent要放在设置三角形颜色前。能够对四个角分别设置颜色，并根据border宽度不一样实现变形。width:0;height:0,如设置宽高会显示为梯形。大小=宽高+border宽度。

10. css多列等高如何实现？

    Padding补偿法：给父元素设置overflow:hidden，再给子元素设置足够大的padding-bottom，再将margin-bottom设置为padding-bottom的负值。

    Flex：1(水平、垂直均平分,若flex设置为2，垂直依旧平齐)

11. 一个满屏品字布局 如何设计?

    根据html, body:100%设置高度。如不写html,则高度为0

    而后根据flex,float,absolute等方法布局

12. 常常遇到的浏览器的兼容性有哪些？缘由，解决方法是什么，经常使用hack的技巧 ？

    （all）浏览器默认margin、padding等不一样：css reset

    （ie）Ie8不支持opacity：添加滤镜alpha，Filter:alpha(opacity=80);

    （Firefox）firefox点击连接出现虚线框：给a标签设置outline属性，a{outline:none;} a:focus{outline:none;}

    （ie）A标签嵌套的img在ie下会带有边框： a img{border:none}

    （ie）min-height不兼容：{min-height:200px;height:auto !important;height:200px;overflow:visible;}

    （ie）ie下event有x,y属性没有pageX,pageY属性，firefox有pageX,pageY没有x,y属性：event.y?event.y:event.pageY

    （chrome）Chrome中文最小为12px： -webkt-text-size-adjust:none;

    （all）超连接被点击后样式不具备hover 和active: link visited hover. active

    （all）图片默认间距,几个img排列时会有默认间距：img{float:left}

    （ie）设置较小高度时比设置的高度高：{overflow:hidden; line-height:比高度小}

    Css hack：

    _：ie6及如下

    *：ie7及如下

    \9:ie6+

    \0：ie8+和opera15如下

    -moz- ：firefox

    -webkit-:safari, chrome

    -o-:opera

    -ms-:ie

    主要须要添加浏览器前缀的属性：@keyframes, 移动和变换，动画，border-radius, box-shadow, flex等

13. absolute的containing block计算方式跟正常流有什么不一样？

    包含块：定位参考框

    包含块计算方式：

    （1）根元素所在包含块叫初始包含块。若是没有position属性，包含块为父级块元素的内容框建立

    （2）position属性为fixed，包含块为视口建立

    （3）position属性为absolute，若是拥有position属性祖先元素为行内元素，包含块为行内元素第一行、最后一行的框（根据文字方向改变）。若是非行内元素，包含块为祖先的padding建立。

    详细介绍

14. CSS里的visibility属性有个collapse属性值是干吗用的？在不一样浏览器下之后什么区别？

    对通常的元素，跟visibility:hidden同样，当在表格元素中使用时，能够删除一行或者一列，但不影响表格布局，与display:none同样。

    在谷歌，collapse和使用hidden同样，在火狐\opera\ie11，table的行会消失，下一行补充到它的位置

15. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    若是display:none，position和float不起做用

    position:absolute或fixed，float不起做用

    float不是none，float不起做用

    设置了float、position:absolute、display:inline-block,margin塌陷不出现

    overflow:hidden，margin塌陷不出现

16. 对BFC规范(块级格式化上下文：block formatting context)的理解？

    是个独立的盒子，这个独立盒子里的布局不受外部影响,固然它也不会影响到外面的元素。

    在BFC内，box从顶部开始，垂直方向一个一个放置，并与盒子左边平齐，会发生margin塌陷。计算BFC高度时，浮动元素也参与计算。

    float除了none之外的值，overflow除了visible之外的值，position为absolute, fixed，display为inline-block,flex的都能触发BFC

17. zoom:1的清楚浮动原理?

    zoom设置或检索对象的缩放比例，当设置zoom后，所设置的元素会扩大或缩小，高度宽度会从新计算。一旦改变zoom会从新渲染，解决ie下子元素浮动时父元素不自动扩大的问题。

18. 移动端媒体查询

    @media screen and (min-width: 400px) and (max-width: 700px) { … }

19. 浏览器是怎样解析CSS选择器的？

    按照从上到下，从右到左的顺序解析

20. 元素竖向的百分比设定是相对于容器的高度吗？

    Width | left | right相对父级元素宽度

    height | top | bottom相对父级元素高度

    Border-radius | transform相对自身宽度

21. 全屏滚动的原理是什么？用到了CSS的那些属性？

    所谓全屏滚动，就是网页的一个模块占据一屏的宽高，多个模块上下拼接在一块儿，当滑动鼠标滚轮，或点击导航按钮时，能够平滑到对应的页面

    Transition、Animation

22. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

    响应式网页设计就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。

    响应式设计的基本原理是经过媒体查询检测不一样的设备屏幕尺寸作处理。页面头部必须有meta声明viewport：

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

    兼容：引入html5shiv.js，css hack， js动态添加

23. 视差滚动效果

    视差滚动：让多层背景以不一样的速度移动，造成立体的运动效果

    利用perspective：定义 3D 元素距视图的距离

24. ::before 和 :link中双冒号和单冒号 有什么区别？

    单冒号用于css3伪类，双冒号用于css3伪元素

    伪类：first-child、link、hover 、lang

    伪元素：first-letter、first-line、before、after

    伪类的效果能够经过添加一个实际的类来达到，伪元素的效果须要添加一个实际的元素标签才能达到。

25. 如何修改chrome记住密码后自动填充表单的黄色背景 ？

    1、打补丁：覆盖webkit-autofill的样式

    2、关闭浏览器自带填充表单功能

26. 对line-height是如何理解的？

    撑开父级元素高度、垂直居中文本和图片、撑开父级元素高度比height效果好，由于不产生ie的haslayout属性。只影响行内元素，不能直接应用于块级元素，具备可继承性。

    line-height指的是在同一个元素中，两个文本行基线间的距离

27. 设置元素浮动后，该元素的display值是多少？

    不管行内元素仍是块元素，被设置浮动以后，display属性值都变为block。由于float非none会造成BFC

28. 让页面里的字体变清晰，变细用CSS怎么作？

    -webkit-font-smoothing: antialiased;

    字体抗锯齿渲染：none、subpixel-antialiased、antlaliased

29. font-style属性可让它赋值为“oblique” oblique是什么意思？

    Italic是使用文字的斜体，oblique是使没有斜体属性的文字倾斜

30. position:fixed;在android下无效怎么处理？

    无效为显示输入框时，底部栏会随输入框发生变化。

    一、当focus时，将fixed属性改成absolute，当blur时改回fixed属性。

    二、在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就能够实现效果

31. 若是须要手动写动画，你认为最小时间间隔是多久，为何？

    40ms。显示器频率为60hz,1/60=16.7ms刷新一次。然而人眼识别图像的速度是24帧/s，大约为40ms。

32. display:inline-block 何时会显示间隙？

    元素间留白间距出现的缘由就是标签段之间的空格，所以，去掉HTML中的空格，天然间距就木有了。

    或使用margin负值抵消，大小根据font-size和字体查询

    父元素font-size设为0，给子元素单独设置font-size(chrome须要设置webkit-text-size-adjust)

    使用letter-spacing:-3px或word-spacing:-6px

    只给最后一个元素添加闭合标签，以兼容ie6\7

33. overflow: scroll时不能平滑滚动的问题怎么处理？

    由于没有提供原生方式支持在一个固定高度的容器内滚动内容。

    -webkit-overflow-scrolling: touch;开启硬件加速

    若是添加后不起做用，再添加overflow-y:scroll

    当元素设置过position:absolute | relative后，再增长-webkit-overflow-scrolling:touch滑几回会卡住，给元素增长个z-index就能够了

34. 有一个高度自适应的div，里面有两个div，一个高度100px，但愿另外一个填满剩下的高度。

    （1）box-sizing：外层设置padding:100px 0 0;而后第一个div margin-top:-100px;

    （2）css3 calc()计算

    （3）外层给定position,第二个div设置position:absolute; top:100px;left:0;height:100%

    （4）flex

35. png、jpg、gif 这些图片格式解释一下，分别何时用。有没有了解过webp？

    gif图形交换格式，索引颜色格式，颜色少的状况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色

    jpg支持上百万种颜色，有损压缩，压缩比可达180：1，并且质量受损不明显，不支持图形渐进与背景透明，不支持动画

    png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。

    webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+

36. 什么是Cookie 隔离？

    若是静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，很是浪费流量，因此不如隔离开。

    由于cookie有域的限制，所以不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样能够下降请求头的大小，下降请求时间，从而达到下降总体请求延时的目的。

    同时这种方式不会将cookie传入Web Server，也减小了Web Server对cookie的处理分析环节，提升了webserver的http请求的解析速度。

37. style标签写在body后与body前有什么区别？

    先渲染仍是加载完DOM后再渲染。放在后面有可能发生FOUC

38. 什么是CSS 预处理器 / 后处理器？

    预处理器：编译css，使用变量：less sass

    后处理器：对css加入扩展，加强css兼容性（增长各浏览器前缀）：postcss

39. rem布局的优缺点

    Rem布局：把屏幕宽等分为20份，每份1rem。将rem值赋给根元素font-size

    优：自适应布局，宽高比不变

    缺：不能固定元素间的间距。