2018.07.13学习总结
1.如果将box-sizing设置为borer-box会发生什么？
答：将box-sizing设置为borer-box，设置边框和填充，盒子的宽度不变。
border-box.PNG
2.float
float的原理就是相对于整个页面浮动起来
FLOAT.PNG
float 父元素.PNG
多页面float.PNG
3.练习4个框
4个框.PNG
4.导航条
导航条 nav.PNG
5.命名规范
1.布局相关
| 语义 | 命名 | 简写 |
|---|---|---|
| 盒容器 | wrap | wrap |
| 盒子 | box | box |
| 容器 | container | container |
| 主栏 | main | main |
| 侧栏 | sidebar / aside | sidebar / aside |
| 文档 | doc | doc |
| 头部 | head | hd |
| 主体 | body | bd |
| 底部 | foot | ft |
2.模块相关
| 语义 | 命名 | 简写 |
|---|---|---|
| 导航 | navigation | nav |
| 面包屑 | crumb | crumb |
| 菜单 | menu | menu |
| 选项卡 | tab | tab |
| 标题 | title | title |
| 内容 | content | content |
| 列表 | list | list |
| 表格 | table | table |
| 排行榜 | rank | rank |
| 登陆 | login | login |
| 表单 | form | form |
| 品牌标识 | logo | logo |
| 广告 | advertise | ad |
| 搜索 | search | search |
| 切换 | slide | slide |
| 提示 | tips | tips |
| 版权 | copyright | copyright |
| 按钮 | button | btn |
| 输入 | input | ipt |
| 结果 | result | result |
| 下载 | download | dowload |
| 新闻 | news | news |
| 注册 | register | reg |
| 热点 | hot | hot |
| 展开 | collapse | collapse |
| 警告 | alert | alert |
| 提示 | tooltip | tooltip |
| 下拉 | dropdown | dropdown |
3.状态相关
| 语义 | 命名 | 简写 |
|---|---|---|
| 语义 | 命名 | 简写 |
| 选中 | selected | selected |
| 当前 | current | current |
| 激活 | active | active |
| 显示 | show | show |
| 隐藏 | hidden | hide |
| 打开 | open | open |
| 关闭 | close | close |
| 出错 | error | err |
| 禁用 | disabled | disabled |
| 扩展 | extend | extend |
4.命名规则
4.1驼峰命名
<p class="navWrap"></p>
4.2 划线命名
<p class="nav-wrap"></p>
或
<p class="nav_wrap"></p>
