前端面试之CSS篇

请你讲一讲 CSS 的权重和优先级

权重：

　　权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。

　　权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。

　　每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；

　　css通过css选择器的权重占比，来计算css选择规则的总权值，从而确定 定义样式规则的 优先级次序；

从“css权重的理解”中得知，原来所谓为的 css选择规则的优先级 是按照 css选择器的权值的比较 来确定的（可能光看这句还是一头雾水的，不急，看完我接下来介绍 估计你马上会有豁然开朗的感觉，但，请先记住这句话）；

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

优先级：

1. css选择规则的权值不同时，权值高的优先；

2. css选择规则的权值相同时，后定义的规则优先；

3. css属性后面加 !important 时，无条件绝对优先；

介绍 Flex 布局，flex 是什么属性的缩写：

Flex弹性布局，又称FFC-弹性格式化上下文，是当前比较流行的渲染规则(Formatting context)之一，类似的渲染规则：

• BFC-块级格式化上下文(Block formatting contexts)
• IFC-行内格式化上下文(Inline formatting contexts)
• FFC-弹性格式化上下文(Flex Formatting Contexts)
• GFC-网格布局格式化上下文(GridLayout Formatting Contexts)

写法：dispaly:flex|inline-flex; 

兼容写法：display:-webkit-flex;

flex是flex-grow、flex-shrink和flex-basis的缩写，简单记：grow扩大——shrink缩小——basis最小空间

flex-grow 容器空间： 扩大 比例，默认值为0，必须为数字
flex-shrink 容器空间 ：收缩 比例，默认值为1，必须为数字
flex-basis 容器空间 ：长度 大小，auto|inherit|%|px....或其他长度单位

CSS 怎么画一个大小为父元素宽度一半的正方形？

div{
    width: 50%;
    padding-bottom: 50%
}

CSS实现自适应正方形、等宽高比矩形

1、和上面的一个道理

2、利用子元素将父元素撑起来，利用margin-top，但是要注意margin塌陷的问题

.container{
  overflow:hidden;//触发BFC解决margin问题
  width:100%;
}
.container:after{
  content:"";
  margin-top:100%;
  display:block; //块级元素才可以有垂直方向上的margin
}

CSS 动画有哪些？

1、transition渐变动画

2、transform转变动画

      transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用

3、animation自定义动画

      为了实现更灵活的动画效果 

用css2和css3分别写一下垂直居中和水平居中

css2

水平居中： text-align: center;(水平)margin: 0 auto;(水平)垂直居中：单行内容垂直居中设置相同的height和line-height多行内容垂直居中通过设置上下的paddingvertical-align:center;(垂直居中)绝对定位实现水平垂直居中：top:50%;left:50%;transform: translateX(-50%);transform: translateY(-50%);

css3

display: flex;
justify-content:center;
align-items: center

visibility 和 display 的差别（还有opacity)

1、display:none 

（1）、浏览器不会生成属性为display: none;的元素。 

（2）、display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。 

（3）、display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。 （4）、transition无效。 

2、visibility:hidden 

（1）、元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。 （2）、visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。 

（3）、visibility: hidden;不会触发该元素已经绑定的事件。 

（4）、visibility: hidden;动态修改此属性会引起重绘。 

（5）、transition无效。

 3、opacity:0;filter：alpha(opacity=0-100;（考虑浏览器兼容性的问题，最好两个都写上） （1）、opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。 

（2）、opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。 

（3）、opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。 

（4）、transition有效。 

opacity 可以有过渡效果嘛？

* {
	margin: 0;
	padding: 0;
}
.box {
    max-width: 400px; height: 200px;
    background: linear-gradient(to right, olive, green);
    position: relative;
    z-index: 0;    
}
.box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, green, purple);
    opacity: 0;    
    transition: opacity .5s;
    z-index: -1;
}
.box:hover::before {
    opacity: 1;    
}

<div class="box">
</div>

BFC 与 IFC 区别

所谓BFC就是块级格式化上下文, Block Formatting Context，在常规流中竖着排列
IFC就是行内格式化上下文, Inline Formatting Content，在常规流中横着排列

BFC

3.1 规则

• 如果给一个元素创建了一个BFC，就相当于创建了一个新的容器，容器内和容器外中的元素不会相互影响。外边的BFC规则，不会对容器里的BFC产生影响，而容器里面的BFC也不会对容器外的BFC产生影响，也就是相互隔绝，互不影响。
• 盒子的布局开始是从包含容器的顶部开始的。
• BFC内部的盒子会在内部一个接着一个在垂直方向排列
• 盒子的垂直方向的距离由margin决定，但是在同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠
• BFC的区域不会和float重叠
• 每个盒子的左边界都要紧靠包含容器的左边界（这也就解释了为什么块级元素都是单独成一行的，如果不单独成行，第二个盒子的左边界怎么紧靠包含容器的左边界）

