CSS前端面试问题

1、BFC

BFC（Block formatting context）块级格式化上下文。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，也不会受外部元素的影响。

BFC是一种边距重叠的解决方案，比如我们在写代码的时候会发现左右或者上下两个元素都设有边距，但往往出现边距之间取最大值作为两个元素之间的边距，而不是取两者的边距之和。

如何创建BFC ?

（1）float不为none

（2）position设置为absolute，fixed

（3）display设置为table-cell，table-caption，inline-block, flex, inline-flex

（4）overflow设置为除了visible以外的值，即hidden，auto，scroll

（5）body根元素

BFC的应用

（1）清除浮动，BFC可以包含浮动的元素，清除浮动只需要将父元素变成一个BFC即可，常用的方法是给父元素设置overflow:hidden

（2）解决边距重叠，同一BFC下外边距会发生合并，若想避免外边距合并，可以将其放在不同的BFC容器中

（3）阻止元素被浮动元素覆盖，创建自适应两栏布局，左边宽度固定，右边自适应宽度

2、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

3、box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

4、CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、
相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、
属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
 
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

5、CSS3新特性

（1）选择器
 p:first-of-type 选择属于其父元素的首个元素
 p:last-of-type 选择属于其父元素的最后元素
 p:only-of-type 选择属于其父元素唯一的元素
 p:only-child 选择属于其父元素的唯一子元素
 p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

（2）和动画相关的特性
Transition,Transform和Animation

（3）三个边框属性
border-radius 创建圆角边框
box-shadow 为元素添加阴影
border-image 图片来绘制边框

（4）文字效果
word-wrap 允许文本强制文本进行换行
text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示
text-shadow 可向文本应用阴影
text-decoration CSS3里面开始支持对文字的更深层次的渲染

（5）渐变效果
linear-gradient 线性渐变
radial-gradient 径向渐变

(6)媒体查询，多栏布局

6、HTML5新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

7、常用居中布局

（1）使用定位

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

（2）使用定位加margin

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

（3）使用定位加translate

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

（4）使用flex布局

.div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    border: 1px solid red;
}
.div2 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

8、用纯CSS创建一个三角形

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

8、用CSS画圆

	background-color: blue;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid red;

10、CSS3字号11/10/9/8px实现方法**

font-size: 12px;
transform: scale(0.91,0.91) ;
//首先自定义字号为12像素，因为浏览器支持的最小就是12像素，之后通过缩放来实现想要的字号：
11px = 11/12=0.9166666666666667
10px = 10/12=0.8333333333333333
9px = 9/12=0.75
8px = 8/12=0.6666666666

9、一个满屏品字布局如何设计

第一种真正的品字：
三块高宽是确定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

10、三栏布局/圣杯布局/双飞翼布局

（1）绝对定位解决方案

<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position: absolute;
    }
    .layout.absolute .left{
      left: 0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right: 0;
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>绝对定位解决方案</h1>
      1.这是三栏布局的中间部分</div>
    <div class="right"></div>
  </article>
</section>

（2）flexbox解决方案

<section class="layout flexbox">
  <style>
    .layout.flexbox{
      margin-top: 120px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex: 1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>flexbox解决方案</h1>
      1.这是三栏布局的中间部分
    </div>
    <div class="right"></div>
  </article>
</section>

11、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

12、常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别*/
}

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

13、移动端适配解决方案

1、 viewport（scale=1/dpr）

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

device-width等于理想视口的宽度，设置width=device-width就相当于让布局视口等于理想视口。
initial-scale = 理想视口宽度 / 视觉视口宽度，设置initial-scale=1就相当于让视觉视口等于理想视口。
这时，1个CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

2、rem+媒体查询
rem是css3新增的一个相对单位。rem为相对HTML根元素的大小，除了IE8及更早的版本外，其他浏览器都支持rem。
阿里早期开源了一个移动端适配解决方案 —— flexible。通过这种方案，我们在页面上统一使用rem布局。

核心代码：

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

上面的代码中，将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。
这样我们只需要将设计稿的px转成对应的rem即可。

三、vm/vh
vh、vw方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。

这种方案和上面的方案解决问题的思路一样。这个是需要将设计稿的px转成对应的vw，当然这种比例关系我们不用手动计算，webpack解析css时有个postcss-px-to-viewport插件，可以实现px到vw的自动转化。

这种方案同样存在上面提到的无法看更多内容的问题。另外，px转换成vw不一定能完全整除，因此有一定的像素差。

14、flex布局

1. 什么是flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。目前被所有浏览器所支持。

2. flex的几种常见属性

• flex-direction —— 用于指定Flex主轴的方向

row：默认值，表示Flex子项水平方向从左到右进行排列，此时水平方向上轴线为主轴方向
row-reverse：与row相反，水平方向轴线为主轴方向，Flex子项排列为从右向左进行排列
column：表示Flex子项垂直方向上从上到下进行排列，此时垂直方向上轴线为主轴方向
column-reverse：与column相反，垂直方向轴线为主轴方向，Flex子项排列为从下到上进行排列

• justify-content —— 指定Flex子项在主轴方向上的对齐方式

  flex-start：默认值，表示Flex子项与行的起始位置对齐
  flex-end：表示flex子项与行的结束位置对齐
  center：表示Flex子项与行中间对齐
  space-between：表示两端对齐，中间间距相等
  space-around：表示间距相等，中间间距是两端间距的二倍

• align-items：定侧轴上Flex子项的对齐方式
  stretch：默认值，当Flex子项未设置高度或者高度值为auto的时候，stretch起作用，将Flex子项的高度设置为行高度
  flex-start：表示与侧轴开始位置对齐
  flex-end：表示与侧轴结束位置对齐
  center：表示侧轴方式上中间对齐baseline：表示基线对齐，项目的第一行文字的基线对齐

• flex-wrap：用于指定Flex子项是否换行
  nowrap：默认值，不换行
  wrap：换行，溢出的Flex子项会自动放到下一行
  wrap-reverse：表示反方向换行

• align-content：用于多行情况下，多行的对齐方式
  align-content:stretch（默认值）| flex-start | flex-end | center | space-between | space-around

• align-self：指定某Flex子项的对齐方式
  align-self: auto | flex-start | flex-end | center | baseline | stretch