【前言】
css：层叠样式表(Cascading Style Sheets)，发展历程不过多阐述，此小结还是基于css2.0版本，css负责样式，html负责结构 ，可访问：全栈记03【html小结】 - 简书
【正文】
1、css引入：行内(内联)样式、嵌入样式、外联样式；
<div style="width:100px;height:100px;background-color:pink;"></div>
<link rel="stylesheet" type="text/css" href="css/index.css">
2、选择器：
id 、class、 标签 、通配符*、 父子选择器/派生选择器/后代选择器 、（直接）子元素选择器“>”、属性选择器、并列选择器、分组选择器、伪类、伪元素；
属性选择器：[ id ] { background-color:red; }
并列选择器：多个条件来限定,中间无空格 div.demo { background-color:pink; }
父子选择器：遍历的顺序是从左到右or从右到左，选运行快的就OK，由于是树结构（涉及节点问题），最终选择从右到左的遍历顺序；section div ul li a em{ background-color:red; }
分组选择器：技术规范中如下分行书写
伪类：标签都可以使用
a:hover{color: #ccc}:鼠标移动到链接上；
a:link{color: #ccc}: 未访问的链接；
a:visited{color: #ccc}: 已访问的链接；
a:active{color: #ccc}: 选定的链接；
伪元素： 所有标签元素都含有，有元素结构（行元素），能被css操作，但是结构上并不显示；（清除浮动常用处理方法）
：：before ; ：：after；[一个冒号也OK，系统自动补充]
3、优先级、权重
4、颜色值
颜色：人能看到3种视觉色：红、绿、蓝，技术规范中使用后两者情况多一些
(1).red,green,black;（这些单词称为颜色值的别名，颜色函数）
(2).颜色代码：#ff4400;每两位代表一个原色，16进制【饱和度:00-ff】、【#ff44cc可缩写为#f4c】[#000:黑色；#fff:白色; #f40:淘宝红]
(3).颜色函数：rgb(); rgba(); 0-255范围；
5、居中
单行水平居中：text-align:center/left/right；垂直居中：line-height:值，值等于行高(font-size:12px ;指的是字体的高度而并非是宽度)[行高等于字体高度的1.2倍，line-height:1.2em;(初始值)]
text-indent:2em; 缩进，em等于一个字体，相对单位 1em= 1 * font-size;
原价50元 技术规范中基本不用，web开发标准要求结构、样式、行为相分离，（标签做了css的事情，有些定义模糊），如今很少用到该标签，局限性很强；
text-decoration:underline/none/overline/line-through;
cursor:pointer/help/e-resize;
vertical-align:top/middle/bottm/-1,0,1 (元素的垂直对齐方式)
6、盒子模型：content、border、padding 、margin; (区别于怪异模式下的盒子模型)
(1).代码区：content： width/height;（宽高所指的是内容区）
可视区(标签/元素宽高)： width:content+border+padding;/ height:content+border+padding;
(2).margin的正确理解：margin-left/right的参考物选择，与position:top/left/right/bottom的区别;
(3).padding的正确理解：padding指的是填充，背景图片背景颜色里面是包含padding的，
7、快元素、行内快元素：宽、高、margin/padding都可以设置；行元素如果不加display:inline-block，宽高自适应（内容相关），padding可以设置，margin的left、right可以设置，top/bottom不可设置；
8、border实操：巧妙应用border属性可形成三角形、梯形；(border-color/width是简写属性)
border:1px solid red; 复合属性，可以拆为三个单独属性； width style color;
border-top/left/right 以top为主，对称为辅；border-left/right:光对称不成形，border-top/left/right/bottom:颜色为透明色时可设置三角形（灵活拼凑）；
9、网页布局模型:
(1).流动模型（Flow）：文档流,若父元素设定宽高，则其它元素都以此为参考对象，内容宽高太大超出会溢出盒子；若父元素不设定宽高，子元素会撑开父元素，其的宽高等同于父元素的宽高【即使宽、高为0，那也是父元素设置宽高了】、【自适应现象中：高度是内容撑开，宽度为100%】
(2).浮动模型（Float）：会产生浮动流，浮动流并不完全脱离文档流，和层模型有很大区别（答题时：脱离文档流）
浮动重点：
[1].虽然浮动起来了，但是宽高依旧限定于父元素，有边界，应用场景很nice；
[2].产生浮动流的元素，快级元素看不到他们，顶上去了，但产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素，这里文本类属性的元素就是含有属性inline的，显式隐式都OK，综上，只有快元素看不到浮动元素；
[3].如果有嵌套的父子元素，父元素不设定宽、高，子元素为快元素就会撑开这个盒子，但若是子元素都浮动起来了，那父元素高度则为0，当然可以定义高度来解决，但是在开发中往往盒子是不固定的，所以需要 解决的是如何不加高度，使父盒子包裹住子元素；（清除浮动的方法）
解决方案1：父元素设定高度；
解决方案2：在浮动元素后添加一个块元素：clear:both; <br style="clear:both">
解决方案3：给父元素增添触发bfc的条件：常用的有四个：使用position与float的解决方法，默认是把元素转化为“行内快元素”，【行内块元素不设定宽高时，父元素宽高就是里面子元素的宽高，但若是父元素为快元素时，块元素的宽为100%，高为子元素的高度】第四种就是快元素效果；
1、position:absolute;
2、display:inline-block;
3、float:left/right;
4、overflow:hidden/auto;
解决方案4、使用伪元素的三件套；
综上：方案1局限性太严重，方案2增加不必要的标签，影响html结构;方案3中所提到的bfc类似于一个独立的盒子，独立的进行渲染，盒子内的布局也不影响外部元素，方案4目前是最佳解决方案；
(3).层模型（Layer）图层的感觉，脱离文档流的定位元素；定位：position:fixed/relative/absolute; 脱离文档流，若有父元素，父元素不设定宽、高，里面元素是不会撑开父元素的；
fixed:固定定位，广告区；（常见的有侧边栏定位和网页center位置定位）
absolute:最近的有定位元素的父元素定位，没有则相对于文档；
relative:保留原来位置进行定位；一般作为父元素的定位元素，参考元素（参照物）；[因为其会保留位置，若使用absolute为参考元素，对后续元素影响较大]
z-index：沿着z轴（垂直屏幕），仅能在定位元素上奏效，默认z-index：0，可以是负值；
｛position;absolute;left:100px; top:200px;｝left,top是常用配合，网页布局有关，若是使用right、bottom，元素右边框距离右边，同理底边也是~
