Flands Blog HomeArchivesTags
页面架构笔记

架构笔记

页面架构

居中布局

平行

  1. 父 display: inline-block 子 text-align:center
  2. 子 display:table;margin:0 auto
  3. 父 position:relative 子 position:absolute;left:50%;transform:translateX(-50%)
  4. 父 display:flex;justify-content:center
  5. 父 display:flex 子 margin:0 auto

垂直居中

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

水平垂直

  1. 父 text-align:center;display:table-cell;vertical-align:middle 子 display: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)

不定+自适应

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

等分

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

等高

  1. 定宽+自适应table方法
  2. 定宽+自适应flex方法
  3. float F,Lpadding-bottom:9999px;margin-bottom:-9999px父overflow: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文件。
  1. 减少文件大小
  • 减少图片大小：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等工具。
  1. 提高页面性能
  • 加载顺序合理，CSS放在head的底部，JS文件放在body的底部。
  • 减少不必要的标签数量。
  • 使用尽可能短的选择器长度。
  • 避免耗性能的属性的使用，比如expression，filter，border-radius，box-shadow,gradients等。
  • 图片设置宽高，比如img标签中设置width和height。
  • 所有的表现尽可能用CSS实现，少用JS实现。
  1. 可读性，可维护性
  • 规范，缩进，变量命名规范，文件命名规范等等。
  • 语义化，尽量用语义化的标签和语义化的命名。
  • 尽量避免Hack，Hack加前缀。
  • 模块化。
  • 注释。

规范

  1. 文件规范
  • 文件分类
  • 通用类 JQ,RESET
  • 业务类
  • 文件引入
  • 行内样式 不推荐，偶尔用
  • 外联
  • 内联
  • 不使用@import
  • 文件本身
  • 文件名 组成方法
  • 编码
  1. 注释规范
  • 块状注释
  • 统一缩进
  • 在被注释对象之上
  • 单行注释
  • 两端空格
  • 在被注释对象之上
  • 行内注释
  • 两端空格
  • 分号之后
  1. 命名规范
  • 分类命名
  • G-全局
  • 命名格式
  • 大小写
  • 长度
  • 语义化命名
  • 以内容语义命名
  1. 书写规范
  • 单行与多行
  • 空格与分号
  • 2 or 4
  • 规则内空格
  • 属性顺序
  • 属性重要性顺序书写(显示属性(位置),自身属性(长度,盒子),文本)
  • Hack方式
  • 加下划线
  • IE6: _
  • IE6/7: *
  • 值格式
  • color: 十六进制
  • url(): 引号
  1. 其他规范
  • 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 克隆一个远程仓库，包括历史
CSS