CSS

一、CSS盒模型

CSS盒模型分为：标准盒模型和怪异（IE）盒模型。

区别

标准盒模型元素宽度和高度只包含内容区的宽度和高度，怪异盒模型元素的宽度和高度包含内容区、border和padding。

二、CSS选择器的优先级

!important > 行内样式 > id选择器 > 类选择器、伪类选择器(:hover)、属性选择器（[type='text']）> 元素选择器、伪元素选择器 > 通配符选择器(*)

选择器的种类:

1. id选择器：#header
2. class选择器：.class{}
3. 伪类选择器：:hover、:selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}
4. 属性选择器：input[type="text"]
5. 元素选择器：div{}
6. 伪元素选择器：::after、::before等,例如：li::after
7. 子选择器：ul > li{}
8. 后代选择器：div p{}

三、CSS实现水平垂直居中

1. 行内元素：看他的父级元素是不是块级元素，是的话给父元素text-algin:center; 如果父元素不是块级元素，先把父元素设置为块级元素，再给父元素text-algin:center;
2. 块级元素：宽度固定，margin: 0 auto;
3. flex布局

.box { // 父盒子
    display: flex;
    justfiy-content: center;
    align-items: center;
}

4. 定位：父元素相对定位，子元素绝对定位，在使用 transform: translate(-50%, -50%);

.box { // 父盒子
    width: 500px;
    height: 500px;
    position: relative;
}
.item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

四、less和sass的区别

变量符号不一样，less使用@，sass使用$。

五、BFC

块级格式化上下文：浮动元素和其他元素相互交互的部分。

BFC特点：

1. BFC容器在计算高度的时候，浮动元素的高度也会计算在内
2. BFC容器内的子元素的margin-top不会和BFC父容器发生重叠
3. 遵照从上至下，从左到右的布局原则

如何触发一个元素形成BFC

• display: flex;
• overflow: hidden/auto/scroll;
• float: left/right;
• position: absolute/fixed;

高度塌陷：

• 高度塌陷：父元素没有给固定高度，默认高度是由子元素撑开，如果子元素设置了浮动，父元素高度会变成0。
• 原因：浮动元素不占据父容器文档流空间，所以父元素认为自己没有子元素，高度就会变成0。

如何解决高度塌陷

• 触发BFC：overflow: hidden; 将父元素变成BFC，使其可以包含浮动元素；

.parent {
  overflow: hidden;
}

• 使用clearfix：::after 伪元素占据一行，并执行 clear: both;，让父元素包裹浮动的子元素。

.parent::after {
  content: "";
  display: block;
  clear: both;
}

• 使用display:flex; 触发BFC：flex 触发 BFC，父元素自动包裹子元素的高度。

.parent {
  display: flex;
}