哈喽，哈喽，小伙伴们，今天继续
前面咱们已经讲过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中提供了三种布局方式：普通流（标准流）、浮动、定位
标准流就是标签按照规定好默认方式排列，标准流是最基本的布局方式。 这里主要讲一下浮动和定位。
浮动
特性：
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。
清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
怎么清除浮动
- 额外标签法也称为隔墙法，是 W3C 推荐的做法，如
<br />等。 - 父级添加 overflow 属性
- 父级添加after伪元素
- 父级添加双伪元素
总结一下：
浮动这一块最重要的是为什么要清除浮动以及怎么清除
定位
定位用的很多，看图即可，其中重点说一下层级和居中
定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
选择器 { z-index: 1; }
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -50px;：让盒子向左移动自身宽度的一半。
9 css使用技巧（这一part是总结，可能会零散的问）
元素的显示与隐藏
- display 显示隐藏 但是不保留位置
- visibility 显示隐藏 但是保留原来的位置
- 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了，准备好，马上发车~~~
