CSS 实现网页的居中布局

常见的需求有水平居中、垂直居中。

CSS Flexbox

弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。

它提供了一种更加灵活的方式来对元素进行布局（排列、对齐、分配空白空间）。如：创建multi-column布局。

基本概念

flex container 伸缩容器、flex item 伸缩项目、axis 轴（main axis主轴、cross axis交叉轴）、direction 方向（row、column）、wrap 换行。

CSS variables

.block {
  --color: blue;
}

1. 定义：以两条 dashes 开头的 CSS 属性名称即为 CSS 变量，也称为 Custom Properties。变量的值应为有效的css属性值。

• 可以在任何选择器中定义 CSS 变量
• 支持媒体查询等 conditional rules
• 支持在 HTML inline style 中定义
• 变量名称 case-sensitive ！！！
• 遵循正常的继承和层叠规则
• 如果变量值是 invalid，则赋值的属性值等于 initial 或 inherited 值

CSS Grid

给栅格容器设定 display: grid 或值为 inline-grid 后，其直接子元素就变为栅格 item。

栅格 item 通过设定 display 属性也可以成为栅格容器（实现 nesting grids）。

因为栅格布局优先，所以_float_ 、 clear 和 vertical-align 属性对于栅格 item 不起作用。

目前除 IE 浏览器，栅格布局在其他浏览器中都不需要 prefix，可以安全地使用。

Loop 循环

比较好理解但实用性一般的 @for 和 @while。

@each

语法：@each $var in <list or map>

在 SassScript 定义的表达式列表中循环，如：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    // ...
  }
}

参考文章 Using CSS Mod Queries with Range Selectors

问题描述：

有一组列表元素，每个元素以矩形展示，元素总个数（即列表长度）不固定，第一行放一个元素，剩下的元素平均放在 n 行展示（每行展示两个或三个）。当元素总个数超过 2 时，最后一行不能只有一个元素。

实现方法：

使用 CSS 的 quantity queries。

本文主要是关于 H5 页面开发，还原设计稿 web 前端技术实现的一些经验和思考。

如何组织代码的逻辑顺序？ Your code should give you a good structure for your smallest screen devices。

即当用户在手机上滚动一个长的文档时，优先希望用户看到的东西，应该与代码中元素的书写顺序一致。

95%会使用的基本设定：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

如果希望 web app 在 zooming 方面表现得像 native app 一样时（比如，在光标focus时页面不要自动放大），才设置 user-scalable=no，否则缩放对大多数人来说是一个重要的可用性功能。

Component CSS or CCSS

组件化的 CSS 是一种针对大型 web 应用，简化 CSS 创建体验的架构。本文主要观点摘自这篇文章。

大型 web 应用通常会采用许多框架、工具，会有许多开发人员对一些 CSS 文件同时进行修改，因此我们需要一个可维护、可管理和可扩展的 CSS 体系结构。

基于组件化的 Web 开发将是大势所趋。Web 组件把标记和样式封装成可重用的 HTML 元素，这就意味着我们需要考虑基于组件的 CSS 开发。

在 CSS 中，总的来说有两种字体集：

• generic family 通用字体系统，一组拥有相似外观的字体系统
• font family 特定字体系统 (like “Times New Roman” 或 “Arial”)

Tip：sans-serif 无衬线字体被认为比有衬线 serif 字体在电脑屏幕上更容易阅读，有人比较过同样为 14px 的中文字体，黑体看起来比宋体和楷体更大。

当你使用 CSS 和 HTML 通过重定义大小、隐藏、收缩、拉伸或者移动内容，使同一个域名下同一个网页在所有屏幕上看起来不错，这就叫做响应式设计。

响应式设计根据不同屏幕显示的需求，来调整网页显示的内容，其布局也随屏幕尺寸变化而变化。自适应布局的页面，不论屏幕尺寸如何变化，其内容和布局都是一样的。

本文列举一些面向响应式 Web 设计的技巧。

CSS Transforms

transform 属性通过以下的方法让元素实现：移动、旋转、放大和变形。

2D transform 方法

• translate(n[, n]) 移动，根据给定的参数把元素从当前位置移动到 n 决定的位置。一个参数表示沿 x 、y 轴移动相同的距离；若含两个参数，前者表示向左 (X-axis ) 后者表示向上 (Y-axis)
• scale(number[, number]) 缩放: 根据给定的参数放大或缩小元素的尺寸。一个参数表示宽高同时缩放相同倍数；若有两个参数，第一个表示 width(X-axis) 第二个表示 height (Y-axis)
• rotate(angle) 旋转，以给定的角度沿顺时针方向旋转. Negative values 表示逆时针方向选择
• skew(angle[, angle]) 扭曲，以给定的角度歪斜。一个参数表示沿 x 、y 轴移歪斜相同角度；若含两个参数，前者表示水平方向 (X-axis ) 后者表示垂直方向 (Y-axis)
• matrix(n, n, n, n, n, n) 矩阵变化: 把所有的 2D 变换组合到一个函数里, 具体使用方法参看这里。

