前端面试题整理-CSS

CSS

Box-sizing的值？

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

border-box：padding和border在定义的宽度内绘制
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单位

实现不使用 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:是为了适配不同手机设备像素比不同。

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

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

IE盒模型：给定width，padding和border在width内绘制，同border-box
CSS选择符有哪些？哪些属性可以继承？

id class 后代子元素伪类……

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

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

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

:nth-child(n)选择父元素第n个
position的值relative和absolute定位原点是？

relative:元素本身位置

absolute：最近一级position设置为absolute或relative的父元素的左上角
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

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

使用场景：居中对齐、自适应导航
用纯CSS创建一个三角形的原理是什么？

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

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

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

Flex：1(水平、垂直均平分,若flex设置为2，垂直依旧平齐)
一个满屏品字布局如何设计?

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

然后根据flex,float,absolute等方法布局
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用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等
absolute的containing block计算方式跟正常流有什么不同？

包含块：定位参考框

包含块计算方式：

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

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

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

详细介绍
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

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

在谷歌，collapse和使用hidden一样，在火狐\opera\ie11，table的行会消失，下一行补充到它的位置
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塌陷不出现
对BFC规范(块级格式化上下文：block formatting context)的理解？

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

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

float除了none以外的值，overflow除了visible以外的值，position为absolute, fixed，display为inline-block,flex的都能触发BFC
zoom:1的清楚浮动原理?

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

@media screen and (min-width: 400px) and (max-width: 700px) { … }
浏览器是怎样解析CSS选择器的？

按照从上到下，从右到左的顺序解析
元素竖向的百分比设定是相对于容器的高度吗？

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

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

Border-radius | transform相对自身宽度
全屏滚动的原理是什么？用到了CSS的那些属性？

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

Transition、Animation
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
```
兼容：引入html5shiv.js，css hack， js动态添加
视差滚动效果

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

利用perspective：定义 3D 元素距视图的距离
::before 和 :link中双冒号和单冒号有什么区别？

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

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

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

伪类的效果可以通过添加一个实际的类来达到，伪元素的效果需要添加一个实际的元素标签才能达到。
如何修改chrome记住密码后自动填充表单的黄色背景？

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

二、关闭浏览器自带填充表单功能
对line-height是如何理解的？

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

line-height指的是在同一个元素中，两个文本行基线间的距离
设置元素浮动后，该元素的display值是多少？

无论行内元素还是块元素，被设置浮动之后，display属性值都变为block。因为float非none会形成BFC
让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing: antialiased;

字体抗锯齿渲染：none、subpixel-antialiased、antlaliased
font-style属性可以让它赋值为“oblique” oblique是什么意思？

Italic是使用文字的斜体，oblique是使没有斜体属性的文字倾斜
position:fixed;在android下无效怎么处理？

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

1、当focus时，将fixed属性改为absolute，当blur时改回fixed属性。

2、在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果
如果需要手动写动画，你认为最小时间间隔是多久，为什么？

40ms。显示器频率为60hz,1/60=16.7ms刷新一次。然而人眼识别图像的速度是24帧/s，大约为40ms。
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
overflow: scroll时不能平滑滚动的问题怎么处理？

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

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

如果添加后不起作用，再添加overflow-y:scroll

当元素设置过position:absolute | relative后，再增加-webkit-overflow-scrolling:touch滑几次会卡住，给元素增加个z-index就可以了
有一个高度自适应的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
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

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

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

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

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

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。
style标签写在body后与body前有什么区别？

先渲染还是加载完DOM后再渲染。放在后面有可能发生FOUC
什么是CSS 预处理器 / 后处理器？

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

后处理器：对css加入扩展，增强css兼容性（增加各浏览器前缀）：postcss
rem布局的优缺点

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

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

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

posted @ 2018-08-23 15:21 寒筱洱阅读(121) 评论(0) 收藏举报

刷新页面返回顶部

寒筱洱

前端面试题整理-CSS

CSS

Box-sizing的值？

CSS长度单位？

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

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

CSS选择符有哪些？哪些属性可以继承？

CSS3新增伪类有那些？

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

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

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

css多列等高如何实现？

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

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

absolute的containing block计算方式跟正常流有什么不同？

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

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

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

zoom:1的清楚浮动原理?

移动端媒体查询

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

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

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

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

视差滚动效果

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

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

对line-height是如何理解的？

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

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

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

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

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

display:inline-block 什么时候会显示间隙？

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

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

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

什么是Cookie 隔离？

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

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

rem布局的优缺点

公告

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

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

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

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