CSS综合13

浅谈编码规范

命名技巧

1. 语义化标签优先
2. 基于功能命名、基于内容命名、基于表现命名
3. 简略、明了（翻译成英文）
4. 所有命名都使用英文小写
5. 命名用引号包裹
6. 用中横线连接

CSS编码规范

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

html编码规范

1. 用两个空格来代替制表符（tab）
2. 嵌套元素应当缩进一次（即两个空格）。
3. 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
   4.不要在自闭合（self-closing）元素的尾部添加斜线
4. 不要省略可选的结束标签（closing tag）（例如，</li>
   或 </body>）

参考网站：

google html css编码规范
bootstrap 编码规范
Naming CSS Stuff Is Really Hard

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

1. padding实现 外围盒子宽高由内部内容撑起来
2. 定位实现水平垂直绝对居中 浏览器窗口可变，内部盒子宽高视内容可变
3. line-height等于inline-block盒子高度 实现垂直居中
4. vertical-align: middle于::before实现垂直居中 内部图片大小在一定范围可变即外围盒子可加载大小可变的图片
5. display: table cell加上vertical-align:middle实现垂直居中
   垂直居中1~3
   垂直居中4~5

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

奇异的边框