面试题(Html&CSS)

[Myoursky]

1. CSS盒模型

在文档流中，每个元素都被表示为一个矩形的盒子。CSS使用标准盒模型来描述这些盒子。
在标准盒模型中，盒子包含margin(外边距)，border(边框)，padding(内边框)，content(内容)组成。
box-sizing: content-box(默认值)时，边框的宽高即属性width和height设置的宽高。
box-sizing: border-box时，width = border + padding + 内容的 width，height = border + padding + 内容的 height。

2. margin叠加

在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。
我们可以注意定义中的几个关键字：毗邻、两个或多个、垂直方向和普通流。
示例

3. flex布局

博客1
博客2

4. target和currentTarget的区别

e.target: 指向触发事件监听的对象
e.currentTarget: 指向添加监听事件的对象

5. DOM事件流

事件流: 描述的就是从页面中接受事件的顺序。分有事件冒泡与事件捕获两种。
DOM事件流的三个阶段：

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

dom中addEventListener默认为事件冒泡。

事件捕获：

  <div id="elem1" class="elem">
    <div id="elem2" class="elem">
      <div id="elem3" class="elem"></div>
    </div>
  </div>
  <script>
    var elem1 = document.getElementById("elem1");
    var elem2 = document.getElementById("elem2");
    var elem3 = document.getElementById("elem3");
    elem1.addEventListener('click',function(e){
      console.log('elem1 click');
    }, true)
    elem2.addEventListener('click',function(e){
      console.log('elem2 click');
    }, true)
    elem3.addEventListener('click',function(e){
      console.log('elem3 click');
    }, true)
    document.addEventListener('click',function(e){
      console.log('document click');
    }, true)

输出:

document click
elem1 click
elem2 click
elem3 click

事件冒泡:

  <div id="elem1" class="elem">
    <div id="elem2" class="elem">
      <div id="elem3" class="elem"></div>
    </div>
  </div>
  <script>
    var elem1 = document.getElementById("elem1");
    var elem2 = document.getElementById("elem2");
    var elem3 = document.getElementById("elem3");
    elem1.addEventListener('click',function(e){
      console.log('elem1 click');
    }, false)
    elem2.addEventListener('click',function(e){
      console.log('elem2 click');
    }, false)
    elem3.addEventListener('click',function(e){
      console.log('elem3 click');
    }, false)
    document.addEventListener('click',function(e){
      console.log('document click');
    }, false)
  </script>

输出:

elem3 click
elem2 click
elem1 click
document click