Chendi Wu

Appearance

CSS 盒模型 ​

基本概念 ​

标准模型 ​

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

IE 模型 ​

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

CSS 如何设置这两种模型 ​

css
<!-- 标准模型 -->
box-sizing:conent-box;
<!-- IE盒模型 -->
box-sizing:border-box;

浏览器默认方式为:box-sizing:conent-box

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

javascript
dom.style.width / height

dom.currentStyle.width / height(ie支持)

window.getComputedStyle(dom).width / height

dom.getBoundingClientRect().width / height

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

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

javascript
<style>
  html,
  * {
    padding: 0;
    margin: 0;
  }
  #sec {
    background: #f00;
  }
  .child {
    height: 100px;
    margin-top: 10px;
    background: yellow;
  }
</style>
<body>
  <section id="sec">
    <article class="child"></article>
  </section>
</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 垂直方向边距重叠
html
<section id="margin">
  <style>
    #margin {
      background: pink;
      overflow: hidden;
    }
    #margin > p {
      margin: 5px auto 25px;
      background: red;
    }
  </style>
  <p>1</p>
  <div style="overflow:hidden">
    <p>2</p>
  </div>
  <p>3</p>
</section>
  • BFC 不与 float 重叠
html
<section id="layout">
  <style media="screen">
    #layout {
      background: red;
    }
    #layout .left {
      float: left;
      width: 100px;
      height: 100px;
      background: pink;
    }
    #layout .right {
      height: 110px;
      background: #ccc;
      overflow: auto;
    }
  </style>
  <div class="left"></div>
  <div class="right"></div>
</section>
  • BFC 子元素即使是 float 也会参与计算
html
<section id="float">
  <style media="screen">
    #float {
      background: red;
      overflow: auto;
      /*float: left;*/
    }
    #float .float {
      float: left;
      font-size: 30px;
    }
  </style>
  <div class="float">我是浮动元素</div>
</section>

link 标签和 import 标签的区别 ​

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

选择器，优先级 ​

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

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

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

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

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

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