CSS 综合

1. 说一说你平时写代码遵守的编码规范

• 命名规范
  • 命名用英文小写，中间用中划线链接
  • 命名用引号包裹
  • 命名体现功能，不涉及样式(颜色、字体、边框、背景等)

常见命名	适用场景
.wrap 或 。wrapper	用于外侧包裹
.ct 或 .container	包裹容器
.header	头部
.body	页面主体
.footer	尾部
.aside 或 .sidebar	侧边栏
.main	主体
.nav 或 .navigation	导航栏
.content	主要内容
.article	文章
.dropdown	下拉菜单
.avatar	头像
.meida	媒体资源
.panel	面板
.tooltip	鼠标放置在其上的提示
.popup	鼠标点击后弹出的提示
.btn 或 .button	button按钮
.ad	广告
.subnav	二级导航
.menu	二级菜单
.tag	标签
.message 或 .notice	提示消息
.summary	摘要
.logo	logo
.search	搜索框
.login	登录
.register	注册
.username	用户名
.password	密码
.banner	广告条
.copyright	版权
.modal 或 .dialog	弹窗

• HTML和CSS编码规范
  • 尽量使用语义化标签
  • 尽量减少标签的数量
  • CSS属性换行，而不是放在同一行
  • 为选择器分组时，将单独的选择器单独放在一行
  • css的 : 后加个空格， { 前加个空格
  • 每条声明后都加上分号
  • 颜色用小写，用缩写, #fff
  • 小数不用写前缀, 0.5s => .5s；0不用加单位
  • 尽量缩写， margin: 5px 10px 5px 10px => margin: 5px 10px
• BootStrap编码规范

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

• 无height值时，.parent用padding: 20px 0;就可以了
• 有height值时
  • height=line-height
  • table自带功能
  • div 伪装成 table
  • 100% 高度的 afrer before 加上 inline block
  • margin-top: -50%;
  • translate(-50%)
  • absolute margin auto
  • flex

来自方方老师的忠告：能不写 height 就千万别写 height

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

• code