前端工程师面试题详解(二)

1. GET - 从指定的资源请求数据。
2. POST - 向指定的资源提交要被处理的数据。
3. GET：不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内。
4. GET 和 POST 的底层也是 TCP/IP，GET/POST 都是 TCP 链接。
5. GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。
6. 对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200 （返回数据）； 而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。

• width = 内容（content）的宽度
• height = 内容（content）的高度
• 总宽度：width + margin（左右） + padding（左右） + border（左右）
• 总高度：height +margin（上下） + padding（上下） + border（上下）
• 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒模型（怪异盒模型）

• width = border + padding + 内容（content）三个部分的宽度
• height = border + padding + 内容（content）三个部分的高度
• 总宽度：width + margin（左右）（即 width 已经包含了 padding 和 border）
• 总高度：height + margin（上下）（即 height 已经包含了 padding 和 border）
• 设置 padding 、border 后，真正宽度或高度就会改变。

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

• 标准盒子模型的盒子宽度：左右 border+左右 padding+width
• IE 盒子模型的盒子宽度：width

在 CSS3 中引入了 box-sizing 属性：

• box-sizing:content-box;表示标准的盒子模型，
• box-sizing:border-box 表示的是 IE 盒子模型
• box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

 box-sizing 的语法和基本用处

• box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit
• content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
• border-box：为元素设定的宽度和高度决定了元素的边框盒。
• inherit：继承父元素的 box-sizing。

 画一条 0.5px 的线

<meta name="viewport" 
      content="width=device-width, 
      initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

transform: scale(0.5,0.5);

.container{ 
    width: 500px; 
    height: 400px; 
    border: 2px solid #379; 
    position: relative; 
}
.inner{ 
    width: 480px; 
    height: 380px; 
    background-color: #746; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -190px; /*height 的一半*/ 
    margin-left: -240px; /*width 的一半*/ 
}

补充：其实这里也可以将 marin-top 和 margin-left 负值替换成， transform：translateX(-50%)和 transform：translateY(-50%)

css:
.container{ 
    width: 300px; 
    height: 200px; 
    border: 3px solid #546461; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 
.inner{ 
    border: 3px solid #458761; 
    padding: 20px; 
}

 关于 JS 动画和 css3 动画的差异性

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

 双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠折叠的结果为：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

 position 属性 比较

 相对布局和绝对布局，position:relative 和 absolute。

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

 flex 布局

• flex-direction 属性决定主轴的方向；
• flex-wrap 属性定义，如果一条轴线排不下，如何换行；