本文是对CSS基础的简单整理。
参考教程：基础知识一、基础知识二、NEC方案CSS规范
布局演变史、瀑布流布局、 flexbox相关、布局分类
一、NEC规范
========================================================================
第一节：样式分类
1、CSS文件的分类和引用顺序：global公共样式、index特殊样式、skin皮肤样式
2、CSS内部的分类及其顺序：重置和默认、统一处理、布局、模块、元件、功能、皮肤、状态，示例
重置：div,p,ul,ol,li{margin:0;padding:0;}
默认：strong,em{font-style:normal;font-weight:bold;}
统一调用背景图：.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
统一清除浮动：.g-bdc:after,.m-dimg ul:after,.u-tab:after{ display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
布局：.g-sd{float:left;width:300px;}
模块：.m-logo{width:200px;height:50px;}
元件：.u-btn{height:20px;border:1px solid #333;}
功能：.f-tac{text-align:center;}
皮肤：.s-fc,a.s-fc:hover{color:#fff;}
第二节：命名规则
1.使用类选择器，放弃ID选择器
2.NEC特殊字符："-“连字符
3.分类的命名方法：使用单个字母+”-"为前缀
4.后代选择器命名
5.命名应简约而不失语义
6.相同语义的不同类命名
7.模块和元件的扩展类的命名方法
8.模块和元件的后代选择器的扩展类
9.分组选择器有时可以代替扩展方法
10.防止污染和被污染
第三节：代码格式
1.选择器属性和值都使用小写
2.单行写完一个选择器定义
3.最后一个值也以分号结尾
4.省略值为0时的单位
5.使用单引号
6.使用16进制表示颜色值
7.根据属性的重要性按顺序书写：定位布局、盒子模型、文本修饰
显示属性：display、visibility、position、float、clear、list-style、top
自身属性：width、height、margin、padding、border、overflow、min-width
文本属性和其他修饰：font、text-align、text-decoration、vertical-align、white-space、color、background
8.私有在前，标准在后
9.注释格式：注释统一
10.原则上不允许使用Hack
11.统一Hack方法
12.建议并适当缩写值、注意选择器顺序等级
第四节：优化方案
1.值缩写：并增加可读性和可维护性
2.避免耗性能的属性：expression、filter
3.选择器合并
4.背景图优化合并：图片本身、多张图片、分类合并、Hack的避免
5.如果CSS可以做到，就不要使用JS
6.便于阅读修改
7.清晰的CSS模块
8.文件压缩
附录：最佳选择器写法（模块）
.m-nav{}模块容器
.m-nav li,.m-nav a{}先共性 优化组合
.m-nav li{}后个性 语义化标签选择器
.m-nav a{}后个性中的共性 按结构顺序
.m-nav a.a1{}后个性中的个性
.m-nav a.a2{}后个性中的个性
.m-nav .z-crt a{}交互状态变化
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}典型后代选择器
.m-nav .btn-1{}典型后代选择器扩展
.m-nav .btn-dis{}典型后代选择器扩展（状态）
.m-nav .btn.z-dis{}作用同上，请二选一（如果可以不兼容IE6时使用）
.m-nav .m-sch{}控制内部其他模块位置
.m-nav .u-sel{}控制内部其他元件位置
.m-nav-1{}模块扩展
.m-nav-1 li{}
.m-nav-dis{}模块扩展（状态）
.m-nav.z-dis{}作用同上，请二选一（如果可以不兼容IE6时使用）
附录：统一语义理解和命名：语义 命名 简写
1.布局（.g-）
文档：doc doc
头部：head hd
主体：body bd
尾部：foot ft
主栏：main mn
主栏子容器：mainc mnc
侧栏：side sd
侧栏子容器：sidec sdc
盒容器：wrap/box wrap/box
2.模块（.m-）、元件（.u-）
导航：nav nav
子导航：subnav snav
面包屑：crumb crm
菜单：menu menu
选项卡：tab tab
标题区：head/title hd/tt
内容区：body/content bd/ct
列表：list lst
表格：table tb
表单：form fm
热点：hot hot
排行：top top
登录：login log
标志：logo logo
广告：advertise ad
搜索：search sch
幻灯：slide sld
提示：tips tips
帮助：help help
新闻：news news
下载：download dld
注册：regist reg
投票：vote vote
版权：copyright cprt
结果：result rst
标题：title tt
按钮：button btn
输入；input ipt
3.功能（.f-）
浮动清除：clearboth cb
向左浮动：floatleft fl
向右浮动：floatright fr
内联块级：inlineblock ib
文本居中：textaligncenter tac
文本居右：textalignright tar
文本居左：textalignleft tal
垂直居中：verticalalignmiddle vam
溢出隐藏：overflowhidden oh
完全消失：displaynone dn
字体大小：fontsize fs
字体粗细：fontweight fw
4.皮肤（.s-）
字体颜色：fontcolor fc
背景：background bg
背景颜色：backgroundcolor bgc
背景图片：backgroundimage bgi
背景定位：backgroundposition bgp
边框颜色：bordercolor bdc
5.状态（.z-）
选中：selected sel
当前：current crt
显示：show show
隐藏：hide hide
打开：open open
关闭：close close
出错：error err
不可用：disabled dis
二、网站布局
========================================================================
第一节：主要用到的属性：定位、浮动、布局、盒子模型
position：static | relative | absolute | fixed
z-index: auto | <integer>
方向值 top right bottom left
float:left | right;
clear:left | right | both;
display:none | inline-block | block | flex;
visibility:visible | hidden;
overflow:hidden | scroll | auto;
传统：content + padding + border + margin
弹性：box-sizing ie8+
第二节：布局模式：按类型分类
1、无任何布局
时间：1990.12.20
内容：文字和图片为主
技术：基于HTML，Document
2、表格布布局模式：使用 DW 技术生成
3、定位布局
优点：快速达到想要的布局效果
局限：需要明确指定元素的大小、需要明确计算元素位置坐标、难于维护
4、浮动布局
曾经的主流布局，知道flexbox布局的出现和移动端的兴起
2004年 《网站重构》 带来的局限性
1.有table标签，就不符合 W3C 规范
2.div+css泛滥，整个页面都是div几乎找不到p、span等
*演变：静态布局、流式布局、自适应布局、响应式布局
*经典：实现三栏布局的“圣杯”和“双飞翼”
圣杯布局
左、中、右。中间的宽度为100%，独占一行。
使用负边距（margin-left）把左右两列拉到和中间列同一行。
左列使用margin-left:-100%。右例使用margin-left: -右列宽度。
同时左、中、右三列的容器设置左右padding来给左右两列留下相应宽度（左、右列宽度）
双飞翼布局
双飞翼布局和圣杯布局类似，也是左，中，右三列，中列里面会再套一个容器。
中列宽度设置为100%。使用负边距margin-left把左右两列拉到和中列同一行。
在中列内的容器div设置margin-left和margin-right给左右两列留下对应的空间。
5、多列布局：Multi-column 布局模块
功能：定义栏目的最大宽度、定义在多栏目之间的间距、在多个栏目中平均分配好显示的内容
*应用：瀑布流布局
*6、Flexbox 布局
解决：尤其移动端，内容的伸缩与扩展、垂直居中、等分列、等高列
*7、Grid 布局（网格布局）
思路来源：表格
最早网格系统：960gs，基于浮动布局
8、不规则布局： Shapes 模块
作用于印刷媒体
第三节：布局模式：按功能分类
1、静态布局 Static Layout
介绍：传统web设计，使用px做单位
特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示
PC端：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，
使用横向和竖向的滚动条来查阅被遮掩部分,设置min-width。
移动端：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.
方式1：在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。
通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕
方式2：设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个
元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。
优点：最简单的，没有兼容性问题
缺点：不能根据用户的屏幕尺寸做出不同的表现
2、流式布局 Liquid Layout
说明：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）
主要划分区域的尺寸用百分比，搭配min-、max-
*如网页主体 宽度80%，min-width为960px
*图片类似处理 width:100%;max-width:图片本身的尺寸;防止被拉伸而失真
布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素
的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动
范围以免过大或者过小影响阅读
*缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示
3、自适应布局 Adaptive Layout
说明：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围
布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化
设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式
4、响应式布局 Responsive Layout
目标：确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，流体和自适应的融合
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变
设计方法：媒体查询+流式布局，通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。要匹配足够多的屏幕大小，
工作量不小，设计也需要多个版本。
5、弹性布局 rem/em布局
1.单位选择：rem,em区别，em是相对其父元素，rem是相对于根元素
使用这种单位进行相对布局比%更加灵活，支持浏览器的字体大小调整和缩放等的正常显示
2.布局特点：使用rem做单位，可以使包裹文字的元素随着文字的缩放而缩放
3.使用rem控制字体，先要设置根节点html的字体大小，浏览器默认16px，多设置成62.5%
4.能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）
5.使用rem单位的弹性布局在移动端也很受欢迎
第四节：常用布局实现
1.一列布局
web端：内容过少时底部固定，过多时正常排列
wap端：上下固定，中间滚动
2.两列布局
方法1.Float + BFC
方法2.Flexbox: 弹性布局的方法
3.三列布局
基础：实现PC端一列布局
方法1.BFC：BFC不会和浮动元素重叠，只有该方法主体放在最后
方法2.绝对定位：简单，均使用绝对定位
方法3.圣杯：配合relative使用，然后通过负值margin进行调整
方法4.双飞翼布局：与圣杯布局的差别在于多了一个div，实现的思路不一样
第五节：建议
1.其实在移动端使用所谓的弹性布局，是比较勉强的，使用vw、vh等后起之秀的单位，可以实现完美的流式布局
2.只做pc端，那么静态布局（定宽度）是最好的选择
3.做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定
4.pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择