CSS 盒模型

基本概念

标准模型

面试-CSS盒模型-标准模型.png
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE 模型

面试-CSS盒模型-IE盒子模型.png
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

CSS 如何设置这两种模型

  1. <!-- 标准模型 -->
  2. box-sizing:conent-box;
  3. <!-- IE盒模型 -->
  4. box-sizing:border-box;
  6. 浏览器默认方式为:box-sizing:conent-box

JS 如何设置获取盒子模型对应的宽和高

  1. dom.style.width/height
  3. dom.currentStyle.width/height  (ie支持)
  5. window.getComputedStyle(dom).width/height;
  7. dom.getBoundingClientRect().width/height;

实例题(根据盒模型解释边距重叠)

面试-CSS盒模型-边距重叠1.png
如上图:有两个元素其中子元素高度为 100px,子元素与父元素的上边距为 10px,求父元素的实际高度？
答案: 说 100px 对，说 110 也对，为什么捏？这个要看父元素的盒模型要怎么设置的

  1. <style>
  2.   html,
  3.   * {
  4.     padding: 0;
  5.     margin: 0;
  6.   }
  7.   #sec {
  8.     background: #f00;
  9.   }
  10.   .child {
  11.     height: 100px;
  12.     margin-top: 10px;
  13.     background: yellow;
  14.   }
  15. </style>
  16. <body>
  17.   <section id="sec">
  18.     <article class="child"></article>
  19.   </section>
  20. </body>

运行效果：
面试-CSS盒模型-运行1.png
上图证明 100px 是对的
元素加个 overflow:hidden
面试-CSS盒模型-运行2.png
你会发现这时高度为 110px, 这时大家可能会疑问,为什么给父级元素设置一个 overflow:hidden 以后，它的高度就成 110 呢，这块的基本原理是啥呢，咋就这样呢？说这个之前，先引用一个知识点：
上面代码是父子元素边距重叠，那么还有两种情况边距重叠就是，一种是兄弟元素，就是两个 div 挨着，每个都上边距或者下边距，那么重叠的原则就是取最大值。
来回答上面问题：给父级加了 overflow:hidden,其实就是给父级元素创建一个 BFC(块级格式化上下文)。

BFC

基本概念

Block Formatting Context, 块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规格来约束块级盒子的布局，且与区域外部无关。

BFC 的原理

  • BFC 这个元素的垂直的边距会发生重叠
  • BFC 的区域不会与浮动元素的 float 重叠
  • 独立的容器，内外元素互不影响
  • 计算 BFC 高度，浮动元素也参与计算

如何创建 BFC

  • float 不为 none 的时候
  • position 不为 static 或者 relative 的时候
  • display 与 table 相关的时候
  • overflow 为 auto, hidden 的时候

BFC 使用场景

  • BFC 垂直方向边距重叠

    1. <section id="margin">
    2. <style>
    3.   #margin {
    4.     background: pink;
    5.     overflow: hidden;
    6.   }
    7.   #margin > p {
    8.     margin: 5px auto 25px;
    9.     background: red;
    10.   }
    11. </style>
    12. <p>1</p>
    13. <div style="overflow:hidden">
    14.   <p>2</p>
    15. </div>
    16. <p>3</p>
    17. </section>

  • BFC 不与 float 重叠

    1. <section id="layout">
    2. <style media="screen">
    3.   #layout {
    4.     background: red;
    5.   }
    6.   #layout .left {
    7.     float: left;
    8.     width: 100px;
    9.     height: 100px;
    10.     background: pink;
    11.   }
    12.   #layout .right {
    13.     height: 110px;
    14.     background: #ccc;
    15.     overflow: auto;
    16.   }
    17. </style>
    18. <div class="left"></div>
    19. <div class="right"></div>
    20. </section>

  • BFC 子元素即使是 float 也会参与计算

    1. <section id="float">
    2. <style media="screen">
    3.   #float {
    4.     background: red;
    5.     overflow: auto;
    6.     /*float: left;*/
    7.   }
    8.   #float .float {
    9.     float: left;
    10.     font-size: 30px;
    11.   }
    12. </style>
    13. <div class="float">我是浮动元素</div>
    14. </section>

    link 标签和 import 标签的区别

    link 属于 html 标签，而@import 是 css 提供的
    页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
    link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
    link 方式样式的权重高于@import 的。

    选择器，优先级

    id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等

同一元素引用了多个样式时，排在后面的样式属性的优先级高；

样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；

标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；

带有!important 标记的样式属性的优先级最高；

样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式