css面试题answer

1. 介绍一下css盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素。
它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
CSS盒模型：标准模型 + IE模型。
其中标准：

怪异ie：

标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）

IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

如何设置这两种模型
标准：box-sizing: content-box; ( 浏览器默认设置 )
IE： box-sizing: border-box;

2. BFC

边距重叠解决方案

BFC: 块级格式化上下文
BFC基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

CSS在什么情况下会创建出BFC（即脱离文档流）
0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（ float 的值不为 none ）
2、绝对定位元素（ position 的值为 absolute 或 fixed ）
3、行内块（ display 为 inline-block ）
4、表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
5、弹性盒（ display 为 flex 或 inline-flex ）
6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

BFC作用（使用场景）
1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内）
4、去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠

3. 清除浮动的方法

问：如何清除浮动？
答：如果我们知道要清楚浮动元素所在的位置，我们可以在元素样式中使用clear:both清除元素相邻标签的浮动。
除此之外，我们还有三种技巧可以清除浮动：
1、给父元素添加overflow属性；
2、在浮动元素的父元素结束标签之前添加一个空的块级元素，然后为块级元素添加clear:bothCSS属性。
3、使用伪元素:after，给父元素添加一个clearfix样式类，给clearfix声明CSS

.clearfix:after {     
 content: ".";     
 visibility: hidden;     
 display: block;     
 height: 0;     
 clear: both; 
} 

4. position属性

position 属性她是规定元素的定位类型。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position属性对应的值有

position: static;
position: inherit;
position: relative;
position: absolute;
position: fixed;
position: sticky;（新的属性值）

1、position: static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2、position: inherit
inherit值如同其他css属性的 inherit 值，即继承父元素的position值。

3、position: relative
相对定位，相对于自己的初始位置，不脱离文档流。也就是说元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

举个例子，html结构

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
css样式

div {
    width: 100px;
    height: 100px;
}

.div1 {
    background: #ffff00;
}

.div2 {
    background: #00ff00;
    position: relative;
    top: 40px;
    left: 40px;
}

.div3 {
    background: #0000ff;
}

4.position: absolute
绝对定位的元素的位置相对于最近的已定位祖先元素，
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
原本所占的空间不保留！
例子中我们把div2的样式稍作改动

.div2 {
    background: #00ff00;
    position: absolute;
    top: 40px;
    left: 40px;
}

5、position: fixed
fixed元素脱离正常的文档流，所以它与absolute元素很相似，同样会被周围元素忽略，支持top,bottom,left,right属性，
但fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会随着浏览器滚动条的滚动而一起滚动。比如我们常见的回到顶部的功能，这个需求就可以使用position: fixed来完成。
但是不支持IE6、IE7、IE8。可以通过给该元素设置position: absolute并获取滚动条距离顶部高度加上某个固定高度来实现。
6、position: sticky
很多同学会对该属性比较陌生，这是一个相对来讲比较新的属性值。
sticky 的本意是粘贴，可以称之为粘性定位，但在 css 中的表现更像是吸附。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。常见的吸顶、吸底（网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。

5. css隐藏元素的方式（display和visibility）

display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;
而使用 visibility:hidden 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

6. Flex布局

我们可以用 flex 简单的做到左右定宽，中间自适应。一个口诀就可以搞定，中间 flex = 1, 宽用百分比，左右固定宽，父元素 display:flex。

html：

<div class="container">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>

css：

    .container {
        display:flex;
    }
    
    .mid{
        flex:1;
        width:100%;
        height: 100px;
        background: royalblue;
    }
    .left{
        width:100px;
        height: 100px;
        background: rosybrown;
    }
    .right{
        width:100px;
        height: 100px;
        background: cadetblue;
    }

7. css选择器

CSS选择符：

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签(元素)选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = “external”]）
9. 伪类选择器（a:hover, li:nth-child）
   伪元素选择器、分组选择器。
   继承性：
   可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；
   不可继承的样式：border, padding, margin, width, height
   优先级（就近原则）：!important > [ id > class > tag ]
   !important 比内联优先级高
   优先级算法计算
   优先级就近原则，同权重情况下样式定义最近者为准
   !important>id >class>tag
   important比内联优先级高
   元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000

8. css3动画（GPU加速）

CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块

即指元素从一种样式逐渐过渡为另一种样式的过程

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

css实现动画的方式，有如下几种：

transition 实现渐变动画
transform 转变动画
animation 实现自定义动画
transition（过度） 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形） 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动） 只是transform的一个属性值，即移动
animation（动画） 用于设置动画属性，他是一个简写的属性，包含6个属性

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。CSS 中的以下几个属性能触发硬件加速：

transform
opacity
filter
will-change

9. css实现三角形和扇形0.5px的线和椭圆

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

扇形：
css中的clip属性中的rect，
css3中的旋转
先上代码：

样式如下

