CSS常见面试 | 邵侠小站

1.掌握盒子水平垂直居中的五大方案

定位：三种
display:flex
JavaScript
display:table-cell

问：盒子水平和垂直居中怎么来实现？

答：这个这种需求的话其实在我之前项目当中是非常常见的，刚开始我只用这种这种方法，后来随着Css3的一个兴起，然后这种flex方式其实特别方便，尤其在移动端开发的时候来实现，它的话特别强大对吧？然后那个有一段时间我自己去看掘金，看博客的时候发现，这种方案虽然不常用，但是也能实现，我感觉挺好玩的，所以我就记下来了。

定位方式:

最开始实现的方案的话，其实我们都用这种方案叫定位的方式最开始实现的方案的话，其实我们都用这种方案叫定位的方式

body {
		/* 让盒子相对父级定位 */
		position: relative;	
	}

.box {
			position: absolute;
			top: 50%;
			left: 50%;
			/* 盒子左上角在页面居中，通过盒子长宽调整到中间居中 */
			margin-top: -25px;
			margin-left: -50px;
	}

宽高自适应的定位方式:

或者说我的宽和高，不知道具体宽高的情况下，前提是有宽高。

.box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
	}

利用CSS3控制形变位移实现：

不需要设置宽度和高度，能够随着内容变化自适应。

.box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);	
	}

不通过定位方式来实现：

body {
			display: flex;
			justify-content: center;
			align-items: center;
	}

JS/TS方法实现

let HTML = document.documentElement,
			winW = HTML.clientWidth,
			winH = HTML.clientHeight,
			boxW = box.offsetWidth,
			boxH = box.offsetHeight;
		box.style.position = "absolute";
		box.style.left = (winW - boxW) / 2 + 'px';
		box.style.top = (winH - boxH) / 2 + 'px';

table方法实现

body {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			/* 固定宽高 */
			width: 500px;
			height: 500px;
		}

.box {
	display: inline-block;
}

2. CSS3中盒模型

问：css3中有哪些盒模型？

答：标准盒模型和 IE 盒模型也叫怪异盒模型，还有flex 弹性伸缩盒模型。

问：盒子大小确定

答：

其实我们最常用的就是标准盒模型，也就是css 中的 contentbox 。它指的是谁呢？width和height 样式，指的是内容的宽度。对吧？并不是盒子最终的宽高。盒子宽高是由我们的内容宽高加上 padding 加上 border 。但这种东西的话在我们真实项目当中可能就会遇到一个问题，什么问题呢？假设然后我想指定一个，我想指我想构建一个 100 乘 100 的这样一个盒子。但是我之前我写的 width和height 是 100 乘100，后来我发现我要给它加个 border 我只要加 border 我不改 width和height 的话咋办？它一定会变大了，这样的话就会折下来了，是不是这样的话不好。那么我还要每改 border 每改 padding 我都要手动改下 width和height 值，还要重新计算，我认为这种方式比较谁麻烦。
后来 CSS 3 里边给我们提供了一个方式，叫box-sizing=content-box 这也是我们所谓的IE盒模型，能够让我们来控制出使用IE盒模型了。
这种怪异盒模型里边有个好处，什么好处呢？它里边我们在 width和height 指的是盒子大小，并不是内容的大小。比如说我写 100 乘 100 盒子最终就是谁 100 乘 100 不管我怎么调border的，不管我怎么调 padding，它会自己通过缩放内容来实现整个盒子还是100 乘 100。这样的话我写样的时候干什么比较方便，不用每一次来回算值了是不是？所以我现在在真实项目当中大部分都在应用谁应用我们的box-sizing= content-box这种IE盒模型，包括我看了 boost up 以及各大 UI 组件 element UI 这种组件它的源码里面的一些公共样式，里边大部分也是让盒子默认就采用box-sizing=content-box所以我认为这是我们开发中的一种规范和一种方式

3. 左右固定，中间自适应方案布局

最简单的flex布局

<style>
.container {
			display: flex;
			justify-content: space-between;
}

.left,
.right {
	flex:0 0 200px;
}

.center {
	flex:1;
}
</style>

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

定位方法

<style>
.container {
			position: relateive;
}

.left,
.right {
			position: absolute;
}
.left {
			left: 0;
}
.right {
			right: 0;
}
.center {
			margin: 0 200px;
}
</style>

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

圣杯布局：浮动和负MARGIN

<style>
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .container {
        height: 100%;
        padding: 0 200px;
    }

    .left,
    .right {
        width: 200px;
        min-height: 200px;
        background: lightblue;
    }

    .center {
        width: 100%;
        min-height: 400px;
        background: lightsalmon;
    }

    .left,
    .center,
    .right {
        float: left;
    }

    .left {
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        margin-right: -200px;
    }
</style>

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼布局：浮动和负MARGIN

<style>
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .container,
    .left,
    .right {
        float: left;
    }

    .container {
        width: 100%;
    }

    .container .center {
        margin: 0 200px;
        min-height: 400px;
        background: lightsalmon;
    }

    .left,
    .right {
        width: 200px;
        min-height: 200px;
        background: lightblue;
    }

    .left {
        margin-left: -100%;
    }

    .right {
        margin-left: -200px;
    }
</style>

<body class="clearfix">
    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

4. 让元素div消失在视野中

1.position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px
2.display:none
3.visibility:hidden
4.width:0 + overflow:hidden
height:0 + overflow:hidden
5.margin-top/bottom/left/right:-9999px;
6.background-color:transparent
7.opacity:0
8.transform: translateX(-9999px)/translateY(-9999px)/translate(-9999px,-9999px)
9.transform: scale(0)

5. 请说明z-index的工作原理,适用范围?

z-index这个属性控制着元素在z轴上的表现形式。
适用范围:仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠1顺序越高，越靠近屏幕。
未定义时，后来居上，未定义z-index的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，后来的元素的z-index的值越大。
使用范围：

网页两侧的浮动窗口（播放器，指定按钮，广告等）
导航栏浮动值顶
隐藏div实现弹窗功能（通过设置div定位和z-index控制div的位置和出现隐藏）

6. 谈谈你对html5的理解

语义化标签类
音视频处理
canvas / webGL
history API
requestAnimationFrame
地理位置
web scoket

7. 如何使一个div里面的文字垂直居中，且该文字的大小根据屏幕大小自适应？

垂直居中：

行高法：文字行高和容器相同

内边距法: 利用padding将内容垂直居中

模拟表格法：将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

<div id="wrapper">
    <div id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </div>
</div>
<style>
#wrapper {display:table;}
#cell{display:table-cell; vertical-align:middle;}
</style>

CSS3 flex

<div class="flex">
    <div>
       <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
      <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
    </div>
</div>

.flex{
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;
}

CSS3 transform

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

CSS3 box

<div class="center">
  <div class="text">
    <p>我是多行文字</p>
    <p>我是多行文字</p>
    <p>我是多行文字</p>
  </div>
</div>

.center {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

文字大小自适应：

p {
font-size: 36px;
}
@media (max-width: 1000px) {
  p {
    font-size: 30px;
  }
}

@media (max-width: 800px) {
  p {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  p {
    font-size: 18px;
  }
}

8. 不考虑其它因素，下面哪种的渲染性能比较高？

.box a{
    ...
}

a{
    ...
}

第二个：CSS 的浏览器渲染机制是选择器从右向左查询，所以说遇到div的话就只找所有的 div 查找层级。浏览器渲染机制是先找所有 a 再找 box 下所有的 a，它进行了二次筛选，所以第一个的性能要比第二个慢。