页面架构笔记

架构笔记

页面架构

居中布局

平行

  1. display: inline-blocktext-align:center
  2. display:table;margin:0 auto
  3. position:relativeposition:absolute;left:50%;transform:translateX(-50%)
  4. display:flex;justify-content:center
  5. display:flexmargin:0 auto

垂直居中

  1. display:table-cell;vertical-align:middle
  2. position:relativeposition:absolute;top:50%;transform:translateY(-50%)
  3. display:flex;align-items

水平垂直

  1. text-align:center;display:table-cell;vertical-align:middledisplay:inline-block
  2. 绝对定位方法
  3. flex方法,上面的4+3

CSS3新增

  1. 完全居中position:absolute;top: calc(50% - 3em);left: calc(50% - 9em);width: 18em;height: 6em;
  2. vw = 视口宽度的1%,vh同理高度width: 18em;margin: 50vh auto 0; transform: translateY(-50%);

多列布局

定宽+自适应

  1. leftfloat:leftrightfloat:right;margin-left:-100pxright-1margin-left:120px兼容性好
  2. 清除浮动,不环绕overflow:hidden
  3. display:table;table-layout:fixed;(布局优先,优化速度) L,R display:table-cell L设置宽度,间隙用padding
  4. 父flex,rightflex:1(剩余宽度分配给right)

    不定+自适应

  5. 上2可实现
  6. table实现。left随内容宽度变化,去掉fixed,leftwidth:0.1%(兼容)left pwidth:200px
  7. 上4

    等分

  8. margin-left:-20pxfloat:left;width:25%;padding-left:20px;box-sizing:border-box;
  9. 父元素的父添加margin-left:-20px父使用table,子display:table-cell;padding-left:20px
  10. flex,子flex:1,间隙用新增class{margin-left}

    等高

  11. 定宽+自适应table方法
  12. 定宽+自适应flex方法
  13. float F,Lpadding-bottom:9999px;margin-bottom:-9999pxoverflow:hidden

响应式

viewpoint

<meta name="viewport" content="width=device-width"(设备宽度),initial-scale=1.0(禁止缩小,user-scalable=no(禁止手动缩放))/>

@media

1
2
@media screen and (max-width:320px){/*宽度<=320px*/ .a{直接更改}}
(min-width:769px{视窗宽度>=769px生效}

页面优化

  1. 减少请求
    • 图片分类合并。
    • 减少CSS文件请求:a.多个CSS文件合并为一个。b.少量CSS样式内联。c.避免使用import的方式引入CSS文件。
  2. 减少文件大小
    • 减少图片大小:a.选择合适的图片格式PNG或者JPG。b.用工具无损或者有损的压缩图片,比如ImageOptim,ImageAlpha,JPEGmini等工具。
    • CSS值缩写,比如margin,padding,border,border-radius,font,background等
    • 省略值为0的单位,0px,0%,0.5省略为0, 0,.5
    • 颜色值最短表示,#333这种。
    • CSS选择器合并。
    • 文件压缩工具去掉空格,减少文件大小。比如YUI Compressor,cssmin等工具。
  3. 提高页面性能
    • 加载顺序合理,CSS放在head的底部,JS文件放在body的底部。
    • 减少不必要的标签数量。
    • 使用尽可能短的选择器长度。
    • 避免耗性能的属性的使用,比如expression,filter,border-radius,box-shadow,gradients等。
    • 图片设置宽高,比如img标签中设置width和height。
    • 所有的表现尽可能用CSS实现,少用JS实现。
  4. 可读性,可维护性
    • 规范,缩进,变量命名规范,文件命名规范等等。
    • 语义化,尽量用语义化的标签和语义化的命名。
    • 尽量避免Hack,Hack加前缀。
    • 模块化。
    • 注释。

规范

  1. 文件规范

    • 文件分类
    • 通用类 JQ,RESET
    • 业务类
    • 文件引入
    • 行内样式 不推荐,偶尔用
    • 外联
    • 内联
    • 不使用@import
    • 文件本身
    • 文件名 组成方法
    • 编码
  2. 注释规范

    • 块状注释
    • 统一缩进
    • 在被注释对象之上
    • 单行注释
    • 两端空格
    • 在被注释对象之上
    • 行内注释
    • 两端空格
    • 分号之后
  3. 命名规范

    • 分类命名
    • G-全局
    • 命名格式
    • 大小写
    • 长度
    • 语义化命名
    • 以内容语义命名
  4. 书写规范

    • 单行与多行
    • 空格与分号
    • 2 or 4
    • 规则内空格
    • 属性顺序
    • 属性重要性顺序书写(显示属性(位置),自身属性(长度,盒子),文本)
    • Hack方式
    • 加下划线
    • IE6: _
    • IE6/7: *
    • 值格式
    • color: 十六进制
    • url(): 引号
  5. 其他规范

    • HTML规范
    • 文档声明
    • 闭合: 自闭合标签
    • 属性
    • 层级: 缩进,正确嵌套
    • 注释
    • 大小写
    • 图片规范
    • 文件名称:语义,长度
    • 保留原文件
    • 图片合并:尽可能用sprite,按类型划分

git命令

git config

  • 用户配置 git config –global user.name “name” git config –global user.email aa@qq.com
  • 配置级别
    • –local[默认,高优先级]:只影响本仓库
    • –global[中优先级]: 影响到所有当前用户的git仓库
    • –system[低优先级]: 影响到全系统的git仓库

$ git status 检测是否有仓库
$ git init 创建仓库

git status

  • 内容状态

    • 工作目录
    • 暂存区
    • 提交区
  • 文件状态

    • 未跟踪
    • 已跟踪

git add

$ git add .添加当前目录下所有文件
.gitignore 忽略匹配的文件

git rm

git rm --cached仅从暂存区删除
git rm 从暂存区与工作目录删除
git rm $(git ls-files --deleted) 删除所有被跟踪但在工作目录被删除的文件

git commit

git commit 将暂存区内容提交至提交区
git commit -a 工作目录直接提交至提交区

git-log

记录提交记录
git config --global alias.shortname "(将要缩短的命令)" alias自定义命令
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(boldblue)<%an>%Creset' --abbrev-commit"

git diff

git diff 显示版本差异
git diff --cached[<reference>] 暂存区与某次提交差异,默认为HEAD git diff <reference> 工作区与某次提交差异

改动

  • git checkout – 将文件内容从暂存区复制到工作目录
  • git reset HEAD 将文件内容从上次提交复制到暂存区
  • git checkout HEAD – 撤销全部改动,将上次提交复制到工作目录

git分支操作

  • git branch 创建分支
  • git branch -d 删除分支
  • git branch -v 显示所有分支信息
  • git branch next 指向的对象上创建引用
  • git checkout -b 创建分支并切换
  • git checkout - 回到上一个分支
  • git reset 回退到某个版本
  • git reset –mixed 回退到某个版本
  • git reset –HEAD 复制到工作目录区
  • git reset –soft
  • git reflog 打印经过的路径
  • git stash 保存工作目录和暂存区状态,并返回到干净的工作目录
  • git merge 合并分支
  • git rebase 修剪提交历史的基线

远程操作

  • git remote -v 添加远程仓库别名
  • git fetch + merge 提交历史
  • git pull = fetch + merge
  • git clone 克隆一个远程仓库,包括历史