一、css

盒模型

css盒模型本质上是一个盒子，封装周围的html元素，包括边距margin，边框border，填充padding和实际内容content。盒模型允许我们在这个元素的周围之间的空间放置元素。

box-sizing：content-box（W3C盒模型，又称标准盒模型）——元素的宽高大小表现为内容的大小。

box-sizing：border-box（IE盒模型，又称怪异盒模型）——元素的宽高表现为内容+内边距+边框的大小，背景会延伸到边框的外沿。

css3的新特性

word-wrap 文字换行

text-overflow 超过指定容器的边界时如何显示

文字渲染text-decoration

文字阴影text-shadow

渐变效果gradient

过渡效果transition 【transition-duration：过渡的持续时间】

transform拉伸，压缩，旋转，偏移等变换

动画animation

阴影 box-shadow

栅格布局 gird、弹性布局 flex

transition和animation的区别：

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

css选择器及其优先级

!important

内联样式style=""

ID选择器#id

类选择器/属性选择器/伪类选择器.class.active[href=""]

元素选择器/关系选择器/伪元素选择器html+div>span::after

通配符选择器*

BFC

BFC（block farmatting content）格式化上下文，是web页面中盒模型布局的css渲染模式，指一个独立的渲染区域或者说一个隔离的独立容器。

BFC应用

防止margin重叠或者字体环绕，清除内部浮动，还可以自适应两栏或多栏布局。

触发BFC的条件

根元素

float的值不为none

overflow的值不为visible

display的值为inline-block、table-cell、table-caption

position的值为absolute、fixed

BFC的特性

内部的box会在垂直方向上一个接一个的放置；

垂直方向上的距离由margin决定；

BFC的区域不会与float的元素区域重叠；

计算BFC的高度时，浮动元素也参与计算；

BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

绝对定位和相对定位

absolute：绝对定位，相对于最近的已定位relative的祖先元素。如果一层层向上都无已定位的祖先元素，就会以body元素为偏移参照基准，从而完全脱离了标准文档流。

fixed：固定定位，被定位的元素会相对于视窗来定位，这以为着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

共同点：改变行内元素的呈现方式，都脱离了文档流。

不同点：absolute的“根元素”是可以设置的，fixed的“根元素”则固定为浏览器窗口。

说一说你用过的css布局

grid布局，layout布局，flex布局，双飞翼、圣杯布局等。

flex布局

flex布局是网页布局的其中一个解决方案，以为“弹性布局”，用来为盒模型提供最大的灵活性。传统的布局解决方案都是基于盒模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如垂直居中。2009年，W3C提出了新方案--flex布局，它极大程度上能实现各种页面布局。目前，flex布局已经得到了所有浏览器的支持，现在已是目前首选的布局方案。

容器默认存在两根轴：水平的主轴和垂直的交叉轴。采用flex布局的元素，称为flex容器。

注意：给元素设为felx布局以后，子元素的float、clear、vertical-align属性将失效。

父元素属性

