前端知识总结（二）--CSS相关

一、两种CSS盒模型？

在使用CSS进行布局和设计时，全部的HTML元素均可以看做一个盒子模型，包括外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。以下图

• 标准盒模型（box-sizing: content-box）与怪异（IE）盒模型（box-sizing: border-box）的区别：前者content的宽度/高度不变，后者的content的宽度/高度把padding和 border部分也计算进去。

二、水平居中的方法？

• 元素为行内元素，设置父元素text-align: center
• 若是元素宽度固定，能够设置左右margin: 0 auto;
• 若是元素为绝对定位，设置父元素position: relative，元素设left: 0；right: 0；margin: auto;
• 使用flex-box布局，指定justify-content: center；
• display设置为tabel-ceil；

三、垂直居中的方法？

• 使用display: flex布局，用align-item: center实现；
• 绝对定位中设置top: 0和bottom: 0，margin: 0 auto实现；
• 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值；
• 文本垂直居中设置line-height为height值。

四、flex布局的用法和经常使用属性？

flex布局即弹性布局，能够经过display: flex来设置一个弹性容器，容器内的子元素会根据设置的属性进行排列；

经常使用的属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

详见www.runoob.com/w3cnote/fle…

五、BFC规范？

块格式化上下文(Block Formatting Context，BFC)是Web页面中盒模型布局的CSS渲染模式。它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互做用，主要体如今浮动清除、浮动定位和阻止父子元素的margin折叠。

建立规则：

• 根元素

• 浮动元素（float不取值为none）

• 绝对定位元素（position取值为absolute或fixed）

• display取值为inline-block、table-cell、table-caption、flex、inline-flex之一的元素

• overflow不取值为visible的元素

六、清除浮动的方法

经常使用的方法有:

• overflow: hidden或者overflow: auto;
• 在浮动元素以后添加一个空元素如<div class="clear"></div>，经过CSS赋予clear: both；
• 给浮动元素的容器添加一个clearfix的class，而后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清除浮动。

总结：要么使用clear属性，要么触发浮动元素父元素的BFC，使父元素能够包含浮动元素。

七、CSS优先级？

• 优先级就近原则，同权重状况下样式定义最近者为准；
• 载入样式以最后载入的定位为准；
• 优先级为: !important > 行内样式 > id > class > tag > 通配符 > 系统默认;

八、LESS和Sass?

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既能够在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助Node.js);

而Sass 是一款强化CSS的辅助工具，它在CSS语法的基础上增长了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令CSS 更增强大与优雅。使用Sass以及Sass的样式库（如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。须要Ruby环境

九、CSS3的animation？

animation是css3新增的动画属性，这个css3动画的每一帧是经过@keyframes来声明的，keyframes声明了动画的名称，经过from、to或者是百分比来定义。