css精通 高级web标准解决方案

一:基础知识:web标准化、规范化
1.由混乱的html，如font，web设计者给这个阶段取了个名字”标签汤“
2.从可维护性出发，对html进行了关注点分离:为了解决标签汤，css作为解决方案出现了：从html中拆除html+css，让结构与表现分离。所以之前font之类的表现型标签都不可用了，而表格布局也被逐步取代。
(什么是web)
3.应该使用哪个版本:web技术开发,html、css设计
4.div和span:那么这两个无语义的标签是否就要淘汰了？不-用作wrap
二:添加样式:样式取名规范化和样式冲突解决办法
1.如何接入:接入点id，class
1.2id用来标定模块的特定实例，重点讲clss
2.css选择符-如何给样式取名
3层叠
4.特殊性:特殊性与调试
5.继承
6.性能
三:可见格式化模型:元素可视化
1.display不为none的即为可见格式化模型，也就是盒子，当display为none时，浏览器不会为元素生成盒子
2.浮动、定位、盒模型决定了元素在页面上排序和显示的方式
3.内容盒子:width\height
4.元素盒子:边框+内边距，解决办法:改为怪异盒子模型，这让计算盒子大小更直观
5.盒子大小:元素盒子以及他的外边距
6.不同的定位模型与对于的包含块
6.1由百分比引出包含块，包含块是这些百分比值的计算依据，那么如何确定元素的包含块(一般情况下，width、height、margin和padding的值为百分比时，根据该元素的父亲来计算)
6.2确定一个元素的包含块要看元素是如何定位的。其中，static的包含块是离他最近的父元素，relative是它父亲，position是除static以外的定位祖先。(position难以进行自适应和响应式布局，在整体布局上几乎没人用)
6.3:z-index
7.浮动，若浮动元素们的高度不同则卡住，在浮动前面的，左浮会盖住标准流，并且如果浮动元素后面的盒子内含有文本内容，则文本会根据浮动元素大小来避开他，行成环绕。(虽然浮动脱离文档流)”浮动元素会导致后面的行盒子缩短，从而达成文本环绕效果“
四.网页排版:如果是报纸，那么文字、内容排版很重要
1.字体、行高、单位、行间距、对齐、行盒子
2.web字体及加载、文本特效(阴影)
五:漂亮的盒子
强调css标准化、规范化是因为css太自由了
1.图片，PNG、SVG
2.SVG:是绘制图形的指令
3.透明度、边框、圆角、阴影、盒阴影
4.色轮和rgb():0-255，rgba与opcity透明
5.渐变:线性渐变、放射渐变，css绘图
6.图片的放大与缩小
六、内容布局
1.所有的内容块会进一步组织成整个页面的布局，但本章仍只聚焦于个别的内容块
2.移动、折行、空白与水平布局，居中
七、页面布局与网格
1.固定布局、弹性布局(指em这样的:相对单位+min/maxwidht)、流式布局(块级元素没有固定宽度，其尺寸随可用空间大小变化，是web的默认模式)
2.这样能响应环境的叫做响应式Web设计