# 基础部分
# CSS3新特性
CSS3 是 CSS 规范的最新版本，在 CSS2.1 的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题，并且不再需要非语义标签、复杂的 JavaScript 脚本以及图片。
例如，CSS3 支持圆角、多背景、透明度、阴影、动画、图表等功能。
CSS1 和 CSS2.1 都是单一的规范，其中 CSS1 主要定义了网页对象的基本样式，如字体、颜色、背景、边框等，CSS2 添加了高级概念，如浮动、定位、高级选择器（如子选择器、相邻选择器和通用选择器等）。
整个 CSS3 的规范发布不会因为部分存在争论而影响其他模块的推进。 对于浏览器来说，可以根据需要，决定哪些 CSS 功能被支持。
# 块级元素和行内块元素
# 块级元素和行内元素的区别
块级元素，宽度默认是它容器的100%,各占据一行，垂直方向排列；行内元素，都是同一行，水平方向排列；
块级元素，能容纳其他块元素或者行内元素；行内元素只能容纳文本或其他行内元素；
块级元素中height，line-height以及margin和padding都可以控制；行内元素设置width无效，height无效(可以设置line-height) ，margin上下无效，padding上下无效
# 常见的行内元素
a - 锚点
select - 项目选择
span - 常用内联容器，定义文本内区块
strong - 粗体强调
img - 图片
input - 输入框
label - 表格标签
textarea - 多行文本输入框
br - 换行
# 常见的块级元素
div
ul ,li 非排序列表
form - 交互表单
table - 表格
h1 -h6 标题
hr - 水平分隔线
p - 段落
dl -dt-dd - 定义列表
address - 地址
blockquote - 块引用
fieldset - form控制组
# px em 和 rem的区别
# px
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
# em和rem
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。em是相对于其父元素来设置字体大小的，一般都是以的font-size为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值em相对于父元素，rem相对于根元素。
# 水平垂直居中的几种方法
# 使用flex布局
利用flex的align-Items:center垂直居中，justify-content:center水平居中
# 利用相对定位和绝对定位的margin:auto
相对定位下，使用绝对定位将上下左右都设置为0，再设置margin:auto即可实现居中
# 利用相对定位和绝对定位，再加上外边距和平移的配合
相对定位下，使用绝对定位，利用margin偏移外容器的50%，再利用translate平移回补自身宽高的50%即可
# 利用textAlign和verticalAlign
利用textAlign:center实现行内元素的水平居中，再利用verticalAlign:middle
实现行内元素的垂直居中，前提是要先加上伪元素并给设置高度为100%，用过elementUI的可以去看看其消息弹窗居中实现方式就是如此
# 其他
上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left
偏移、margin偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和textAlign即可实现。
# 盒模型的理解
盒模型包括margin、border、padding、content四个部分，主要的设置属性是margin、border、padding。
盒子模型又分为两种W3C和IE盒子。
- W3C的元素宽度=content的宽度
- IE的元素宽度=content+padding+border
常见选择器 →