前端基础面试知识点系列之二

1. 什么是盒子模型？

• 一个标签就是一个盒子，可以通过6大属性来设置这个盒子。
• 有margin，border,padding，widht，height，bg。这六个属性
• 标签分为：块标签与行内标签。对于块标签，6大属性都有作用。对于行内标签,widht，height不起作用，padding 和 margin在水平方向上有作用，在垂直方向上没有作用。
• margin的重叠问题：
  • 兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先。
    • 解决方式：
      • 方法1：给男的变成不男不女的
      • 方法2：浮动（浮动元素是不会塌陷的）
  • 父子之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠。
    • 解决方式：
      • 方法1：给父元素设置border-top或 border-bottom，可以设置边框透明（transparent）
      • 方法2：给父元素设置paddding-top
      • 方法3：将块标签变成行内标签

2. 如何计算盒子模型在网页上占据的大小？ 这种盒子模型有什么不好的地方？

1. 如何计算盒子模型在网页上占据的大小？

在网页上占据的宽度：左右的margin+左右的border+左右的padding+width 在网页上占据的高度：上下的margin+上下的border+上下的padding+height

示例：

如果一个div没有设置widht，它占父元素的100%。

假如我的父元素是960px。div也占 960px。

div的这个960是指在页面上占据的空间

960px = 左右的margin+左右的border+左右padding+width
       
那如果我把这个div又加了一个10px的边框。
那么这个div的内容宽度width = 960-20px = 940px 

2. 这种盒子模型有什么不好的地方？

如果一个男盒子没有设置宽度，它的宽度是父元素的100%，这里的100%是指这个盒子所占页面宽度。

如果又增加了这个盒子的margin,padding,border，那么这个盒子的内容宽度一定会减小，如果margin,padding,border不断地增加，盒子的内容宽度不断地被压缩，如果压缩到了极限，浏览器会强迫你元素的宽度增加。

所以默认情况下的盒子模型也有不足之处。

3. 知道什么是margin的重叠吗？

margin重叠的前提：块标签 、 在垂直方向

• 兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先
  • 解决重叠：
    • 方法1：给男的变成不男不女的
    • 方法2：浮动（浮动元素是不会塌陷的）
• 父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠
  • 解决重叠：
    • 方法1：给父元素设置border-top或 border-bottom，可以设置边框透明（transparent）
    • 方法2：给父元素设置paddding-top
    • 方法3：将块标签变成行内标签

4. 如何实现一个小三角

border:5px solid tranparent; border-top:5px solid red;