共计 3831 个字符，预计需要花费 10 分钟才能阅读完成。
前言：
这是一篇无关 CSS 面试复盘，在面试过程中缓和是不免的，但也要施展出本人应该有的程度，把本人晓得的都井井有条的讲进去。所以面试总结是十分重要的。
1. Img background 区别
Img：是 HTML 标签。background：是 css 属性。
1.1 从解析机制来看
- 依照浏览器解析机制，HTML 标签优先解析。尽管 Link 标签会放在头部，但并不意味着会立刻执行，HTML 执行结束后才会执行。
- 如果仅仅是显示一张图片，例如 banner 广告图，则能够应用 background，不重要的主动往后排，防止占用带宽，造成数据梗塞
- 当图片很多的时候，如果不应用 lazyload，则应用 background 比拟好。
- img 标签的长处：img 是自闭和，防止了空标签，w3c 验证。background 会呈现空标签。
1.2 咱们从 SEO(搜索引擎优化 (Search Engine Optimization) 来看：
- img 是自闭和标签，不能增加文本内容。然而有 alt 属性，长处是
当图片比拟大加载失败时，这里会提醒有一张图片，能够在刷新加载。对于盲人敌人，他们应用阅读器浏览页面，这里会有提醒。2. 也是有毛病的：
- img 通过 src 加载图片，如果 HTML 不能批改，但须要更换图片，只能更改文件名，可能会报 304，须要服务端做相应的设置。
- 图片的显示区间须要预留，图片与预留空间必须统一，如果不精确，会导致图片的比例出错。
1.3 从语义化角度
background 和语义化是不沾边的，img 是 HTML 标签，有语义化的。
总结
如果是重要的图片，应用 img；不太重要的图片应用 background；
2.display 属性
过后把属性根本说了一遍，但没有开展了说。比方：display 的属性有：display:none;
display:inline; 内联元素 (默认)
display:block; 块级元素
display:inline-block; 内联块级元素 inline：会在一行外面显示，只有一行放不下了才会换行。
block：块级元素，会主动的换行，能够设置宽高
inline-block：两者的属性都具备，既能够在一行中显示，也能够设置宽高。
3. 你对 Flex 布局的理解？
其实作为一个面试老手，最怕问到就是对什么什么的理解，因为不晓得从何开始聊，会没有思路，也是本人平时总结的太少。如果当初再来问这个问题，我会怎么答呢？
首先会说什么是 Flex 布局？
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都能够指定为 Flex 布局。
Flex 布局的属性有哪些？
容器属性
- css flex-direction 决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse
row（默认值）：主轴为程度方向，终点在左端。row-reverse：主轴为程度方向，终点在右端。column：主轴为垂直方向，终点在上沿。column-reverse：主轴为垂直方向，终点在下沿。复制代码- css flex-wrap (换行)
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap:（默认）不换行
wrap：换行，第一行在上方
wrap-reverse: 换行，第一行在下方
复制代码- css flex-flow flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 row nowrap。
flex-flow: <flex-direction>||<flex-wrap> ;
复制代码- justify-content 定义了我的项目在主轴上的对齐形式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，我的项目之间的距离都相等。space-around：每个我的项目两侧的距离相等。所以，我的项目之间的距离比我的项目与边框的距离大一倍。复制代码- align-item 定义我的项目在穿插轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：穿插轴的终点对齐。flex-end：穿插轴的起点对齐。center：穿插轴的中点对齐。baseline: 我的项目的第一行文字的基线对齐。stretch（默认值）：如果我的项目未设置高度或设为 auto，将占满整个容器的高度。复制代码- align-content 定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与穿插轴的终点对齐。flex-end：与穿插轴的起点对齐。center：与穿插轴的中点对齐。space-between：与穿插轴两端对齐，轴线之间的距离均匀散布。space-around：每根轴线两侧的距离都相等。所以，轴线之间的距离比轴线与边框的距离大一倍。stretch（默认值）：轴线占满整个穿插轴。复制代码我的项目属性
- order
定义我的项目的排列程序。数值越小，排列越靠前，默认为 0。
- css flex-grow
定义我的项目的放大比例，默认为 0，即如果存在残余空间，也不放大。
- css flex-shrink
定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。
- css flex-basis
定义了在调配多余空间之前，我的项目占据的主轴空间（main size）。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即我的项目的原本大小。
- css flex
是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
- align-self
容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
为什么要应用 Flex 布局，和其余的布局有什么区别
传统布局，基于盒模型，依赖 display 属性、position 属性、float 属性 它对于那些非凡布局十分不不便，比方垂直居中。Flex 布局，能够简便、残缺、响应式地实现各种页面布局。
4. 对 rem 有理解吗？
rem 是一个单位，是绝对于 html 元素的字体大小。具体例子：
<style>
html{font-size: 100px;}
#d1{
background: blue;
height: 0.5rem;
}
</style>
<body>
Hello world!
<div id="d1">Box</div>
</body>
复制代码成果页面： 盒子高度是字体高度的一半
5.meta 标签的属性
什么是 meta 标签：
可提供无关页面的元信息（meta-information），比方针对搜索引擎和更新频度的形容和关键词。
meta 标签永远位于 head 元素外部。
属性：
- name 属性，提供了名称 / 值对中的名称。
- http-equiv 属性为名称 / 值对提供了名称。并批示服务器在发送理论的文档之前先在要传送给浏览器的 MIME 文档头部蕴含名称 / 值对。
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
复制代码content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
复制代码- content 属性提供了名称 / 值对中的值。该值能够是任何无效的字符串。
- scheme 属性用于指定要用来翻译属性值的计划。
6. 垂直居中的办法
6.1 将显示方式设置为表格
display:table-cell
vertical-align:middle
复制代码6.2 应用 flex 布局
align-item:center
复制代码6.3 相对定位
margin: 0 auto
复制代码相对定位中固定高度时：
top:50%
margin-top:-height/2
复制代码6.4 文本垂直居中
文本垂直居中：line-height: height 值
.vertical {
height: 100px;
line-height: 100px;
}
复制代码6.5 父元素设置 padding
<style>
.container {
width: 500px;
padding: 200px 0;
background-color: yellow;
}
.vertical {
height: 100px;
width: 100px;
background-color: blue;
}
</style>
复制代码面试总结：
对于 CSS 方面的面试，应该要把一些常常用的属性总结好，防止在面试的时候想到什么说什么，而是有一条大略的路线，这样在表白的时候才会更加清晰，自信。在面试过程中最重要的就是自信，答复问题的时候应该按条理去说，就和写文章一样，有标签重点，该具体的时候也要开展来说。
小编整顿了一套 CSS 面试题材料，有小伙伴须要的请点击这里自行支付哦
