对于面试题，第一时间想到其本质 --> 考点是什么
如何看待做不完的题海 -> 不变应万变（题可变，考点不变）
如何对待接下来的题目 -> 题目到知识点，再回到题目

CSS面试题相关

盒模型

标准盒模型(W3C)

width = content ;
box-sizing : content-box

IE盒模型

width = content + padding + border
Box-sizing: border-box

BFC的理解和应用

BFC， Block format context，块级格式化上下文一块独立的渲染区域，内部元素不会影响外部元素形成BFC的常见条件

float 不是none
position不是absolute 或 fixed
overflow不是visible
display 是 flex inline-block

应用：

清浮动

position有哪些定位，absolute和relative分别依据什么定位

static
relative
absolute
fixed
sticky 粘性定位

relative依据自身定位， absolute依据最近一层的定位元素定位

水平垂直居中的实现方式

flex
absolute + 负margin
absolute + transform
absolute + margin:auto + left/right/top/bottom:0
absolute + calc()
grid布局

line-height的继承问题

如果是纯数字值,则直接继承该值。
如果是百分比，会算完父级元素后，再继承

rem是什么，如何实现响应式

px是绝对长度单位，
em相对长度单位，相对于父元素
rem，相对长度单位，相对于根元素，常用于响应式
rem的弊端

CSS权重计算规则

！important 10000
行内(内联)样式如: style="" 1000
ID选择器 #id 100
Class、伪类、属性选择器 :hover [type="text"] 10
标签选择器、伪元素选择器 p、div :before; 0001
通用选择器*；子选择器 > ; 相邻选择器 + ；同胞选择器 ~ ；继承选择器 0000

计算优先级的前提是选择器作用于相同的元素
继承来的样式权重优先级最低，可视为0

html

<style type="text/css">
  #a {font-size:12px}    //100
  div p{ font-size:13px }  // 2
  div .c{ font-size:14px }  //12
  .a .b .c{ font-size:15px }  //30
  #b{ font-size:16px }  // 100   
</style>

<body>
  <div id="a" class="a">
    <div id="b" class="b">
      <p id="c" class="c">I’am here</p>  // 15px
    </div>
  </div>
</body>

// 从上到下权重 100 2 12 30 100； 
//  实际命中 #c .c 的 只有  div .c 和  .a .b .c ； 
// 所以命中15px;

什么是BFC？触发BFC的条件？

定义

BFC （Block Formatting Context，块级格式化上下文）决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。简言之，就是一个特殊的块，内部的元素和外部的元素不会相互影响。BFC内的盒子会在垂直方向上一个接一个地放置，垂直方向上也会发生外边距重叠。

触发条件

float属性（不为none时）
overflow属性（不为visible时） hidden；
position属性（为absolute 或 fixed）
display属性（为inline-block，flex, table-cell，table-caption，，inline-flex）

