熬夜吐血整理最全web前端面试题合辑（二）

CSS

介绍下标准的盒模型？低版本IE的盒子模型有什么不同？（必考）
1. 有两种，IE盒模型、W3C标准盒模型
2. 盒模型：内容（content）、填充（padding）、边界（margin）、边框（padding）
3. 区别：IE的content部分把border和padding计算了进去
CSS选择符有哪些？哪些属性可以继承？

id选择器（ # myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = “external”]）

伪类选择器（a:hover, li:nth-child）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

css定义的权重

标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

 /*权重为1*/
 div{
  }
  /*权重为10*/
  .class1{
  }
  /*权重为100*/
  #id1{
  }
  /*权重为100+1=101*/
  #id1 div{
  }
  /*权重为10+1=11*/
  .class1 div{
  }
  /*权重为10+10+1=21*/
  .class1 .class2 div{
  }/*如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现*/

CSS优先级算法如何计算？
1. 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
2. !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3. important 比内联优先级高
如何垂直水平居中？
- 已知宽高：
  - position=absolute,lrtb=0,margin=auto,包含块一定的是容器。（绝对定位盒模型的特性）
    
    left+right+w+p+m = 包含块的宽度
    top+bottom+h+p+m = 包含块的高度
  - position=absolute,lt=50%,marginT/L为负的自身的一半//包含块一定的是容器
- 未知宽高
  - position=absolute,lt=50%,transform:tranlate3d(-50%,-50%,0)//包含块一定得是容器
  - flex: display: flex; justify-content: center;align-items: center;
CSS3有哪些新特性？
- 新增各种css选择器
- 文本新增样式（怎么溢出显示省略号）
```
.ellips{
	white-space:no-wrap;/*不换行*/
	overflow:hidden; /*超过部分隐藏*/
	text-overflow:ellipsis; /*省略号显示溢出*/
	}
```
- 盒模型新增样式
  1. 阴影 box-shadow/text-shadow
  2. 倒影（webkit内核文字描边背景镂空）-webkit-box-reflect
- box-sizing
  - 值： content-box 默认值，标准盒子模型
  - 值： border-box：代表元素上设置的width和height表示的是border-box尺寸
- 圆角(border-radius)
- 多列布局（multi-column layout）
- 过渡(transition)、2D变换（transform 补间动画）、keyframe （关键帧动画）、animation(逐帧动画)
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间。

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

/*把上、左、右三条边隐藏掉（颜色设为 transparent）*/
#wrap .sjx {
  width: 0px;
  height: 0px;
  overflow: hidden;/*开启IE底下的BFC*/
  border-width: 40px;
  border-style: dashed  dashed dashed solid; /*由于transparent属性在IE6中不支持*/
  border-color: transparent transparent transparent #ccc;
 /*border-color: red green yellow #ccc;*/
}

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
- <div style="height:1px;overflow:hidden;background:red"></div>
像素问题（画一条0.5px的线）
- image背景：css3的background-image:linear-gradient，缺点就是：样式多，遇到圆角这个方案就杯剧了;
- 伪类缩放：现在用的比较多的方式之一 :after 1px然后transform: scale(0.5);基本能满足所有场景，对于圆角的处理也
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
- png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
- IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
- 首先，巧妙的使用“\9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
```
/*css*/
 .bb{
     background-color:red;/*所有识别*/
     background-color:#00deff\9; /*IE6、7、8识别*/
     +background-color:#a200ff;/*IE6、7识别*/
     _background-color:#1e0bd1;/*IE6识别*/
 }
```
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
- 行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小(font-size)设为0，就没有空格了。
为什么要初始化CSS样式? css reset 和 normalize.css 有什么区别
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性;
  normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。
请解释一下为什么需要清除浮动？清除浮动的方式
- 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
- 父级div定义height；
- 父级div 也一起浮动；
- 常规的使用一个class；
```
.clearfix::before, 
.clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
```
- SASS编译的时候，浮动元素的父级div定义伪类:after
```
&::after,
&::before{
 content: " ";
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
```
  解析原理：
  1) display:block 使生成的元素以块级元素显示,占满剩余空间;
  2) height:0 避免生成内容破坏原有布局的高度。
  3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
  4）通过 content:".“生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:”.",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
  5）zoom：1 触发IE hasLayout。
  通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
什么是外边距合并？
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
浏览器是怎样解析CSS选择器的？
- 样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。
  只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
