分类:阅读

一月不读书,智商输给猪。

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 版)

怎样读书

工具比较

  • 纸质书 OR 电子书
    • 纸质书方便前后翻页快速查找,可以在书上做笔记,做各种标记。
    • pdf电子书可以在书上做标记,方便在笔记本上做笔记。
  • thinkpad OR ipad OR kindle
    • ipad和kindle不能方便地做笔记。thinkpad输入速度更快。
  • foxit pdf reader
    • 可以做pdf阅读笔记

阅读方法

纸质书

  • 在书上写笔记,做重点标记。

电子书

  • 将屏幕左右一分为二,左边为电子书,右边打开emacs做笔记
  • emacs用orgmode记录笔记,方便整理和发布blog

orgmode

  • 用orgmode整理笔记,并导出为文本格式。
  • 所有的笔记以orgmode存在svn上。

有道云笔记

  • 将文件内容导入到有道云笔记。可以从手机上,笔记本上,网页上访问。