display 是 CSS 用于控制布局最重要的属性。

对于要显示的大多数 HTML 元素，其 display 默认值取决于元素的类型，即 block 或者 inline。（这一点在 HTML Blocks章节已提到过）

注意：通过 display 属性仅改变元素显示的方式，而不改变元素的类型。因此，一个看起来是块级元素的 inline 元素，不允许包裹其他块级元素。

隐藏 HTML 元素

最常见的通过 JS 来隐藏和显示元素，不通过删除和重新创造它们的方法就是：

• display: none; 隐藏以后不占据空间，看起来那个元素不在那里
• visibility: hidden; 仍然占据着本来的空间，尽管看不见，还在影响着页面布局。

发布时间2014年3月，时隔近一年才看到，落后了。把自己觉得有用的信息摘录在这里。

您的跨屏策略应符合客户及业务的需求。您希望在自己的网站上实现什么样的目标？您的客户期望获得什么？

了解跨屏用户在您当前网站上的所见和所想。使用分析程序(如：Google Analytics)查看当前移动用户来自哪里、他们执行了哪些操作，以及他们与桌面设备用户的行为有何不同 (例如按设备类型来比较网站搜索查询)。

如果数据显示智能手机用户经常访问您网站上的某个内容区域，您就可以将该区域置于移动网站上的显著位置。另一方面，如果在您网站上某些版块的移动用户跳出率较高(即用户到达您的网站后马上就离开)，您就应在新设计中尝试修正相关问题。还需要注意的一点是，对越来越多的人来说，移动设备已经成为他们唯一使用的设备。因此，请勿将移动设备视为“附加”的屏幕，并确保移动网站拥有完整的功能。

本文为 W3C Recommendation Media Queries 文档阅读笔记。

一个媒体查询由一种 media type 和 0 个或多个 expressions（用于检查某种媒体特征的条件）构成。

通过使用媒体查询，可以为特定范围的输出设备量身定制样式，而不需要改变其内容。

一个媒体查询是一个逻辑表达式，要么为真要么为假。

除了在 CSS Basic 章节提到的几个简单选择器，下面说说其他类型的 CSS 选择器。

Attribute Selectors 属性选择器

又分为：

Attribute presence and value selectors

[att] Selector，匹配那些拥有 att 特性的元素，不管 att 值是什么。

[att=val] Selector，匹配那些拥有 att 特性，且 att 值等于 val 的元素。

[att~=val] Selector，匹配那些拥有 att 特性，且 att 值是一个由空格分隔的单词 list，其中一个单词为 val 的元素。原文

CSS 有一些不同的单位用来描述一个长度 length。许多 CSS 属性可取值 length（即一个浮点数字+css unit），如：width, margin, padding, font-size, border-width, 等。

表示长度的数字和单位之间不能有 whitespace 空格。

如果 value 值为 0，单位可以缺省。

对于一些 CSS 属性，length 允许负值。

CSS 有两种类型的 length 单位，相对的和绝对的。

项目里遇到的问题，让 footer 总是显示在页面最下方。（这里讨论的不是让 footer 固定在 viewport（或浏览器窗口）的底部）。

背景：还没有对 <html>，<body>，<footer> 这些元素的 position 或 height 属性做任何改动。

问题描述

1. long page

   简单来说，当页面包含大量内容，并且 footer 被自然地 pushed down off the viewpor，此时，你滚动页面到最下方，自然会看到页面结束在 footer。你不会注意到 footer 有什么不妥的地方。

2. short page

   然而当页面只有少量内容（实际内容不足以占满整个窗口高度）的时候，你会看到 footer 跟着页面实际内容出现在半路，距离 viewport 底部有一大片空白。发现问题！

CSS Position

position 属性指定了一个元素放置方法的类型，一共有四种取值：static，relative，fixed，absolute。

Static Positioning

默认情况下，HTML 元素是被静态放置的，其位置属性值为 static。

HTML 元素总是根据正常的页面流，从上到下，从左到右放置。

静态放置的元素不受 top，bottom，left，right 属性影响。

CSS Links

<a> 可以根据它的状态，被赋予不同的样式。

链接的四种状态是：

