前端开发面试题整理以及知识点梳理（css3篇）

哈喽，哈喽，小伙伴们，今天继续

前面咱们已经讲过html5了，今天也就该css了，当然，这儿的面试点其实也不是很多，也很容易理解，但是身为开发，应该都知道它的痛，哈哈哈

预言一下，没有一个前端可以躲过css的摧残~~~

下面，开搞，开搞~~

css（3）篇

老规矩，开局一张图，先来一张逻辑图顺顺思路 

 

1 简述一下css(3) 

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

应该不难理解，注意关键词层叠和样式即可，顺便了解一下它的三个特性层叠性、继承性、优先级

2 什么是选择器 ，怎么使用？

 主要分为基础和复合 

很好理解，基础和复合就是单个和多个选择的意思，下面我们列举主要使用的那些

基础选择器：

 

复合选择器：

 

选择器并不难，也是我们经常需要使用的，其中注意一下复合选择器中的这些即可，还有就是优先级的问题，列一下：！important>行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0） 

3 讲一下css的文本属性 和字体属性

文本属性：

字体属性：

大小：font-size

字体：font-family

粗细：font-weight

总结一下：

 

4 引入方式 

共三种，简述即可

一般来说，尽量不使用行内样式，因为很难统一管理，较为凌乱，虽然方便，但是，忍住手欠，各位，哈哈哈

5 显示模式（一般面试不会这么问，可能会问讲一下块元素，行内块元素这样，能多讲就多讲一些，别等人家一个一个问了）

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。
块级元素的特点：
① 独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：

文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式转换

特殊情况下，需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

没得商量，全文背诵 

6 讲一下盒模型（不要觉得简单，虽然确实不难，面试有问过的） 

盒子模型分为两种:

• 第一种是 W3C 标准的盒子模型（标准盒模型）
• 第二种 IE 标准的盒子模型（怪异盒模型）

1、标准盒模型中 width 指的是内容区域 content 的宽度

height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式

可以为 box-sizing 赋两个值：

1、box-sizing: content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin

2、box-sizing: border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽=width+margin

简单总结一下，两个的区别是外边距（margin）以内是不是只有宽高内容

7 背景和阴影

背景： 

阴影：

盒子阴影

 

文字阴影

 

背景这块可能会问怎么合理显示背景图片 ，根据需求来即可

 

 8 说一下布局方式

在css中提供了三种布局方式：普通流（标准流）、浮动、定位

标准流就是标签按照规定好默认方式排列，标准流是最基本的布局方式。 这里主要讲一下浮动和定位。

浮动

特性：

1. 浮动元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。 

清除浮动 

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

怎么清除浮动

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法，如<br />等。
2. 父级添加 overflow 属性
3. 父级添加after伪元素
4. 父级添加双伪元素

总结一下：

 

浮动这一块最重要的是为什么要清除浮动以及怎么清除 

定位 

 

 

定位用的很多，看图即可，其中重点说一下层级和居中

定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -50px;：让盒子向左移动自身宽度的一半。

 

9 css使用技巧（这一part是总结，可能会零散的问） 

元素的显示与隐藏

1. display 显示隐藏 但是不保留位置
2. visibility 显示隐藏 但是保留原来的位置
3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理

溢出的文字省略号显示 

单行文本溢出显示省略号：

1. 先强制一行内显示文本
 white-space: nowrap; （ 默认 normal 自动换行）
2. 超出的部分隐藏
 overflow: hidden;
3. 文字用省略号替代超出的部分
 text-overflow: ellipsis;

多行文本溢出显示省略号：
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分webkit内核）

overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示 
display: -webkit-box;
限制在一个块元素显示的文本的行数 
-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式 
-webkit-box-orient: vertical;

精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度（性能优化点之一）。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

使用精灵图核心：

• 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
• 这个大图片也称为 sprites 精灵图 或者 雪碧图
• 移动背景图片位置， 此时可以使用 background-position 。
• 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
• 因为一般情况下都是往上往左移动，所以数值是负值。
• 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

鼠标样式 

css模块的内容就先更新到这里后续有内容会继续更新的，接下来来到真正的核心模块，js了，准备好，马上发车~~~