<style>
.father{
  height: 400px;
  width: 400px;
  transform: rotate(90deg);
  /* background: lightgoldenrodyellow; */
}
.content{
  overflow: hidden;
  height: 400px;
  width: 400px;
  /* background: lightcoral; */
  position: absolute;
  z-index: 999;
  clip: rect(0px, 400px, 400px, 200px);
}
.container{
  height: 400px;
  width: 400px;
  background: lightblue;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 200px, 400px, 0);
  transform: rotate(60deg);
}
</style>

html标签如下：

<div class="father">
  <div class="content">
    <div class="container"></div>
  </div>
</div>

实现效果如下：

10. css Sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

11. px rem em

px和em都是长度单位。
区别是：px的值是固定的，指定是多少就是多少，计算比较容易。
em得值不是固定的，并且em会继承父级元素的字体大小。
　　附：浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
　　rem，相对单位**，相对的只是HTML根元素font-size的值**。同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%。

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ 

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点：

1. rem单位可谓集相对大小和绝对大小的优点于一身
2. 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

12. 伪类/伪元素

伪类，更多的是定义的是状态。
常见的伪类有 :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等。

伪元素，不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取。
常见伪元素有 ::before，::after，::first-letter，::first-line等等。

CSS3明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。
但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。

如：
表单的校验中，常会用到 :required、:valid 和 :invalid 这三个伪类。先来看看它们所代表的含义。

:required，指定具有 required属性 的表单元素
:valid，指定一个 匹配指定要求 的表单元素
:invalid，指定一个 不匹配指定要求 的表单元素

CSS3中的伪类
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd) 、 :nth-child(even) 、 :nth-child(3n+1)
:first-child 、 :last-child 、 :only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd) 、 :nth-of-type(even) 、 :nth-of-type(3n+1)
:first-of-type 、 :last-of-type 、 :only-of-type

CSS3中的伪元素
::after 已选中元素的最后一个子元素
::before 已选中元素的第一个子元素
::first-letter 选中某个款级元素的第一行的第一个字母
::first-line 匹配某个块级元素的第一行
::selection 匹配用户划词时的高亮部分

13. 预编译css（stylus/sass/less区别）

css 预处理器就是这样被创造出来，弥补了直接写 css 的一些缺憾：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

Stylus 是一个高效、动态以及丰富的 CSS 预处理器。它同时支持缩进的和通俗的两种风格的 CSS 语法风格。

Stylus 扩展名为「 *.styl 」，跟另外两款 css 预处理器相比略显年轻，社区以及推广程度也不及 sass 和 less，但它的一些优秀特性同样令人着迷。

Nib是 Stylus 的应用的类库。给你的「 *.styl 」添加 Nib 的最快方式是克隆 Nib 的 Git 版本库并引入，因为有了 Nib，Stylus 的高效性才更为突出。

除了包含 Less 的一些优点，Stylus 在容错性上的突出特性也十分吸引我，你可以在一个 Stylus 文件里这样写，且它们都会被编译成标准 css：

/*style.styl*/
/*类似于CSS标准语法*/
h1 {
  color: #963;
  background-color:#333;
}
/*省略大括号（｛｝）*/
h1 
  color: #963;
  background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
  color:#963
  background-color:#333

Sass
Sass有两种语法，分别以「 *.sass 」和「 *.scss 」为扩展名。这里你可以查看Sass 和 Scss 的异同。Sass 兼容 css ，你可以在 sass 文件里写 css，也可以严格按照 sass 的缩进方式省去「大括号」和「分号」，最终它们都会被编译成标准 css，比如：

/*style.sass*/
h1
  color: #666
  background-color: #666

Less
Less 受 Sass 的影响非常大，以「 *.less 」为扩展名，是 sass 之后的又一款优秀的 css 预处理器。其特点包括：

变量：就像写其他语言一样，免于多处修改。
混合：class 之间的轻松引入和继承。
嵌套：选择器之间的嵌套使你的 less 非常简洁。
函数&运算：就像 js 一样，对 less 变量的操控更灵活。
比如这样的 Less（来自bootcss/less）

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。
Less 声明变量用『@』开头，其余等同 Sass。
Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。但需要注意的是，如果用“@”符号来声明变量，Stylus会进行编译，但不会赋值给变量。就是说，Stylus 不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同。
2.作用域：

css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js 一样，它会先从局部作用域查找变量，依次向上级作用域查找。

Sass：三者最差，不存在全局变量的概念。也就是说在 Sass 中定义了相同名字的变量时你就要小心蛋疼了。
Less：我认为跟 JS 一样，逐级查找，向上冒泡。
Stylus：完全等同 Less。Stylus 和 Sass 则更倾向于指令式。

Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css，所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友。
Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过When等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus。
Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用（个人愚见）。
身边有几个朋友在 css 预编译器的选择上犹豫不决，其实我认为选择什么无所谓，关键在于你的熟练程度以及团队合作方面的有利性。
当然，在大致学习、使用和研究了这三种 css 预编译器之后，我想我会选择 Stylus，它的语法自由度很高，而且写出来的代码非常简洁，这点十分吸引我