3.2 如何产生新的BFC

• float的值不为none。
• overflow的值不为visible。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。
• 根元素或者其他包含它的元素

当一个元素设置了新的BFC后，就和这个元素外部的BFC没有关系了，这个元素只会去约束自己内部的子元素

IFC

• 盒子是水平一个接一个的排列，水平的margin，内边距，边框是可以有的。
• 垂直方向的对齐，可能是底部对齐，顶部对齐，也可能是基线对齐（这个是默认的）；ps.这里的盒子应该是指的内联元素的盒子（span，strong等）和匿名内联盒子(只有文本，没有内联元素包含，自动创建的)，他们合称内联盒子，一个或者多个内联盒子组成一个行框，行框的宽度由包含块和出现的浮动决定的（为什么有浮动呢，后面解释）
• 行框中的内联盒子的高度小于行框的高度时，内联盒子的垂直方向的对齐方式取决于vertical-align属性
• 当一个行框水平不能容纳内联盒子时，他们将会在垂直方向上产生多个行框，他们上下一个挨着一个，但是不会重叠
• 一般来说，行框的左边界紧挨着包含容器的左边界，行框的右边界紧挨着包含容器的右边界，（是两个边都紧挨着）。然而，浮动盒子可能存在于包含边框边界和行框边界之间（后面解释这种情况）；
• 多个内联盒子的宽度小于包含他们的行框时，他们在水平方向的分布取决于text-align属性（默认是left）

了解box-sizing吗？

box-sizing 属性可以被用来调整这些表现：
content-box(默认值).如果你设置一个元素的宽度为100px,那么这个元素的内容会有100px宽，并且任何边框和内边框的宽度都会被增加到最后会指出来的元素宽度中。

boder-box： 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元的width设为100px,那么这100px会包含其它的border+padding,内容区的实际宽度会是width减去border+padding的计算值。大多是情况下这使得我们更容易的去设定一个元素的宽高

什么是 BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则

•  内部的Box会在垂直方向，一个接一个地放置。 
•  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 
•  每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 
•  BFC的区域不会与float box重叠。 
•  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 
•  计算BFC的高度时，浮动元素也参与计算。 

 如何创建BFC 

1. float的值不是none。 
2. position的值不是static或者relative。 
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex 
4. overflow的值不是visible

 BFC的作用 

1. 利用BFC避免margin重叠。 

2. 自适应两栏布局

3. 清除浮动

了解盒模型吗？

盒模型:
一个完整的盒子=content+padding+border+margin组成
盒模型一般又分为两种(浏览器厂商大战,历史遗留问题) ie/w3c两种,两者区别在于对Content(内部盒子)的定义不同,注意这里的Content是大写开头,区别于上面的content
ieContent=content+padding+border
W3CContent=content

这有什么影响呢? 这会影响到宽高值,我们常用到css代码中的width和hight但是很少注意到,这里的值指的是盒子的内部盒子Content的宽高值,而不是整个元素的宽高

举颗栗子:
width:100px;
height:100px;
在ie的某个div元素下用这样的代码,就意味着,content宽+padding宽+margin宽三者总的宽度是100px;
而在w3c下,只是单纯指的content内容的宽高值

在css3中,我们可以用box-sizing 的属性中的content-box和border-box的值来使得对应的元素可以根据不同的盒模型来显示

那么我们应该什么时候分别用content-box和border-box呢? 看你的项目,如果要兼容ie那就用border-box,如果不用兼容ie就用标准盒子content-box

盒模型又细分外部盒子,内部盒子,两者分别掌控者一个盒子内外展示的状态;display其实就是为他们两设置的

dispaly的作用就是影响一个盒子的显示状态,或者更具体一点说是影响一个盒子内外的文档流状态;除此之外它还影响了元素的流,一个元素不设置width值的时候,默认是auto

几个同类型的元素,比如几个div但是display的值不一样,那么默认的width值显示的效果也是不一样

清除浮动有哪些方法？

1. 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

2. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。
优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

注意：别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

3. 使用after伪元素清除浮动：：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）
优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。

注意：这个也是给父亲添加 clearfix

4. 使用before和after双伪元素清除浮动：（较常用）

注意：是给父亲添加clearfix