ubuntu DNS 更新失败问题

把 linode 托管机房从 Fremond 换成了 Tokyo2,IP 也变了。但是从 linode 服务器上 ping fengjian.info 时,IP 一直没有更新。

开始以为是各个地域 IP 更新时延不同。一段时间后,本地 PING 都正常了,但 linode 上 PING 还是未更新。

多次查看了 linode DNS 管理界面,配置没有问题。

执行 DNS 清除命令,IP 还是未更新。

/etc/init.d/dns-clean start

会不会是有 host ip 静态设置?在 /etc 目录下,查找原 IP 地址:

grep -n "1.2.3.4" -r /etc

果然在 /etc/hosts 文件中,静态配置了 fengjian.info 的 IP 地址。把该行删除,再 PING,结果正常。

emacs25.1 org2blog 发布中文出错问题

使用 org2blog 发布博客时,提示出错信息如下:

error in process sentinel: url-http-create-request: Multibyte text in HTTP request: POST /xmlrpc.php HTTP/1.1

依次排查了以下可能的原因

  • 网络代理
    • 换成全局代理 podvpn,还是无法正常发布。
    • 使用 linode 上的 emacs,把 blog 文件复制过去,也无法正常发布。
  • wordpress 设置

    早上刚安装了 Disable comments 插件,该插件会禁用 ping 功能,会不会与此相关。麻烦的是,该插件写数据库,并且删除插件时不还原数据库,所以只能对整个 wordpress 进行还原。刚好前两天有个备份,花了点时间,可以正常还原。但问题还在。

  • emacs 插件升级

    将 emacs packages 还原到最后一个备份,不能解决问题。

  • 其它线索
    • linode 和 dell 电脑上的 emacs 无法正常发布 blog,但是 x200 上的 emacs 可以正常发布 blog。
    • 在出错信息中,中文被转换成了 unicode 数字形式。
    • 发布的博客中,如果没有中文,可以正常发布。

最后,从 github org2blog 官方问题列表中,搜到了 Issue 223 。该问题是 emacs25.1 引入的,一个 bugfix 导致了 multibyte http request 问题。

解决方法,修改 url-http.el 文件,注释掉以下几行,并 byte-compile

;; Bug#23750
; (unless (= (string-bytes request)
;            (length request))
;   (error "Multibyte text in HTTP request: %s" request))

CSS 学习笔记

css 样式

背景

字体

文本

链接

列表

表格

其它属性

CSS 选择器

元素选择器

类选择器

ID 选择器

组合选择器

后代选择器

子选择器

兄弟选择器

伪类和伪元素

CSS 框模型

边框

outline

内边距

外边距

外边距合并

CSS 定位

相对定位

绝对定位

浮动

CSS 布局

display 属性

block

  • block 元素会独占一行,多个 block 元素会各自新起一行。
  • 默认情况下,block 元素宽度自动填满其父元素宽度。块级元素即使设置了宽度, 仍然是独占一行。
  • block 元素可以设置 width,height 属性。
  • block 元素可以设置 margin 和 padding 属性。

inline

  • inline 元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  • inline 元素设置 width,height 属性无效。
  • inline 元素的 margin 和 padding 属性,水平方向的 padding-left, padding-right, margin-left, margin-right 都产生边距效果。但竖直方向的 padding-top, padding-bottom, margin-top, margin-bottom 不会产生边距效果。

inline-block

  • 简单来说就是将对象呈现为 inline 对象,但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个 link(a 元素)inline-block 属性值,使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

vertial-align: middle

作用于不同元素

  • 作用于 table-cell,可以垂直居中显示
  • 作用于 inline, 类似于<img>标签的 align 属性,控制 baseline
  • 作用于其它元素,不起作用

方法

  • 使用定位
<style type="text/css">
  #myoutercontainer { position:relative }
  #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
  <div id="myinnercontainer">
    <p>Hey look! I'm vertically centered!</p>
    <p>How sweet is this?!</p>
  </div>
</div>
  • 单行文字,固定高度
<style type="text/css">
  #myoutercontainer2 { line-height:4em }
</style>
<p id="myoutercontainer2">
  Hey, this is vertically centered. Yay!
</p>

参考书籍

  • W3C School (CSS)
  • CSS 权威指南(第 3 版)
  • CSS 揭秘
  • 精通 CSS:高级 Web 标准解决方案(第 2 版)

chrome console 使用方法

  • 类选择器,输出一个数组
$$("body main article header div a")
  • 对输出数据进行 forEach 操作
$$("body main article header div a").forEach(function (e) { console.log(e.innerText); })