摘要：
CSS 变换 用于在空间中移动物体，而CSS 过渡 和CSS 关键帧动画 用于控制元素随时间推移的变化。 变换、过渡和关键帧动画的规范仍然在制定中。尽管如此，其中大多数特性已经在常用浏览器中实现了。 1.二维变换 CSS变换支持在页面中平移、旋转、变形和缩放元素。 从技术角度说，变换改变的是元素所在 阅读全文
摘要：
2.表单 表单 是用户输入内容的地方。表单涉及的控件很多，而且一直很难给它们应用样式。无法控制样式的部分，可以通过自定义控件来解决。 2.1 简单的表单 2.1.1 fieldset与legend 用于分组相关信息块， 表明每个fieldset的目的。 2.1.2 字段名 元素用于给每个表单元素添加 阅读全文
摘要：
表单 在现代Web应用中占据着重要地位。 表单可以很简单，也可以非常复杂，要横跨几个页面。 除了从用户哪里获得数据，Web应用还需要以容易看懂的方式展示数据。 表格 是展示复杂数据的最佳方式。 1.设计数据表 1.1 表格专有元素 HTML 中的表格是通过 元素来创建的，表格由 （table row 阅读全文
摘要：
4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力，始于 媒体类型 。 媒体类型用于针对特定的环境应用样式，包括屏幕显示、打印和电视等。 通过给 元素添加 属性，可以指定在哪些设备上应用相关样式。 在CSS文件中指定媒体类型： 4.2 媒体查询 在 元素中， 媒体查询 可以这样写 阅读全文
摘要：
1.一个例子 响应式Web设计最核心的一点，就是可以适配不同视口大小的流式布局。 1.1 简单上手 把列设置为浮动和100%宽度，以保证行可以包含浮动的子元素。 1.2 媒体查询 如果视口更宽一些，那就有可能在一屏之内显示更多内容。 如果媒体类型屏幕的可视窗口宽度大于等于35em，就使用相应的样式。 阅读全文
摘要：
3.二维布局：CSS Grid Layout CSS Grid Layout模块为了能在二维空间里控制元素的顺序、位置和大小而定义了一组CSS属性。 被设值为 的元素叫 网格容器 （grid container）。 容器进一步被网格线划分为不同的区域，叫 网格单元 （grid cell）。 网格线之 阅读全文
摘要：
1.布局规划 1.1 网格 网格系统 是设计师在切分布局时作为参照的一组行和列。 1.2 布局辅助类 类名用于为布局添加样式。为了让样式可以重用，让类名表达其意图。 另一种做法： 命名规范 是高质量代码的重要组成部分。 如果设计很复杂，那么最好选择一个现成的 CSS布局框架 。 到底是该选择现成的框 阅读全文
摘要：
网页是由不同内容块构成的：标题、段落、链接、列表、图片、视频，等等。 1.定位 定位并不适合总体布局，因为它会把元素拉出页面的正常流。 元素的初始定位方式为静态定位（ ），即 块级元素垂直堆叠 。 把元素设置为相对定位（ ），然后可以相对于其原始位置控制该元素的偏移量，同时又不影响其周围的元素。 绝 阅读全文
摘要：
4.多重背景 CSS支持一个元素设置多个背景图片。 每个背景属性有相应的多值语法，多个值由逗号分隔。 如果随后的背景属性值少于背景图片的个数，那么相应的值会循环使用。 5.边框与圆角 可以分别为盒子的各边设置边框，也可以一次性为四边设置边框 除非明确指定 属性，否则边框宽度会影响盒子的尺寸 设置边框 阅读全文
摘要：
HTML文档中的所有元素都是由矩形盒子构成的——不管是包含页面结构的容器元素，还是段落中的每行文本，归根结底都是盒子。 1.背景颜色 设置页面背景颜色。 简写属性： 通过 可以一次性地设置与背景相关的多个属性。 十六进制表示法： 一个 后面加上6位十六进制数字构成的字符串。 这个字符串由3组数字（每 阅读全文