css这么玄学的东西，背后一定有其原理可以学习。w3c就是最好的网站，知识点要反复记忆，经典案例反复练习，才能达到标准的css水平。
css就是 选择器+ 属性。选择器有很多种，属性会更多。但是归根到底就是选择器+属性。属性里面分基础和中等，基础属性只需要记忆就好，但是高级属性则需要重点加强记忆。
css里面最重要的概念就是元素类型。+ 显示，浮动，定位。盒子模型就是基础盒子，浮动和定位就是用来摆放盒子。
一 基础模块：
基础模块主要有8个常用知识点，其中前6个都比较简单，边框和内外边距有需要注意的点，还会引入盒子模型的概念。此外还有5 个html标签特殊使用方法： 图标，链接，列表 ，表单，表格。
1.css代码语法： 选择器+ {属性值：值}；选择器就是选择的对象。{}就是声明的意思。和对象不同，使用；分开。
a.css内联样式：标签+style属性来定义。
<p style="color:red" ></p>
b. 嵌入式样式
c.外部引用样式：rel="stylesheet" type="text/css"是固定不可以修改的。
<link href="base.css" rel="stylesheet" type="text/css" />
2.选择器：
a.标签选择器：html里面的标签。
b.class选择器：class类定义，. + class调用。<span class="stress bigsize">，定义多个class名。
c.id选择器：id类定义，# + id调用。<span id="stressid bigsizeid">不能定义多个id名
d.通用选择器:*选择所有的选择器。
除了以上3个选择器以外，还有一下的关系选择器。
a.子类选择器: （>）。只有第一代后代。（div>p 父元素使div的所有p）
b.后代选择器：空格。 空格作用域元素所有后代。（div p div元素内的所有p）
c.分组选择器：（，）都好。可以给多个标签元素设置同意样式。
d.相邻兄弟选择器（+）：兄弟的同级必须拥有相同的父元素。（div>p 紧随着div之后的元素）
e.通用兄弟选择器（~）
权重：
1权值相同的时候，选择后面的。
2权值不相同的时候，先选择等级高等级，如果同等级，选择数值高的。
3 !important则是无限高。 background-color: yellow !important; yellow 和分号之间先加入！important；
权值等级划分， 一般来说是划分4个等级：
第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；
第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 class | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；
此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；
3.常见样式：
a.文字排版： font
1.字体：font-family:'宋体‘, 2.大小font-size：12px; 3.颜色color：666；
4.斜体：font-style:italic; 5.下划线：text-decoration:underline; 删除线：line-through;
font字体属性简写：font-size，font-family必须写；
b.背景：background
1.指定元素的背景色 background-color: color；
2.背景照片 background-image:url(" ")/ 'image/1.png')
3.背景重复 background-repeat：repeat-x,repeat-y; 只在水平或者垂直方向重复。no-repeat不重复。
4.background-attachmen：fix固定（永远固定在一个地方），scroll滚动。
5.background-position：right，top；
简写background：颜色，imgae位置，重复，位置。
c.轮廓： outline：轮廓是在元素边框之外绘制的，可能会和其他内容重复。并不是尺寸元素的一部分。
1.轮廓形状outline-style: dotted 点状轮廓 2.轮廓宽度 outline-width:2px； 3.轮廓颜色：outline-color:red; 4.轮廓偏移：outline-offset：25px；在指定边框外。
轮廓简写：outline： 5px solid yello；
d.文本排版： text
水平对齐：text-align:center。center：把文本排列到中间。justify：实现两端对齐文本效果。inherit：规定应该从父元素继承text-align属性的值 垂直对齐：vertical-align:middle.bottom。 vertical:top;
文本装饰：text-decoration:none。line-through。
文本转化：text-transform:uppercase; lowercase; capitalize(首字母大写)
文本阴影：text-shadow:2px(水平阴影），2px（垂直阴影);
e.段落排版：
1缩进：缩进2个文字的空白:line-indent:2em 2行间距：行高:line-height:1.5em 3中文文字间隔：letter-spacing:50px。英文文字间隔：word-spacing:50px;
f.不透明度：
opacity：0完全透明，1完全不透明。
img:hover {opacity: 0.1; }和hover配合在一起使用。
g.边框，内边距，外边距（盒子模型）:
0 宽度和高度：height，width。max-width，max-height。 1 边框。border简写：border-width border-style border border-color. border-radius top,right,bottom,left; top，right+left,bottom;
top+bottom,right+left;
2 外边距 ：margin： margin的值：auto（浏览器来计算外边距），px，%，inherit。 margin属性设置为auto，元素在容器水平居中，元素指定宽度，剩余空间在左右边界（父元素容器）平均分配，必须给宽度。 margin外边距合并:可以让段落之间上下边距合并在一起。
a.当两个垂直的外边距相遇，形成更大的外边距。合并的高度=max[margina,marginb] b.如果是嵌套的盒子，内部的div和外部的div是处于同一个行，所有会发生内外边距重合，如果需要上边距，给父元素内填充padding-top；
c.只有普通文档流的垂直外边距才会合并。浮动和绝对定位外边距不会合并。
3 内边距 ：padding：
padding的值：px,%,inherit;
w3c标准盒子模型box-sizing：content-box；width=content；
怪异盒子模型box-sizing：border-box；width=content+padding+border；
补充指定样式：
1.伪类选择器：定义元素的特殊状态（: ）冒号。因为可以给html不存在的标签设置样式，hover：鼠标滑过时候。1悬停状态。2 已经访问和未经访问的样式。3 设置元素获得焦点样式。：hover，：active(点击的时候），：visited，：link，：disabled（被禁用的input），：cheked（被选择的input）。nth-child（2）。
2.伪元素：指定元素部分的样式。元素的首字母样式，插入内容元素内容之前或者之后
：：after。：：before。每一个p元素之前插入内容。
：：first-letter first-line。选择每一个p元素的首字母，首行。
：：selection。选择用户选择的元素部分。
4.样式的继承和覆盖性
继承 ，层叠。
二 中级模块：
1.元素类型：
css的核心就是，把装好样式的标签，进行布局。以上都是单纯css的知识，但是下面的会和html标签结合起来。 每一个HTML元素都有默认的display值，取决于元素类型。
a.行内元素特性：inline
2个：1a（超链接标签）,2span（为了设置单独样式的标签) br ,i,em,strong ,label 1.和其他元素都在一行上。（在一行） 2.元素 高度宽度，行高， 顶部和底部边距 不可以设置。（不设宽高） 3.元素的宽度就是包含文字和图片的宽度，不能改变。（宽度等于文字宽度）
b.块级元素：block。
6个：1 div, 2 p（段落）,3h（标题），4 ol，ul li（无序，有序列表），5table（表格），6form（）。 1.一个块级别从新的一行开始，独占一行。 2.高度，宽度，行高都已经顶和底部都可以设置。设置宽高。 3.宽度不设置，宽度等于父容器。
c.行内块元素：inline-block。
2个:1图片img，2 input(表单） 1.和其他元素在一行。有行内元素的1。 2.可以设置宽高。有块元素的2。
给他们分别加上不同的background，给他们设定一定的width和height你就可以清晰的知道他们属于什么。
标签本身有默认的display，但三者之间可以使用display：属性。自由的切换。
2 布局。主要涉及元素布局，有4个非常重要的属性：显示display，position定位，浮动float，溢出overflow。display确定元素的分类，position确定了定位，溢出，浮动。此外，这个单元会有重点的案例需要学习。还需要理解BFC,IFC的概念。
0 BFC,IFC
a.流动模型：默认情况下都会这样布局。
特点：1 块级元素，自上而下垂直分布，因为默认情况下块级宽度100%，以行的形式占据，主要是块级元素宽度继承父级。2内联元素从左到右显示。
display值。
line：水平菜单：li{display：inline}；
block：垂直链接：a{display:block}
inline-block: 可以填充padding的垂直距离。li{display:inline-block;padding:20px；}一行。且有高度。
none: h1.hidden{display:none};会影响布局。 visibility：hidden不会影响布局。
b. 浮动模型：
1什么是浮动？
答：float创建浮动框，将其移动到左边右边，直到左边缘右边缘 触及包含块，或者另一个浮动框的边缘。
2 浮动的特性？
答：
1 所有元素都可以浮动。
2 浮动元素会脱离标准流：（1） 浮起来，移动到指定位置（2）浮动的盒子不在保留原先的位置。（3）一个盒子一个元素浮动了，理论上其他兄弟元素也要浮动，防止重叠。浮动只会影响后面的标准流，不会影响前面的标准流。
3 浮动元素具有行内块元素的特点：（1） 浮动元素会一行内显示，（如果浏览器变小了，会换行），并且元素顶部对齐。（2）span也具有宽高，行内元素有浮动，不需要转化就有宽度和高度。块级盒子默认宽度和父亲一样宽，但是添加浮动后，它的大小根据内容决定。浮动宽度如何设定。
（3）块级元素的宽度本来等于父元素的宽度，设置浮动一定要设置块元素的宽度（图片和表单本身就有宽度），且浮动几个元素加起来小于容器元素的宽度。行内块如img的宽度为本身。
3 浮动使用场景？
答： a.开始使用：文字混排效果，段落之间插入照片等。 img浮动，后面是p标签那么会漂浮效果，如果是div盒子那么则插入到下面。
b. 网页布局：标准流父元素上下排版，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。浮动元素和标准父级搭配使用。.box li {} li标签1 .box 10 。 .box .class{} 20.li
4 浮动会有什么影响？
1 浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。浮动的元素，会影响后面标准流，所有需要清楚浮动。
.upper {
height: 30px;
float: left;
height: 30px;
width: 30px;
border: 3px solid #73AD21;
}
.outer {
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="upper">
</div>
<div class="outer">
</div>
清楚浮动的办法：
1额外标签法：如果是内部：在内部的末尾加上一个div，clear。<div style="clear:both"></div>.
或者在被浮动影响的盒子加上clear : left / right 。
闭合浮动。孩子会漂浮，很皮。在孩子后面添加一个门，进行闭合。
2隐藏溢出：如果一个元素比包含它的元素高。 父级元素添加overflow。hidden、 auto 或 scroll 。
溢出隐藏。外边距合并。
3 父级after伪元素：清除方法：:after 方式是额外标签法的升级版。
额外标签法的升级： 给父元素添加一个.clearfix属性，+:after.。
4 父级双伪元素：清除浮动：给父元素添加添加一个.clearfix属性。 前面添加一个，后面添加一个。
父元素高度不设定（也就是0），如果父元素包含正常块元素的话那么会撑开父元素。但是如果父元素没有包含块元素，包含的是浮动的，脱离了文档流，父元素高度就会为0。
用 after伪元素清除浮动。其实关于清除浮动的代码主要就是围绕clear:both和如何隐藏content。
<div class="one">
<div class="inner clearfix">
</div>
</div>
c. 层模型：
就像PS里面每一层图片编辑功能，每一层都能精准定位操作。
top、bottom、left 和 right 属性设置之前，必须设置position属性。
a.绝对定位（相对于最近的定位祖先元素)：最近的具有定位属性的父元素进行定位，如果不存在，则相对于body，也就是浏览器窗口。（父元素定位属性除了static，一般都是relative，子绝，父相）
b.相对定位：reletive相对于正常位置。relative。
c.固定定位 fixed。相对于视口定位。sticky粘贴元素。
d.static静态默认的。
定位的层叠顺序：z-index。z就是z轴。
1 只有加了定位属性才有层顶顺序。
2z-index：数值可以是正，负数，0。默认是auto。不能加单位。
3 如果属性相同，那么后来者居上。
4例子：个盒子都是绝对定位，叠加在一起，
1 绝对定位居中：
+了absolute的盒子不能通过margin：0 auto水平居中。
水平垂直居中。
绝对定位：left50%。-定位盒子宽度的一半。
left:50%.让盒子左侧移动到父级元素的水平中那个心位置。
在盒子向左移动自身宽度的一半。
margin-left：-100px;margin的负值就是让自己向左边走。
margin-top:-100px margin-top：-100px;
2
行内元素添加绝对或者固定定位，可以直接设定宽高。
块级元素加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。不在是100%的宽度。
3浮动元素是不同的，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片。浮动产生目的就是文字环绕效果。
如果是absolute，会压住标准流的所有内容。
d.flex布局。
e.布局案例：
导航栏：
下拉菜单：
对齐：
1line-height对单行文本进行垂直居中。
text-align: center；文本居中！
2 padding垂直居中。
3伪元素before实现cs垂直居中。
4 绝对定位居中：
+了absolute的盒子不能通过margin：0 auto水平居中。
水平垂直居中。
绝对定位：left50%。-定位盒子宽度的一半。
left:50%.让盒子左侧移动到父级元素的水平中那个心位置。
在盒子向左移动自身宽度的一半。
margin-left：-100px;margin的负值就是让自己向左边走。
margin-top:-100px margin-top：-100px; 也可以写transform。
绝对定位居中：也可以写transform。
5 flex布局。
6 display：table-cell 和 vertical-align 4 verticle-align
7隐藏节点实现css垂直居中
http://www.dagoogle.cn/n/704.html
https://www.jianshu.com/p/7bbc4860a45c
三 css3：
border， 阴影，2D转换，3D转化，过渡，动画，此外还有分页，多列用户界面等多个案例。需要会背会默写。
2D：
3D:
过渡：
动画：
案例：
1分页：
2多列：
flexbox。
