CSS-编码规范--垂直居中--提示栏

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 ----代码黄金定律

一、前言

在写css时，每次都会遇到是先控制子元素还是先控制父容器；是先把明显的样式写出来（如颜色、背景），还是先控制元素位置等等。自己由于是初学，没有什么固定的书写规范，看一些规范性的文档，来规范自己以后的demo。

二、html篇

优先使用语义化的html
　　对于html的编写，我们应尽量选择语义化的额html，什么是语义化的html呢？简单来说就是，使用合适的标签，标记合适的内容。它们可以帮助程序员更好的理解网站中信息的不同方面。但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

布尔（boolean）型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
如果一定要为其赋值的话，请参考 WhatWG 规范：
如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。简单来说，就是不用赋值。

对于属性值的命名
　　应基于功能命名、基于内容命名、基于表现命名，使表达简略、明了，方便阅读html。

常见的属性值命名
.wrap或.wrapper -- 用于外侧包裹
.container或 .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
aside、sidebar -- 用于侧边栏
.content -- 和header footer 对应，用于主要内容
.navigation -- 导航元素
.pagination -- 分页

.tabs > .tab -- tab 切换
.breadcrumbs -- 导航列表、面包屑
.dropdown -- 下拉菜单
.article -- 文章
.main -- 用于主体
.thumbnail -- 头像，小图像
.media -- 媒体资源
.panel -- 面板
.tooltip -- 鼠标放置上去的提示
.popup -- 鼠标点击弹出的提示

.button、.btn -- 按钮
.ad -- 广告
.subnav -- 二级导航
.menu -- 菜单
.tag -- 标签
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登录

.register -- 注册
.username -- 用户名
.password -- 密码
.banner -- 广告条
.copyright -- 版权
.modal或者 .dialog -- 弹窗

三、CSS规范

语法
tab 用两个空格表示
css的 :后加个空格， {前加个空格
每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
尽量缩写， margin: 5px 10px 5px 10px； -> margin: 5px 10px;

声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual
　　由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

简写形式的属性声明
　　在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：
padding
margin
font
background
border
border-radius
示例：
.element { margin-bottom: 10px; background-color: red; background-image: url("image.jpg"); border-top-left-radius: 3px; border-top-right-radius: 3px; }
　　大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

四、居中有几种实现方式，给出代码范例

水平居中
CSS里实现水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。
demo：http://js.jirengu.com/judofubevu/1/edit
垂直居中
1、利用table-cell的作用和一样，在元素的文本是有规则的左对齐，在默认情况下，其父容器display:table;加上vertical-align:middle;
demo：http://js.jirengu.com/gagitezino
说明：因为父元素的宽度变小了，不像原来是 100% 的宽度。原因是 table 本质上也是 inline 元素，因此现在变成 inline 的父元素，它的宽度将与子元素的宽度相同。当然，我们也可以为父元素加上 width: 100% 来强制指定它的宽度。
2、 利用相对定位和transform
demo: http://js.jirengu.com/qaqarodajo/1/edit
3、利用flex，弹性布局。先将元素定义为弹性容器，其子元素则成为弹性项目。值 flex 使弹性容器成为块级元素。justify-content: center;使元素居中；flex-direction: column;使子元素与父容器主轴起始点一致。不过使用flex，IE11才开始支持。
demo：http://js.jirengu.com/zuzupoquji/2/edit
4、可以使用calc()为一个对象设置一个左右两边相等的外边距，calc()的另外一个用例是用来确保一个域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。
demo：http://js.jirengu.com/fadisucefi/1/edit
5、 绝对定位实现垂直居中利用transform，或者不用，使用margin-left代替也行。只要知道宽高，如果不知道，就用transform。
demo：http://js.jirengu.com/bowaqabafu/1/edit

五、实现如下效果，每种效果都只使用一个html 标签来实现 效果范例

用三种不同的方法，创建相同的样式。
demo：http://js.jirengu.com/vofeyenuzi/5/edit

参考资料：
1、https://google.github.io/styleguide/htmlcssguide.html#General_Style_Rules
2、http://codeguide.bootcss.com/