1.盒模型

MDN 盒模型

(1).什么是CSS 盒模型?

块级盒子(Block box)和内联盒子(inline box) 完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性,有一个标准的和替代(IE)的盒模型。

(2)块级盒子的组成

CSS中组成一个块级盒子需要:

  • Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height.
  • Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
  • Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

(3)标准盒模型

在标准模型中,如果你给盒设置 width 和 height,实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

margin 不计入实际大小 —— 当然,它会影响盒子在页面所占空间,但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

(4)替代(IE)盒模型

使用这个模型,所有宽度都是可见宽度,所以内容宽度是该宽度减去边框和填充部分。 默认浏览器会使用标准模型。如果需要使用替代模型,您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域,从而设定您想要的大小。codepen

2.BFC

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。使内外元素的隔离,定位不会互相影响。

  • 根元素
  • position: absolute/fixed
  • display: inline-block / table
  • float 元素
  • ovevflow !== visible

position值(5个):static | relative | absolute | sticky | fixed

应用:

  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖

3.层叠上下文

个人理解,元素渲染出来后层级(前后)顺序,参考z-index

触发条件

  • 根层叠上下文(html)
  • position
  • css3属性
  • flex
  • transform
  • opacity
  • filter
  • will-change
  • -webkit-overflow-scrolling

4.居中布局

(1)水平居中

  • 块级元素:margin:0 auto
  • 行内元素:text-align
  • absolute + transform
  • flex + justify-content: center 例子

(2)垂直居中

  • line-height:height
  • absolute + transform
  • flex + align-items: center
  • table

(3)水平垂直居中

  • absolute + transform
  • flex + justify-content + align-items

absolute + transform垂直居中原理:

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

实现原理:

  • 设置 .main 元素为相对定位 position: relative;,这样其子元素设置绝对定位时就相对它了。
  • 然后设置 .content 元素为绝对定位 position: absolute; 并设置 top: 50%;、left: 50%;,这样.content 元素的左上角就位于 .main 元素的中心了。
  • 最后设置 .content 元素 transform: translate(-50%, -50%); 将自身左移及上移宽高的一半,这样 .content 元素的中心处于 .main 元素的中心处,自然就实现了居中效果。
  • 这种方法的好处就是不需要固定 .content 元素的宽高。

5.选择器优先级

!important > 内联样式 > ID选择器 > class选择器 > 标签选择器 > 通配符选择器 > 继承 > 默认

6.link 与 @import 的区别

    • link功能较多,可以定义 RSS,定义 Rel 等作用,而@import只能用于加载 css
  • 当解析到link时,页面会同步加载所引的 css,而@import所引用的 css 会等到页面加载完才被加载
  • @import需要 IE5 以上才能使用
  • link可以使用 js 动态引入,@import不行

7.CSS动画

  • transition

  • animation / keyframes