在网页中的应该使用奇数还是偶数的字体？为什么呢？
- 应该用偶数的字体。
1. 比例关系
  
  相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。
2. 浏览器缘故
  
  其一是低版本ie6会把奇数字体强制转化为偶数，即13px渲染为14px
  其二是为了平分字体。偶数宽的汉字，如12px的汉字，去掉1像素的字体间距，填充了的字体像素宽度其实就是11px，这样的汉字中竖线左右是平分的，如“中”子，左右就是5px了。
3. 系统差别
  
  Windows自带的点阵宋体（中易宋体）从Vista开始只提供了12,14,16px这三个大小的点阵，而13,15,17px时用的是小一号的点阵（即每个字占的空间大了1px,但点阵没变），于是略显稀疏。
  而在Linux和其他手持设备上，奇数偶数的渲染效果其实相差不大
元素竖向的百分比设定是相对于容器的高度吗？

不是，而是宽度。对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
先看视觉稿，把可复用的组件找出来。然后把命名和结构确定下来。
全屏滚动的原理是什么？用到了CSS的那些属性？

原理：方法一是整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%
，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

overflow：hidden；transition：all 1000ms ease；

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
- （1）响应式网站设计（Responsive Web design）的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
- （2）基本原理：媒体查询 @media
- （3）兼容IE可以使用JS辅助一下来解决
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
- 视差滚动（Parallax Scrolling）就是这样的效果之一。这种技术通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
- 原理：
（1）CSS3实现
- 优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
（2）jquery实现
- 通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
- 优点：能兼容到各个版本的，效果可控性好
- 缺点：开发起来对制作者要求高
（3）插件实现方式
- 例如：parallax-scrolling，兼容性十分好
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
- 双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
- 比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上

使元素消失的方法
1. 隐藏&不占据空间&不会被渲染，辅助设备无法访问
  <script>标签隐藏 ----script.innerHTML,textarea.value
2. 满足条件1 情况下，资源有加载，DOM可以访问
  使用display:none
3. 满足条件1情况下，显隐时可以有transtion淡入淡出效果
  { position：absolute; visibility:hidden}
4. 不可见&不能点击&辅助设备无法访问，占据空间保留
  直接 visibility:hidden
5. 不可见&不能点击&占据空间保留，且键盘可以访问
  { position:relative; z-index:-1;}
6. 不可见&不占据空间，可点击，使用透明度：opacity
  .opacity {position: absolute;opacity: 0;filter: Alpha(opacity=0); }
7. 单纯希望元素看不见，占据空间，可点击可选择：
  .opacity {opacity: 0;filter: Alpha(opacity=0); }
display:none 与 visibility:hidden 的区别？
1. visibility的继承性
  - 父元素设置visibility:hidden,子元素也会看不见
  - 但是如果子元素设置了visibility：visible,则子元素又会显示出来
2. visibility与CSS计数器
  - visibility：hidden 不会影响计数器的计数
  - display:none 的列表完全不参与计数
3. visibility 与 transition
  - CSS3 transition 支持的 CSS 属性中有 visibility，但是并没有 display。
为什么css放在顶部而js写在后面
1. 浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了
2. 其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
3. js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验
关于CSS布局（三栏布局） 这一部分可以看我的另一篇笔记
- 圣杯布局
- 双飞翼布局
- 左边定宽，右边自适应

方案一：左边设置浮动，右边宽度设置100% .
left{float:left} .right:{width:100%}

方案二：左设置浮动，右用cacl去补宽度计算
.left{float:left} .right:{width:cacl(100vw-200px}

	3. 方案三：父容器设置display：flex right部分是设置flex：1(简写属性)

BFC是什么
一个块格式化上下文（block formatting context）由以下之一创建：
1. 根元素或其它包含它的元素
2. 浮动元素 (元素的 float 不是 none)
3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4. 内联块 (元素具有 display: inline-block)
5. 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7. 具有overflow 且值不是 visible 的块元素，//一般用overflow:hidden
8. display: flow-root 超级棒的，不会在创建bfc的同时触发其他副作用
9. column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

功能1：爸爸管儿子
用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output爸爸变严厉
或者建个墙（border）也可以得到效果的
功能2：兄弟之间划清界限
用 float + div 做左右自适应布局
http://js.jirengu.com/felikenuve/1/edit?html,css,output

参考文章在这里

熬夜吐血整理最全web前端面试题合辑（二）

猜你喜欢