前端移动端面试题-前端面试题 2015

!important 声明的样式优先级最高，有冲突才会计算。 如果优先级相同，则选择最后出现的样式。 继承样式的优先级最低。

5 CSS3 中有哪些新的伪类？

p:first-of-type 选择属于其父元素的第一个元素

p:last-of-type 选择属于其父元素的最后一个元素

p:only-of-type 选择对其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选或复选框被选中。

6 如何让一个div居中？ 如何使浮动元素居中？ 如何居中绝对定位的div？

股利：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮动元素居中上、下、左、右：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

绝对定位左右中心：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有一种更优雅的居中方式是使用flexbox，我以后会做。

7 显示值有哪些？ 解释他们的作用？

内联（默认）——内联

无——隐藏

块——块显示

table--表格显示

list-item -- 项目列表

行内块

8 位置的价值？

静态（默认）：按照正常文档流排列；

Relative（相对定位）：不脱离文档流，通过top, bottom, left, right定位来引用自身的静态位置；

Absolute（绝对定位）：指的是最近的非静态父元素通过top,bottom,left,right来定位；

fixed（固定定位）：固定参照物为可见窗口。

9 CSS3有哪些新特性？

RGBA 和透明度 background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap (wrap for long inseparable words) word-wrap: break-word text-shadow: text -阴影：5px 5px 5px #FF0000； （水平阴影、垂直阴影、模糊距离、阴影颜色） font-face 属性：定义自己的字体圆角（border radius）：border-radius 属性用于创建圆角边框图片：border-image: url(border.png ) 30 30 round Box shadow: box-shadow: 10px 10px 5px #888888 媒体查询：定义两套css，浏览器尺寸变化时会使用不同的属性

10 请说明CSS3的flexbox（弹性盒布局模型），以及适用场景？

此布局模型的目的是提供一种更有效的方式来为容器中的项目布置、对齐和分配空间。 在传统的布局方式中，块布局是将块从上到下垂直排列； 而内联布局将它们水平排列。 Flexbox 布局没有这种固有的方向限制，可以由开发人员自由操作。

试用场景：Elastic布局适用于移动前端开发前端移动端面试题，在Android和ios上也完美支持。

11 纯CSS创建三角形的原理是什么？

首先需要将元素的宽高设置为0，然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 如何设计全屏字符布局？

第一个真实角色：

确定三个块的高度和宽度； 顶部块使用 margin: 0 auto； 居中； 底部的两个块使用 float 或 inline-block 没有换行； 使用边距调整位置以居中。

第二种全屏人物布局：

上层div设置为100%，下层div为50%宽，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

不同浏览器中tabs默认的margin和padding是不一样的。

*{margin:0;padding:0;}IE6 bilateral margin bug：当block属性标签浮动且有水平margin时，IE6显示的margin比设置的大。 破解：显示：内联； 将其转换为内联属性。 渐进式识别的方法是逐渐将部分排除在整体之外。 首先，巧妙地使用“9”标记将 IE 与所有情况区分开来。 然后，再次使用“+”将IE8和IE7、IE6分开，这样IE8就已经独立识别了。

