面试题（一）

一、盒模型
1、什么是盒子模型？
        在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

2、盒子模型有两种。
（1）标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

（2）怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

（3）标准和怪异模型的转换
box-sizing:content-box; 标准模式的盒子模型标准
box-sizing:border-box; 怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

二、BFC
1、什么是BFC？
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

2、如何触发BFC？
    给盒子模型设置以下的属性:

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
3、BFC解决边距折叠问题
（1）父子关系边距问题

   父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，我们可以给父元素添加 overflow：hidden这样父元素就变为 BFC，不会随子元素产生外边距

 （2）兄弟之间的折叠

   同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

4、BFC原理
BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
BFC的区域不会与float重叠。
计算BFC的高度时，浮动元素也被计算在内。
 

三、清除浮动
    1、为什么要清除浮动？
      清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

    2、清除浮动的四种方法：
      1.额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
        优点： 通俗易懂，书写方便。（不推荐使用）
        缺点： 添加许多无意义的标签，结构化比较差。

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>
 
.clear{
        clear:both;
 }
      2.父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
      优点： 简单、代码少、浏览器支持好

      缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。         不能和position配合使用，因为超出的尺寸的会被隐藏。

.fahter{
    width: 200px;
    border: 1px solid yellow;
    overflow: hidden;
}
3.使用after伪元素清除浮动::after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1

.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
4.使用before和after双伪元素清除浮动:（常用推荐）
 
 .clearfix:after,.clearfix:before{
         content: "";
         display: block;
         clear: both;
 }
 

四、postiton定位的属性
    1.position：relative(相对定位)
      指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，   其他的元素位置不会受到影响。

     2.position：absolute(绝对定位)
       是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

       （1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

      （2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

     3.position: fixed(固定定位)
        fixed元素总是相对于body定位的。

     4.position: static
          static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

     5.inherit
        继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

     6.sticky (吸顶效果)
           设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是       top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据              设置的left、top等属性成固定位置的效果。

  五、元素的居中方式
       （1）子绝父相后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法
   

  .father:{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
    .son{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -100px;
     }
 （2）父向子绝，子元素所有定位为0，margin设置auto自适应。
       

 .father{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
    .son{
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         margin: auto;
       
     }
  （3）父元素设置成弹性盒，子元素横向居中，纵向居中
  

 .father{
         width: 400px;
         height: 400px;
         background: red;
         display: flex;
         justify-content: center;
         align-items: center;
    
     }
     .son{
         width: 200px;
         height: 200px;
         background: yellow；
     }
 

六、this指向

普通函数中调用，this指向window
对象方法中调用，this指向当前对象
call apply bind中调用， this指向被传入的对象
class中的方法中调用， this指向实例对象
箭头函数，this就是父级上下文中的this

七、flex布局
   Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

  1.1以下6个属性设置在容器上

  flex-direction ： 属性决定主轴的方向（即项目的排列方向） 有4个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

  flex-wrap ：换行  

 nowrap（默认）：不换行。
 wrap：换行，第一行在上方。
 wrap-reverse：换行，第一行在下方。

 flex-flow ：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row   nowrap。 
 flex-flow: <flex-direction> || <flex-wrap>;
 justify-content ：主轴上的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items ：定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：多轴对齐方式。如只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。
八、CSS Hack
什么是CSS Hack?
   一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式：
属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

（1）条件Hack
条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

（2）属性Hack
比如IE6能识别下划线“”和星号“”，
IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。

（3）选择符Hack
IE6能识别 *html .class{}，IE7能识别*+html .class{}

浏览器优先级别:
FF(FireFox火狐) <IE7<IE6,CSS hack

九、常见的块级/行内/空元素
行内元素有：span  a  b  i  img  input  select  strong
空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>
块级元素有：div  p  h1-h6  ul  table  form  ul  li  dl  dt  dd…
 

十、简述一下src与href的区别
（1）href
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

（2）src
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此

十一、link与@import的区别
（1）link属于html标签。@import在css中使用表示导入外部样式表；
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重；
（5）link 支持使用javascript改变样式 （document.styleSheets），后者不可

十二、HTML5和css3新特性
css3新特性
选择器

( 基本选择器 层级选择器 内容选择器 过滤选择器 属性过滤选择器 子元素过滤选择器 表单属性过滤选择器 )

背景和边框 ( background-size， border-radius，box-shadow ）

文本效果

2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)

h5新增特性：
语义化标签：header、footer、section、nav、aside、article

增强型表单：input 的多个 type (email date color search)

新增表单属性：placehoder、required、min 和 max

音频视频：audio、video

本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除