CSS

CSS 布局基础知识

# 布局

网页的布局是面向文档流的,也就是每个元素默认都是从左到右,从上到下依次排列的。当然就像文章一样,有些元素比如标题默认就会另起一行,并且单独占据这一行。

所有的元素都分为三类:inline、inline-block、和 block。

其中 block 元素占据了一行的位置,即使他们的宽度不够一行,并且他们有自己的宽度和高度,比如 h1 元素。

inline-block 结合了 inline 和 block 元素的特性,首先他布局是 inline 的,也就是不会另起一行,但是又可以设定单独的高度和宽度。

`display: none` 将会完全不渲染该元素, `visibility: hidden` 会渲染这个元素,只是在该显式的地方留下空白

## 使用 inline-box 的布局

![](https://ws1.sinaimg.cn/large/006tKfTcly1fquqqp791hj30kr0i1gpe.jpg)

# 定位

CSS 中元素的定位有如下几种,可以使用 position 指定

方法 | 说明
—-|—-
static|默认的定位方法,指的是在文档中的位置是静态的
relative|relative to its static positions, if set(top, left, bottom, right)
fixed|fixed to the viewport, if set(top, left, bottom, right)
absolute|behaves like fixed, but relative to nearest non-static ancestor
float|floated element will become a block element, but it will not occupy one row

使用 float 的布局

![](https://ws3.sinaimg.cn/large/006tKfTcly1fsktnrsi5dj30kc0hp781.jpg)

### 后续元素没有占据指定空间

元素浮动之后,它后面的元素就会去占据它的位置,然而我们往往并不想影响到后面的元素,所以应该指定它后面的元素清除浮动。

not stretching parent element
floating elements will also not stretching the element containing it, to fix that, add overflow: auto to the parent element

# 盒模型

## 讨厌的 content-box 模型

width set width of the content, and

* padding will push out the border…
* background-color only set for content area
* entire width is for border

![](https://ws3.sinaimg.cn/large/006tKfTcly1fqurrspk7ej30ah09gq39.jpg)

## 符合直觉的 border-box 模型

as shown by the picture, border-box width sets the entire width, contains border + padding + content

如下图所示,border-box 模型设定的快读包含了 **border + padding + content**

![](https://ws4.sinaimg.cn/large/006tKfTcly1fqurs7z1chj30ge094wgg.jpg)

# responsive design

query device width

“`
@media screen and (mid/max-width: xxxpx)
“`

set viewport

“`

“`

# 记录 CSS 的一个坑

## 在 td 元素上无法使用 width

可以通过指定: table-layout: fixed 解决

## centering

“`
margin: 0 auto;
“`

## css columns

“`
column-count: x;
column-gap: xpx;
“`

## 通过 js 获得最终 CSS 属性

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

# reference

[1] http://learnlayout.com

[译] CSS 选择器备忘录(cheatsheet)

这两天打算写写爬虫,准备用 css 选择器来抽取内容,翻译了[一篇文章](http://butlerccwebdev.net/support/css-selectors-cheatsheet.html),正好复习一下,这篇文章遵守 CC-BY-NC-SA 协议。

大多数的 web 开发者首先学会了 CSS。因为给 HTML 元素写样式规则的元素选择器都很容易理解和记忆。经过一点点练习之后,就会发现成组的 CSS 表达式非常的有必要,比如使用一个逗号分隔开选择器,就可以把同一个样式属性附加到不同的多个元素了。

使用标签选择器和分组的选择器当然也有不足,那就是他们会应用到所有的标签。很快你就会意识到有时候需要给一个特定的元素加上样式。对于大多数开发者来说,最简单的选择当然是使用 class 和 id 选择器了。但是很遗憾的是这样下去的话,整个页面就会充满各种奇奇怪怪的类了。

除了不管的给 HTML 添加纯粹用于应用样式的 class 和 id 之外,你也可以考虑使用高级的 CSS 选择器来给指定元素应用样式。高级的选择器大致可以分类为上下文选择器、属性选择器、伪元素选择器和伪类选择器。

# 元素选择器

元素选择器把样式应用到所有选中元素上,也是被使用最广泛的选择器

选择器 | 语法 | 描述
——-|—–|———
元素 | `h2` | 选择页面上的所有 h2 元素,`h2 {text-align: center;}` 会把所有 h2 元素的文本居中对齐
分组 | `h1,h2,h3` | 选择页面上所有的 h1, h2, h3 元素,`h1, h2, h3 {margin-bottom: .5em;}` 将会把 h1, h2, h3 标签的底部 margin 设置成 0.5 em

# class 和 id 选择器

Class 和 id 选择器是你能够把某些属性应用到个别元素上而不影响其他的。Class 让你能够按照概念分类。两个或者更多元素可以属于同一个组。id 给一个元素一个唯一的标识,同一个 id 每个页面上只能使用一次。

选择器 | 语法 | 描述
——-|—–|———
Class | `.warning` `p.warning` | 前者选择所有属于 warning 类的元素,后者选择所有属于 warning 类的p元素
id | `#title` | 选择 id 为 title 的元素

# 上下文选择器

Contextual selectors (combinators) target elements based on their relationships to other elements in the document’s tree hierarchy, and use the same parent, child, sibling, and descendant terminology.

上下文选择器基于元素在 HTML 文档中的上下级挂你来选择元素。

选择器 | 语法 | 描述
——-|—–|———
后代 | `#main li` | 选择一个元素的后代元素。注意这里不一定是直接子元素,后代即可。
相邻元素 | `h2+p` | 选择一个元素的直接相邻元素,比如说这个表达式只选择 h2 的直接相邻元素 p
子元素 | `div>p`| 选择所有直接子元素
所有相邻元素 | `h2~p` | 选择一个元素的所有相邻元素

# 伪类选择器

伪类选择器基于浏览器状态或者文档中的位置来选择元素。浏览器在幕后保存了好多状态,比如一个链接有没有被访问过,一个元素有没有被选中,一个元素是不是它这种类型的第一个或者最后一个元素,甚至于一个元素是不是它的父元素的第一个子元素。

所有处于同一个状态的元素被看做是属于同一个伪类,尽管在 HTML 中并没有明确声明类的名字。伪类标识符用冒号 `:` 开头,而且一般是和元素名称放在一起用的。

## 用作链接和用户状态的伪类

当给一个链接应用样式的时候,按照下面表中的顺序来制定样式才能获得预期效果。

选择器 | 语法 | 描述
——-|—–|———
未访问的链接 | `:link` | 选择未访问过的链接,例如 `a:link`
访问过的链接 | `:visited` | 选择已经访问过的链接,例如 `a:visited`
用户焦点 | `:focus`| 选择当前拥有用户光标,可以直接输入的元素,例如 `a:focus` `input:focus`
悬浮 | `:hover` | 选择当前用户鼠标指针悬浮的元素
激活 | `:active` | 选择当前用户正在点击的元素

## 用于选择相邻元素的伪类

下面的 6 个选择器用于选择拥有同一个父节点的元素中符合某种条件的元素,算是一个断言(assert)吧。

选择器 | 语法 | 描述
——-|—–|———
第一个元素 | `:first-child` | 如果指定的元素是他的父元素的第一个子元素,选择生效
最后一个元素 | `:last-child` | 如果指定的元素是他的父元素的最后一个子元素,选择生效
唯一子元素 | `:only-child`| 如果指定的元素是他的父元素的唯一一个子元素,选择生效
同类型第一个 | `:first-of-type` | 如果指定的元素是他的父元素的子元素中同类型的第一个,选择生效
同类型最后一个 | `:last-of-type` | 如果指定的元素是他的父元素的子元素中同类型的最后一个,选择生效
同类型唯一一个 | `:only-of-type` | 如果指定的元素是他的父元素的子元素中同类型的唯一一个,选择生效

随着元素和 DOM 树的更新,这些伪类能够应用的元素都是动态变化的。

## CSS3 中的结构相关伪类

CSS3 提供了更灵活的选择方式,可以根据元素在文档中的位置选择一系列的元素。这些选择器还可以接受一个参数

| 语法 | 描述
|—–|———
| `:nth-child(n)` | 父元素的第 n 个子元素
| `:nth-last-child(n)` | 父元素的倒数第 n 个子元素
| `:nth-of-type(n)`| 父类型子元素中,同类型中的第 n 个
| `:nth-last-of-type(n)` | 父类型子元素中,同类型中的倒数第 n 个

其中的 n 的取值往往取如下几种

值 | 含义
——|——
`odd` `2n+1`| 奇数
`even` `2n` | 偶数
`2` | 第二个

# 伪元素选择器

伪元素选择器让你能够给虚构的元素增加样式,而不用在 HTML 中真的创建他们。`::first-letter` 和 `::first-line` 选择了文本的一部分从而避免了使用 `span` 元素。 `::before` 和 `::after` 选择器用来在并不存在的地方动态插入文本。

CSS3 uses a double colon for pseudo-elements. To provide backward compatibility for older browsers, omit one of the colons that precede the pseudo-elements (ie :first-letter)

CSS3 使用两个冒号来表示伪元素。为了兼容老浏览器,可以省略一个冒号(也就是 `:first-letter`)

选择器 | 语法 | 描述
——-|—–|———
第一个字母 | `::first-letter` | 选择指定元素的第一个字母
最后一个元素 | `::first-line` | 选择指定元素的第一行
之前 | `::before`| 选择指定元素之前生成的一个伪元素,和元素是相邻关系
之后 | `::after` | 选择指定元素之后生成的一个伪元素,和元素是相邻关系

# 属性选择器

属性选择器基于元素时候有某个特定的属性而定。下面的 7 中选择器中,后面 3 中是 CSS3 中新定义的,浏览器们可能还没有完全支持。

选择器 | 语法 | 描述
——-|—–|———
存在 | `E[attr]` | 选择包含某个属性的元素
相等 | `E[attr=’val’]` | 选择某个属性的值等于 `xxx` 的元素
包含 | `E[attr~=’val’]`| 很鸡肋,把某个元素的值按空格分隔,如果包含给定的值,选中。优点类似于类的分隔
开头 | `E[attr\|=’val’]`| 很鸡肋,某个属性的值以给定的值 + `-` 开头
开头 | `E[attr^=’val’]`| 某个属性的值以给定的值开头
结尾 | `E[attr$=’val’]`| 某个属性的值以给定的值结尾
包含 | `E[attr*=’val’]`| 某个属性的值包含给定的值

Bootstrap Basics

BootStrap适合做什么
======

Bootstrap适合做没有界面设计,只有功能或者草图,直接通过代码快速的生成一个可用的界面

Bootstrap不适合

1. 已经有了良好的界面设计,包含了各种细节
2. 在已有的非Bootstrap的界面上进行改动的时候

# headers
add this to headers ``

# grid system

## container
`container` class should be added to the root element where you would like to use bootstrap.

`container-fluid` is for full-width container.

## row

from the official documentation:

> * Content should be placed within columns, and only columns may be immediate children of rows.
> * Columns create gutters (gaps between column content) via **padding**. That padding is offset in rows for the first and last column via negative margin on `.rows`.
> * Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. grid classes are `col-xs-*`, `col-sm-*`, `col-md-*`, `col-lg-*`.

| | phone | tablet | desktop | large desktop|
|————-|——-|——–|———|————–|
|Container width | None (auto) |750px |970px |1170px|
|Class prefix |`.col-xs-` |`.col-sm-` |`.col-md-` |`.col-lg-`|

The gutter width for bootstrap is `15px` for each column, `30px` between.

generally, you should use the `col-sm-N` family of classes. such that it applies for all devices except phones.

use `col-xs-offset-*` classes to offset the columns.

use `col-xs-pull-*` classes to pull column to left, and `push` to push to right.

# 安装

引入 CSS 和 JS 就好啦,不过限于国内的网络条件,可能做好还是下载到自己服务器吧。

“`




“`

# starter template

“`






Hello, world!

Hello, world!







“`
bootstrap 默认已经采用了 border-box 模式。如果需要使用 content-box 需要自己指定。