CSS 外边距合并

CSS HTML inline-block

外边距合并是CSS中一个特殊的概念。当两个外边距相邻时,它们会合并为较大的那一个。 无论是相邻元素的上下边距,还是父子元素的上边距,甚至是同一元素的上下边距。

相邻元素

当两个元素上下相邻时,上面的下外边距会与下面元素的上外边距会合并。

contain@2x

如果元素左右相邻呢?一个典型的场景是几个inline-block元素并排显示。 但inline-block元素的外边距是不合并的,它们会保持自己的间隔。

inline-block的上下外边距仍然是不起作用的,因为它们是行内元素呀!

DOCTYPE的作用:文档类型与浏览器模式

DOCTYPE HTML DTD XML SGML

DTD(document type definition,文档类型定义)是一系列的语法规则, 用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。

事实上DTD可以定义所有SGML语族的文档类型,但由于太过繁琐, XML Schema反而更加流行。

多数HTML编辑器都会为我们添加一行DOCTYPE声明,但DOCTYPE却是我们最容易忽略的部分。 下面我们会看到,DOCTYPE声明并不是可有可无的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

jQuery社会化分享:支持微信、微博、Github...

CSS Github HTML JavaScript jQuery 微信 二维码

一个既美观有支持微信的社会化分享工具:harttle/social-share。 支持微信(二维码)、微博、Github、Google+、LinkedIn、Twitter、Facebook、RSS…, 支持四种大小设置。

最近在天码营和本博客中添加社会化分享,调研和尝试了不少第三方工具。 国内最方便的应当是jiathis,然而并不美观。国外的工具基本都没有微信(二维码)的支持。 于是诞生了 harttle/social-share

用Ag/Ack在Vim中搜索项目代码

Vim-Practice Vim Vundle grep 快捷键

Ag(The Silver Searcher)和Ack都是 CLI 的全局搜索工具,其中Ag更快一些,而Ack也比Vim自带的grep快很多。这些工具的Vim插件可以通过Vim Quickfix窗口来提供代码搜索的结果。 本文便来详细介绍如何在Vim中使用Ag全局搜索。

那么什么是Quickfix窗口呢? Quickfix是Vim的一个特殊编辑模式,该模式的提出最初是受启发于Aztec C编译器: 把编译错误写入一个文件中,然后从这个文件一一跳转到对应出错的源文件。

如何使用 CSS 截断文本?

CSS HTML 盒模型 text-overflow overflow line-clamp 优雅降级 inline

在很多UI设计中会限制文本长度,这时需要我们适当地截断文本显示省略号。 同时响应式布局也要求动态的文本长度,在大屏幕中显示较长文本,而在小屏幕中显示较少文本。 显然用CSS比JS能够更简洁地完成这项工作。 下文介绍了对单行/多行文本如何进行截断,以及何种情况下截断不起作用。先看图:

@2x

上一页 下一页