overflow:hidden`、`float:left/right`、`position:absolute`  display: flex;

应用场景

防止外边距重叠
可以包含浮动元素( 创建父级BFC) - 清除内部浮动
清除浮动的原理是两个div都位于同一个BFC区域中
计算 BFC 的高度时，浮动子元素也参与计算
自适应布局（BFC不与float box重叠）

外边距重叠（collapsing margins）/ margin坍塌问题

相邻的两个或多个普通流中的块元素，如果它们设置了外边距，那么在垂直方向上，外边距会发生重叠，以绝对值大的那个为最终结果显示在页面上，即最终的外边距等于发生层叠的外边距中绝对值较大者。
防止外边距重叠：创建BFC
行内元素、浮动元素、绝对定位元素之间的外边距都不会叠加

flex常用属性; flex: 0 1 auto;

容器属性 6个

flex-direction
- 决定主轴方向
- row | row-reverse | column | column-reverse;
flex-wrap
- 决定项目(item)如果一条轴线排不下，如何换行
- nowrap | wrap | wrap-reverse;
flex-flow
- flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- flex-flow:
justify-content
- 定义了项目在主轴上的对齐方式
- flex-start | flex-end | center | space-between | space-around
align-items
- 定义项目在交叉轴上如何对齐
- flex-start | flex-end | center | baseline | stretch（撑满）
align-content
- 定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
- flex-start | flex-end | center | space-between | space-around | stretch

项目属性 6个

order
- 定义项目的排列顺序。数值越小，排列越靠前，默认为0
- order:
flex-grow
- 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-grow: ; /_ default 0 _/
flex-shrink
- 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-shrink: ; /_ default 1 _/
flex-basis
- 在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto
- flex-basis: | auto; /_ default auto _/
- 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
flex
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认 0 1 auto; 后两个属性可选；
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
- align-self: auto | flex-start | flex-end | center | baseline | stretch;

水平垂直居中的方式？

html

<div class="outer">
    <div class="inner"></div>
</div>

1. flex

css

.outer{
    display: flex;
    justify-content: center;
    align-items: center
}

2. position+transform, inner高宽未知

css

.outer{
    position:relative;
}
.inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3. position + 负margin, inner宽高已知

css

.outer{
    position: relative;
}
.inner{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

4.设置各个方向的距离都是0，再将margin设为auto

前提：inner高宽已知

css

.outer {
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

清除浮动的方式？

清除浮动主要是为了防止父元素塌陷

方法一：clearfix伪类

html

<div class="outer clearfix">
    <div class="inner">inner</div>
</div>
<style>
.outer{
    background: blue;
}
.inner{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
</style>
解析原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

方法二：额外加一个div， clear:both

html

<div class="container">
    <div class="inner"></div>
    <div class="clear"></div>
</div>
.container{
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear{
    clear:both;
}

方法三：触发父盒子BFC, overflow:hidden;

html

<div class="outer">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}

如何用css实现一个三角形

1. 利用border属性

css

.triangle{
  width:0;
  height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;

}

2. 利用CSS3的clip-path属性

css

.triangle {
    width: 30px;
    height: 30px;
    background: red;
  // 将坐标(0,0),(0,30),(30,0)连成一个三角形
    clip-path: polygon(0px 0px, 0px 30px, 30px 0px); 
    transform: rotate(225deg); // 旋转225，变成下三角
}

伪类和伪元素的区别

伪类：表示被选择元素的某种状态，例如 :hover
伪元素：类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态。(但又不是真的增加一个节点，这也是被称为伪元素的原因)

关键区别

伪类是操作文档中已有的元素，而伪元素是创建了一个文档外的元素。

伪元素

伪类

link 与 @import 的区别

从属关系区别

@import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

加载顺序区别

加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。

CSS面试题相关 ​

盒模型 ​

标准盒模型(W3C) ​

IE盒模型 ​

BFC的理解和应用 ​

position有哪些定位，absolute和relative分别依据什么定位 ​

水平垂直居中的实现方式 ​

line-height的继承问题 ​

rem是什么，如何实现响应式 ​

CSS权重计算规则 ​

什么是BFC？ 触发BFC的条件？ ​

定义 ​

触发条件 ​

应用场景 ​

外边距重叠（collapsing margins）/ margin坍塌问题 ​

flex常用属性; flex: 0 1 auto; ​

容器属性 6个 ​

项目属性 6个 ​

水平垂直居中的方式？ ​

1. flex ​

2. position+transform, inner高宽未知 ​

3. position + 负margin, inner宽高已知 ​

4.设置各个方向的距离都是0，再将margin设为auto ​

清除浮动的方式？ ​

方法一：clearfix伪类 ​

方法二：额外加一个div， clear:both ​

方法三 ： 触发父盒子BFC, overflow:hidden; ​

如何用css实现一个三角形 ​

1. 利用border属性 ​

2. 利用CSS3的clip-path属性 ​

伪类和伪元素的区别 ​

关键区别 ​

伪元素 ​

伪类 ​

link 与 @import 的区别 ​

CSS面试题相关

盒模型

标准盒模型(W3C)

IE盒模型

BFC的理解和应用

position有哪些定位，absolute和relative分别依据什么定位

水平垂直居中的实现方式

line-height的继承问题

rem是什么，如何实现响应式

CSS权重计算规则

什么是BFC？触发BFC的条件？

定义

触发条件

应用场景

外边距重叠（collapsing margins）/ margin坍塌问题

flex常用属性; flex: 0 1 auto;

容器属性 6个

项目属性 6个

水平垂直居中的方式？

1. flex

2. position+transform, inner高宽未知

3. position + 负margin, inner宽高已知

4.设置各个方向的距离都是0，再将margin设为auto

清除浮动的方式？

方法一：clearfix伪类

方法二：额外加一个div， clear:both

方法三：触发父盒子BFC, overflow:hidden;

如何用css实现一个三角形

1. 利用border属性

2. 利用CSS3的clip-path属性

伪类和伪元素的区别

关键区别

伪元素

伪类

link 与 @import 的区别