{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

设置较小的高度标签（一般小于10px），在IE6、IE7中高度超过自己设置的高度。 Hack: 设置 overflow:hidden 用于超过高度的标签； 或将行高 line-height 设置为小于您设置的高度。 IE下可以使用获取常规属性的方法获取自定义属性，也可以使用getAttribute()获取自定义属性； 在 Firefox 下，只能使用 getAttribute() 来获取自定义属性。 解决方法：通过getAttribute()统一获取自定义属性。 默认情况下，Chrome中文界面会强制小于12px的文字以12px显示，可以通过添加CSS属性-webkit-text-size-adjust:none;来解决。 超链接被访问后，hover样式不会出现，被点击的超链接样式也不再有hover和active。 解决方案是更改 CSS 属性的顺序： LVHA（爱恨交加）：a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

由于浏览器兼容性问题，不同的浏览器对某些标签的默认值不同。 如果不对CSS进行初始化，浏览器之间的页面显示往往会存在差异。

15 absolute containing block计算方式和普通流量有什么区别？

无论属于哪种类型，都需要在其祖先元素中找到最近的位置值不为static的元素，然后判断：

如果这个元素是一个行内元素，那么包含块就是可以包含这个元素生成的第一个和最后一个行内框的padding box（除了margin和border之外的区域）的最小矩形； 否则，此祖先元素框组合的填充。

如果找不到，则它是初始包含块。

补充：

static（默认）/relative：简单的说就是它的父元素的内容框（也就是去掉padding部分）元素（html /正文）

16 CSS中的visibility属性有没有collapse属性值？ 不同浏览器有什么区别？

当元素的可见性属性设置为折叠值时，它的行为与普通元素的隐藏行为相同。

在 chrome 中，使用 collapse 值和使用 hidden 没有区别。 firefox、opera 和 IE，使用 collapse 值和使用 display: none 没有区别。

17 display: none 和 visibility: hidden 有什么区别？

display:none 不显示对应元素，文档布局中不再分配空间（回流+重绘）

visibility: hidden 隐藏对应元素，文档布局中仍保留原有空间（重绘）

18 position、display、overflow、float等特性叠加在一起会发生什么？

display 属性指定元素应生成的框类型； position 属性指定元素的定位类型； float 属性是一种布局方法，用于定义元素浮动的方向。

类似于优先级机制：position: absolute/fixed 具有最高优先级。 当它们存在时，float不起作用，需要调整显示值。 float 或 absolute 定位的元素只能是块元素或表格。

19 BFC规范的理解（块格式化上下文：block formatting context）？

BFC 指定内部 Block Box 的布局方式。

定位方案：

内部的 Boxes 将在垂直方向上一个接一个地放置。 Box在垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会重叠。 每个元素的边距框的左侧接触包含块的边框框的左侧。 BFC的区域不会和浮动框重叠。 BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素。 BFC计算高度时，浮动元素也会参与计算。

当满足以下条件之一时，可以触发 BFC

根元素，即htmlfloat的值不为none（默认）overflow的值为不可见（默认）display的值为inline-block、table-cell、table-captionposition为absolute或fixed

20 为什么会出现浮动，什么时候需要清除？ 清除浮动的方法？

浮动元素在碰到其包含边框或浮动元素的边框时停止。 由于浮动元素不在文档流中，文档流的块框表现得好像浮动框不存在一样。 浮动元素浮动在文档流中的块框上。

浮动问题：

父元素的高度无法拉伸，影响与父元素同级的元素。 与浮动元素处于同一级别的非浮动元素（内联元素）将跟随。 如果第一个元素不是浮动的，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方法：

父div定义最后一个浮动元素的高度后，添加一个空的div标签，并添加样式clear:both。 为包含浮动元素的父标签添加样式 overflow 到 hidden 或 auto。 父 div 定义缩放

21 上下边距重叠问题

在重合元素外包裹一层容器，触发容器生成BFC。

例子：

    


 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

22 设置元素浮动后，元素的显示值是多少？

自动变成display:block

23 你在移动端的布局中使用过媒体查询吗？

可以通过媒体查询为不同大小尺寸的媒体定义不同的css，以适应相应设备的显示。

CSS 内部：@media only screen and (max-device-width:480px) {/css style/}

24 使用 CSS 预处理器？

少了粗鲁

25 CSS优化和性能提升的方法有哪些？

避免过度约束 避免后代选择器 避免链式选择器 使用简洁的语法 避免不必要的名称空间 避免不必要的重复 最好使用语义表达的名称。 一个好的类名应该描述它是什么而不是避免它！ 重要的是，你可以选择其他选择器来尽可能简化规则，你可以合并不同类中重复的规则

26 浏览器如何解析CSS选择器？

CSS 选择器是从右到左解析的。 如果发现从左到右的匹配不符合规则，就需要回溯，这样会损失很多性能。 如果是从右向左匹配，先找到所有最右边的节点，对于每个节点，查找其父节点，直到找到满足条件的根元素或匹配规则，则本分支遍历结束。 两种匹配规则的性能差别很大，因为从右到左匹配在第一步中筛选掉了大量不合格的最右节点（叶子节点），而从左到右匹配规则的性能是全部浪费在失败的查找上。

CSS解析完成后前端移动端面试题，需要将解析结果连同DOM Tree的内容一起分析构建Render Tree，最终用于绘图。 在创建Render Tree（WebKit中的“Attachment”过程）时，浏览器必须根据CSS分析结果（Style Rules）来决定为DOM Tree中的每个元素生成什么样的Render Tree。

27 在网页中应该使用奇数字体还是偶数字体？ 为什么？

使用偶数字体。 偶数相对更容易与网页设计的其余部分形成比例关系。 Windows自带的点阵Arial（中意宋体）从Vista开始只提供12、14、16px三种点阵尺寸，而13、15、17px则使用更小的点。 （也就是每个词占用的空间增加了1px，但是点阵没有变化）所以略显稀疏。

28 margin和padding适用于哪些场景？

何时使用边距：

有必要在边框外添加一个空白区域。 背景颜色上下相连的两个框之间的空白不需要相互抵消。

何时使用填充：

有必要在边框内添加一个空格。 需要背景色上下相连的两个方框的空白处。 希望是两者之和。

兼容性问题：在IE5和IE6中，当为浮动框指定边距时，左边的边距可能会变成原来的两倍宽。 通过更改 padding 或指定 display: inline of the box 来解决。

29 元素的垂直百分比设置是相对于容器的高度？

当按百分比设置元素的宽度时，它是相对于父容器的宽度计算的。 但是，对于一些表示垂直距离的属性，比如 padding-top 、 padding-bottom 、 margin-top 、 margin-bottom 等，在设置它们为百分比时，也是基于父容器的宽度，不是身高。

30 全屏滚动的原理是什么？ 使用了 CSS 的哪些属性？

原理：有点类似于轮播，整体元素一直排列，假设有5个全屏页面显示，那么高度为500%，只显示100%，其余即可通过transform定位在y轴上，或者通过margin-top实现overflow: hidden； 过渡：所有 1000ms 缓和；

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

响应式网页设计（Responsive Web design）是一个可以兼容多种终端的网站，而不是为每个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸进行处理。

页面头部的元声明中必须有一个视口。

32 视差滚动效果？

视差滚动通过在网页向下滚动时控制背景比前景移动得慢来创建令人惊叹的 3D 效果。

CSS3 实现

优点：开发时间短，性能和开发效率更好，缺点是不能兼容低版本的浏览器jQuery实现

通过控制不同层的滚动速度，计算出每一层的时间，控制滚动效果。

优点：兼容各种版本，效果可控性好

缺点：开发对制作者插件实现方式要求高

例如：视差滚动，很好的兼容性

33 ::before和:after中双冒号和单冒号的区别是什么？解释一下这两个伪元素的作用

单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。 ::before 是在元素体内容之前定义的伪元素，存在一个子元素。 它不存在于dom中，只存在于页面中。

:before 和 :after 这两个伪元素是 CSS2.1 中新增的。 起初，伪元素的前缀使用单冒号语法，但随着Web的演进，在CSS3规范中，伪元素的语法被修改为使用双冒号，成为::before ::后

34 如何理解line-height？

行高是指一行文字的高度，具体指两行文字的基线之间的距离。 在 CSS 中，height 和 line-height 起作用。 height属性没有定义，最终表现必​​须是line-height。

单行文字垂直居中：将line-height值设置为与height一样大，可以实现单行文字垂直居中，也可以删除height。

多行文本垂直居中：需要设置display属性为inline-block。

35 如何让Chrome支持小于12px的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

36 如何用CSS使页面上的字体更清晰、更细？

-webkit-font-smoothing 在window系统下不起作用，但在IOS设备上有效 -webkit-font-smoothing: antialiased是最好的，平滑的灰度。

37位：固定； android下如何处理invalid？

38 如果需要手工编写动画，你认为最小的时间间隔是多长，为什么？

大多数显示器默认频率为60Hz，即每秒刷新60次，所以理论上最小间隔为1/60*1000ms = 16.7ms。

39 li与li之间看不见空格是什么原因？ 解决办法是什么？

line box的排列会受到中间空白（回车空格）等的影响，因为空格也是字符，这些空白也会被样式化占用空间，所以会出现空隙。 如果字符大小设置为 0，则不会有空格。 .

解决方案：

可以把所有的代码都写在一行浮li float: left use font-size: 0 in ul（谷歌不支持）； 你可以使用字母空间：-3px

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

有空格就会有空隙 解决：去除空格 解决margin为正数时解决：解决margin为负值时使用font-size 解决：font-size: 0, letter-spacing, word-spacing

41 有一个高度自适应的div，里面有两个div，一个高度100px，我想让另一个填充剩下的高度

使用 position: relative 为外部 div； 位置：绝对； 顶部：100px； 底部：0； 左：0 表示需要高度的自适应 div

42 解释png、jpg、gif 的图像格式以及何时使用它们。 你学过webp吗？

PNG是一种可移植网络图形（Portable Network Graphics）是一种无损数据压缩位图文件格式。 优点是：压缩比高，色彩好。 大多数地方都可以买到。 JPG 是一种用于照片的变形压缩方法。 这是一种破坏性压缩，可以很好地平滑色调和颜色的变化。 在 www 上，用于存储和传输照片的格式。 gif 是一种位图文件格式，可以以 8 位颜色再现真彩色图像。 可以实现动画效果。 webp格式是Google于2010年推出的一种图片格式，压缩率仅为jpg的2/3，体积比png小45%。 缺点是压缩时间较长，兼容性不好。 目前，Google 和 Opera 支持它。

43 写在body之后和body之前的style标签有什么区别？

页面从上到下加载，当然先加载样式。

写在body标签之后 由于浏览器是逐行解析HTML文档，当解析完写在末尾（outline或写在style标签中）的样式表时，浏览器会停止之前的渲染，等待加载解析style 表格重新渲染后，Windows下IE下可能出现FOUC现象（即样式失效导致的页面闪烁问题）

44 CSS属性overflow属性定义如何处理溢出元素内容区域的内容？

当参数为scroll时，会出现滚动条。

当参数为auto时，子元素内容大于父元素时会出现滚动条。

当参数可见时，溢出内容出现在父元素之外。

当参数被隐藏时，溢出被隐藏。

45 解释 CSS 精灵

将一个页面涉及的所有图片都包含在一张大图中，然后结合CSS background-image, background-repeat, background-position 进行背景定位。 使用CSS Sprites可以减少网页的http请求，从而大大提高页面的性能； CSS Sprites 可以减少图片的字节数。

46. HTML5中添加了哪些标签？

47.说出几种垂直居中和水平居中的方法？

display: flex; 
justify-content: center; 
align-items: center;

width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;