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;
  5. 浏览器默认方式为:box-sizing:conent-box

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

  1. dom.style.width/height
  2. dom.currentStyle.width/height (ie支持)
  3. window.getComputedStyle(dom).width/height;
  4. 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 标记的样式属性的优先级最高;

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