# CSS Question

# 1、清除浮动

.clearfix:after{
    /*生成内容作为最后一个元素*/
    content: "";
    /*使生成的元素以块级元素显示，占满剩余空间*/
    display: block;
    /*避免生成内容破坏原有布局的高度*/
    height: 0;
    /*使生成的内容不可见，并允许可能被生成内容盖住内容可以进行点击和交互*/
    visibility: hidden;
    /*清除浮动元素对当前元素的影响*/
    clear: both;
}
.clearfix{
    /*用户兼容IE，触发IE hasLayout*/
    *zoom: 1;
}

# 2、Less/Sass/Scss的区别

Scss其实是Sass的改进版本

Scss是Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
Less环境较Sass简单

Sass的安装需要安装Ruby环境，Less基于JavaScript，需要引入Less.js来处理代码输出css
变量符不一样，Less是@，而Sass是$，而且变量的作用域也不一样

Sass没有局部变量，满足就近原则。Less中{}内定义的变量为局部变量。
Less没有输出设置，Sass提供4中输出选项
- 输出样式的风格可以有四种选择，默认为nested
- nested：嵌套缩进的css代码
- expanded：展开的多行css代码
- compact：简洁格式的css代码
- compressed：压缩后的css代码
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
Less与Sass处理机制不一样

Less是通过客户端处理的，Sass是通过服务端处理，相比较之下Less解析会比Sass慢一点
Sass和Less的工具库不同

Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap, Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写，不过Bootstrap4也开始用Sass编写了。

# 3、BFC及其应用

BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响，它属于定位方案的普通流。
触发条件：
- 根元素
- 浮动元素：float 除 none 以外的值（left、right）
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
作用：
- 阻止元素被浮动元素覆盖
- 一个正常文档流的块级元素可能被一个浮动元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position或者overflow值等方式触发BFC，以阻止被浮动盒子覆盖。
- 可以包含浮动元素（清除浮动）
- 通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。
- 阻止相邻元素的margin合并
- 属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

# 4、水平垂直居中

子绝父相 + transform

.parent {
    position: relative;
}

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

伸缩布局

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

# 5、css盒子模型

盒子模型包括元素的内容，边框（border），内边距（padding），外边距（margin）组成。
标准盒子模型大小 = width(content) + border + padding + margin
怪异盒子大小 = width(content + padding+ border) + margin