属性名	属性值	备注
display	flex	定义了一个flex容器，它的直接子元素会接受这个flex环境
flex-direction	row,row-reverse,column,column-reverse	决定主轴的方向
flex-wrap	nowrap,wrap,wrap-reverse	如果一条轴线排不下，如何换行
flex-flow	[flex-direction] , [flex-wrap]	是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`
justify-content	flex-start,flex-end,center,space-between,space-around	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items	flex-start,flex-end,center,baseline,stretch	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

子元素属性

属性名	属性值	备注
order	[int]	默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数。
flex-grow	[number]	设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-shrink	[number]	设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
flex-basis	[length], auto	设置或检索弹性盒伸缩基准值
align-self	auto,flex-start,flex-end,center,baseline,stretch	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置

让元素消失【隐藏元素】

visibility：hidden、display：none、z-index：-1、opacity：0

opacity：0 ——表示隐藏元素且不改变页面布局，如果元素已经绑定了一些事件，如click也能被触发。

visibility：hidden——表示隐藏元素且不改变页面布局，也不会触发元素已经绑定的事件。

display：none——真正意义上的隐藏元素并改变页面布局，可以理解成已经该元素从页面中删掉。

z-index：-1——把元素放在其他元素下面，从而达到隐藏效果。

清除浮动

在浮动元素后面添加clear：both的空div元素。

给父元素添加overflow：hidden或者auto样式，触发BFC。

使用伪元素，在伪元素里添加clear：both即可实现。

推荐使用伪元素方法，既不会在页面新增div，又使得文档结构更加清晰。

calc函数

calc函数是css3新增的功能，可以使用calc（）计算border、margin、padding、font-size和width等属性设置动态值。

注意点：

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);

calc()函数支持 "+", "-", "*", "/" 运算;

对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持 calc()的浏览器，使用一个固定值作为回退。

移动端rem

rem官方定义为根元素的字体大小。rem是一个相对的css单位，1rem等于html元素上font-size的大小。所以，在项目中我们只要设置html上font-size的大小，就可以改变1rem所代表的大小。

(function () {
    var html = document.documentElement;
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

移动端1px

一般来说，在PC短浏览器中，设置像素比（dpr）等于1,1个像素就代表一个物理像素；但是在retina屏幕中，dpr普遍是2或者3,1个css像素不再等于1个物理像素，因此比实际设计稿看起来粗壮。

<style>
    .box{
        width: 100%;
        height: 1px;
        margin: 20px 0;
        position: relative;
    }
    .box::after{
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0; 
        background: red;
    }
</style>
<div class="box"></div>

/** 2.border-image */
div{
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}

两边宽度固定中间自适应的三栏布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现两侧宽度固定，中间宽度自适应的三栏布局。

/**  圣杯布局  */
<style>
body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}
</style>
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

/** 双飞翼布局 */
<style>
body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px;
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}
</style>

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

伪类和伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分。

伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。

获取不存在与DOM树中的信息。比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；

获取不能被常规CSS选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

::after和:after的区别

在实际的开发工作中，我们会看到有人把伪元素写成:after，这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。

CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了。

css画半圆扇形三角梯形

div{
    margin: 50px;
    width: 100px;
    height: 100px;
    background: red;
}
/* 半圆 */
.half-circle{
    height: 50px;
    border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{
    border-radius: 100px 0 0;
}
/* 三角 */
.triangle{
    width: 0px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{
    width: 50px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}

link 与 @import 的区别

link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css

当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载

@import需要 IE5 以上才能使用

link可以使用 js 动态引入，@import不行

rem与em的区别

rem是根据根的font-size变化，而em是根据父级的font-size变化

rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px

em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=24px

Css预处理器的主要目的

Css预处理器是一种专门的编程语言，用来为css增加一些编程特性（因而css本身不是编程语言）。它不需要考虑浏览器兼容问题，因为css预处理器最终编译和输出的仍是标准css样式。一般我们可以在css预处理器中：使用变量，简单的逻辑判断，函数等基本编程技巧。

Css预处理器的主要目的

Css语法不够强大，如css选择器无法进行嵌套，导致css中存在较多重复的选择器语句。Css中无法定义变量以及没有合理的样式复用机制，最终导致整体css样式难以维护。因此Css预处理器可以减少代码，为css提供样式复用机制，提高css代码的可维护性。

Css预处理代码语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是scope（变量范围，我们称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。

Css预处理器的使用

集成在前端开发工具中使用（插件），如vscode、webstrom等。

集成在项目构建工具中使用，在项目编译（打包）时进行自动转换，如webpack、gulp等。

Sass历史：

Sass 2007年诞生，是最早也是最成熟的css预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受less影响，已经进化到了全面兼容css的scss。

Less 2009年出现，受sass影响较大，但又使用css的语法，让大部分开发者和设计者更容易上手，在ruby社区之外的支持者远超过sass，其缺点是比起sass，可编程功能不够，不过优点是简单和兼容css。

Stylus 2010年产生，来自nodejs社区，主要用来给node项目进行css预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如sass和less。

总之，sass看起来在提供的特性上占有优势，但是less能够让开发者平滑地从现存css文件过度到less，而不需要像sass那样需要将css文件转换成sass格式。

Stylus功能上更为强壮，和js联系更加紧密。

使用stylus，是因为：简短直观，缩进让css的层次非常直观。At属性引用可以减少维护量。函数和mixin，重用的利器。

初中级面试题(css)

一、css

盒模型

css3的新特性

css选择器及其优先级

BFC

BFC应用

触发BFC的条件

BFC的特性

绝对定位和相对定位

说一说你用过的css布局

flex布局

让元素消失【隐藏元素】

清除浮动

calc函数

移动端rem

移动端1px

两边宽度固定中间自适应的三栏布局

伪类和伪元素

伪类

伪元素

::after和:after的区别

css画半圆扇形三角梯形

link 与 @import 的区别

rem与em的区别

Css预处理器的主要目的

Css预处理器的使用

Sass历史：