• a:link - a normal, unvisited link 还没有访问
• a:visited - a link the user has visited 已访问
• a:hover - a link when the user mouses over it 鼠标滑过
• a:active - a link the moment it is clicked 鼠标点击时（也是它被选中的时刻）

CSS Float

使用 CSS 浮动，一个元素可以被水平地推到左边或右边（not up or down），其后的元素将 wrap around it，而它前面的元素不受影响。通常用于图片。但在处理页面布局时也很有用。

取值：

• none 默认值，元素将展示在默认出现的位置
• left，浮动到左边
• right，浮动到右边

如果把一些彼此相邻的元素设置相同的 float 值，它们将相挨着从左往右排列，只要所在的那一行还有空间，否则自动换行。移到下一行的元素依然遵循相同的浮动规律。

display 为 inline 的元素，只设定 float 为 left／right，其 display 值自动变为了 block。不明原因（待更新）.

CSS Dimension

CSS 的范围属性用来控制元素 content 区域的高和宽，不包含内边距、边框和外边距。

Height & Width

可取的值：

• auto: 默认值，浏览器来计算
• length: 以 px、cm，等为单位的具体的值
• %: 以所包含的内容模块的百分比显示

CSS Colors

CSS 颜色有三种基本表示方法：

1. Predefined Color names，所有现代浏览器都支持至少 140 种颜色名称表示的 CSS 颜色。Color name 是大小写不敏感的.

   常见的 17 种标准颜色有: aqua 水绿色, black, blue, fuchsia 紫红色, gray, green, lime 绿黄色, maroon 褐红色/栗色, navy 藏青色, olive 黄褐色/橄榄色, orange, purple, red, silver, teal 青色, white, and yellow

2. RGB(Red, Green, Blue)，三原色配色表示法: rgb(255,0,0)，rgb(0,255,0)，rgb(0,0,255)。颜色密度取值在 0 和 255之间。

3. Hexadecimal Colors 十六进制表示法，语法 #RRGGBB 或者 #RGB。十六进制取值在 00 和 FF 之间。

   HEX 值是大小写不敏感的，#ff0000 等同于 #FF0000.

跟文本有关的 CSS 属性有：

• color，设置文本的颜色。通常以颜色的 name，HEX 值，RGB 值来指定。对于符合 W3C 的 CSS，如果你定义了 color 这个性质，也要定义 background-color 属性。
• text-align，设置文本的水平对齐方式。如果文本的书写方向为 left-to-right，则默认是左对齐，反之，为右对齐。可取值为：left, right, center, justify（每行文本将拉伸，达到相同的宽度，就像报纸和杂志上的文字排版）。

• text-decoration，用来设置或移除文本的装饰。可取的值为：none（无装饰），overline 文字上方划线，line-through 横线穿过文字，underline 文字下方划线（<a> 链接的默认文本样式）

  注意：不建议设置那些非链接的文字带有下划线，这样会误导用户。

Programming style guidelines

Coding convention 代码公约，通常包含：

• 变量和函数的命名、声明规则
• 空格、缩进、注释的使用规则
• 编程实践和原理

使用代码公约能够提高代码的可读性，使得代码更容易维护。

CSS Borders

• border-style 指定要显示什么类型的边框。可能的取值:

  • none: 没有边框
  • dotted: 小方块（像素点）连成的
  • dashed: 虚线的（比 dotted 长）
  • solid: 实线边框
  • double: 双实线边框，边框之间的距离等于 border-width 边框宽度的值
  • groove: 3D纹理（槽）边框
  • ridge: 3D隆起的
  • inset: 3D嵌入的
  • outset: 3D突出的
  • hidden: 效果同 “none”
• border-width 设定四条边的边框宽度。宽度可以用指定的尺寸（以 px，pt，cm，em 等为单位），或者使用三个预定义的值（thin, medium, 或 thick）
• border-color 设定四条边的边框颜色。颜色可以按照 CSS color 的 name, RGB, HEX 设定，也可以设为 transparent 透明的。

Cascading Style Sheets（层叠样式表）缩写为 CSS。

CSS 用来描述一个 HTML（或 XML）文档的应该如何在屏幕、纸张或其他媒体上渲染，可用来美化页面、增强页面的显示能力。

因为 HTML 是用来定义文档的内容，从来没打算要包含一些用于定义文档格式的标签，因此 CSS 解决了 HTML 的样式问题。

CSS Syntax

A CSS rule-set consists of a selector (选择器，指向你希望样式化的 HTML 元素) 和 a declaration block (包含一个或多个由分号分隔开的声明)。

每一个声明包含 a property name (属性名称) 和 a value (值)，并由冒号隔开。例如:

p {color: red; text-align: center;}