css 定位属性

元素的 position 属性使元素在文档布局中进行定位。

定位属性

static 属性是 position 的默认属性,另外还有 relative, absolute, fixed, inherit。定义 position 属性以后可以通过 top, left, bottom, right 控制元素在文档中的位置

static 默认定位

static 属性是 posistion 的默认属性,元素出现在文档流中 top, left, bottom, right 属性无效

relative 相对定位

relative 属性使元素相对自身进行定位, 元素不脱离文档流

阅读更多
HTTP 缓存机制

HTTP 缓存机制通过重用已获取的资源,减少网络延迟和资源等待时间来提升 Web 性能。常见的 HTTP 缓存只能存储GET响应,缓存的关键主要包裹 request method 和 URI。

缓存相关字段

HTTP中与缓存相关的头部信息

通用头部字段

字段 描述
Cache-Contrl 控制缓存行为
Progma http1.0,现代浏览器默认设置用于兼容

请求头部字段

阅读更多
css 外边距合并

问题

当两个块级元素的上外边距和下外边距发生合并为一个外边距,取值为其中的最大值,这是情况叫外边距合并margin 崩塌 折叠

什么时候发生崩塌

相邻的两个节点的外边距会合并

阅读更多
css 盒模型

CSS 盒模型

css 中使用盒模型来描述元素所占空间的内容。分别是内容区域、内边框、边框、外边框。以下是盒模型图:

CSS盒模型

阅读更多
css 结构和层叠

特殊性值

CSS 可以对一个元素使用两个或多个规则, 每个规则都有自己的选择器. 例如:

1
2
h1 { color: red; }
body h1 { color: green; }

h1 对应着两个规则, 但是只有一个规则生效, 通过 css 特殊性值来计算

选择器 特殊性值
包含ID 0, 1, 0, 0
包含类,属性, 伪类 0, 0, 1, 0
包含元素和为元素 0, 0, 0, 1
内联样式 1, 0, 0, 0

上一个规则的特殊性值为

1
2
h1 { color: red; } /* 0, 0, 0, 1*/
body h1 { color: green; } /* 0, 0, 0, 2*/

所以h1的字体颜色显示为绿色

阅读更多
css 选择器

css 通过选择器精确定位 HTML 元素。我们可以通过 css 选择器改变 HTML 的样式.

1
2
3
div {
background-color: red;
}

div是一个选择器, 紧跟着 css 的声明块, 其中 background-color表示属性, red表示属性的值.

阅读更多
mysql 常用命令

因为项目中使用 orm, mysql 一些常用的命令都模糊了, 在此记录下 mysql 常用命令方便随时查看.

库操作

对库的一些操作

创建数据库

1
create database `db_name` default character set utf8;

删除数据库

1
drop database `db_name`;

表操作

对表的一些操作

创建数据表

创建一个user的数据表

1
2
3
4
5
6
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) DEFAULT '' COMMENT '用户名',
`password` varchar(255) DEFAULT '' COMMENT '密码',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
阅读更多
vim zsh 增强命令行

使用 vim 插件来增强终端下的编辑能力, 使用 zsh 替换 bash 提升自动补全

安装 vim 和插件管理器 vundle

vundle 包管理, 可以轻松的安装 vim 插件, 首先安装 vundle

1
2
mkdir -p ~/.vim/bundle/vundle
git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle

添加 vim 配置, 在用户主目录下创建.vim并编辑内容

阅读更多
docker 安装与配置

安装 docker

使用官方的配置脚本, 在 centos 上安装 docker

1
2
curl -fsSL get.docker.com -o get-docker.sh
sh get-docker.sh --mirror Aliyun

启动 docker

1
2
systemctl enable docker
systemctl start docker

测试 docker

通过下载镜像来测试 docker 是否正常运行

1
docker run hello-world

加速 docker

因为网络原因国内下载 docker 镜像会非常缓慢, 可以通过配置阿里云镜像加速 docker

1
2
3
4
5
6
7
8
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": ["https://xxxxx.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

可以通过docker info命令查看镜像源是否换成了国内的


基于Token认证的公共Api接口设计

公共 API 通过设计 token 和 sign 等方法,保证接口安全.

基于 token

客户端通过服务器设置的规则访问特定 url 获取 token

1
2
3
4
5
6
7
8
9
10
11
12
http://host/api/v1/token?app_id=xxx&app_secret=xxx
# 也可以通过post方法获取
{
"app_id": xxx,
"app_secret": xxx,
}

# 服务端返回值
{
"access_token": "kkIs5V9uTri6",
"expires_in": 7200
}

之后访问别的 API 接口可以通过参数上传 access_token 来保证访问

阅读更多