CSS3 & 页面布局

时间 2019-11-12

标签 css3 css 页面布局栏目 CSS 繁體版

原文原文链接

字体图标(web font)

文字文件, 图标的替换方案, 利用字体的形式来设计图标,字体等UI
使用图标:html

加载慢
放大失真
css颜色没法变

语法: @font-face
网站: fontello.com
软件: fontcreator
前端

css sprite

软件:
css satyr
css sprite toolhtml5

选择器

组合选择器
属性选择器
伪类
伪元素选择器
before, after 结合属性attr, url等能够出现比较好的呈现效果

优先级

注意把握内嵌样式, 内部样式, 外部样式的使用幅度.
注重加载速度的, 可使用前二者, 好比首页
其余的, 可使用外部样式, 好比base, reset等
java

注意, 继承的优先级所在的位置
@import 导入CSS文件的另一种方法
css3

刻度

0能够省去单位
一些属性可能容许有负长度值，或者有必定的范围限制。若是不支持负长度值，那应该变换到可以被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px
- 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
- 浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是全部浏览器内置的默认样式，多数是能够被修改的，但chrome不能直接修改，能够被用户样式覆盖。
- rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
- 相对长度, 能够经过设置根节点的值来进行统一. 即只需设置根节点, 全部rem的大小都会改变.
实现简单的响应式布局，能够利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，之前的tmall就使用这种办法

盒子模型(box model)

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每一个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让全部浏览器都会采用标准 w3c 盒子模型去解释你的盒子git

边距折叠

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系github

内联和块标签

cssreset

BFC

CSS中重要的BFC
块级格式化上下文web

如何造成BFC
BFC造成以后有什么特色
BFC与边距折叠的细节

浮动

浮动元素会从标准流中脱离
浮动元素会触发BFC（块级元素格式化）、不影响外边距折叠
float以后, 元素变为块标签
若是float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它状况为指定值；
float在绝对定位和display为none时不生效
浮动元素间会堆叠
浮动元素不能溢出包含块
浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。水平方向不会溢出，垂直方向有可能会溢出
相邻的浮动元素，left属性最前面的元素，排在最左边, right相反
包含块不会计算浮动元素的高度
浮动元素和非浮动元素组合在一块儿会重置，内容会被挤出, 可是非浮动元素的内容可能会由于浮动元素位置的缘由, 而产生图片环绕的效果
clear 只能影响本身, 不能影响其余元素

多种居中方法

块标签自身水平居中

当一个有宽度的块标签设置margin:0 auto时将实现自身的水平居中
注意, 通常须要宽度

块标签内对齐

text-align
针对内部行内标签居中, 对块无效

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #container {
                margin: 0 auto;
                background-color: red;
                text-align: center;
            }
            
            #div1 {
                display: inline-block;
                width: 20%;
                height: 50px;
                background: #9acfea;
            }
        </style>
    </head> 
    <body>
        <div id="container">
            <div id="div1">
                div1
            </div>
            <span>hello work</span>
        </div> 
    </body>
</html>

垂直居中1

当一个设置了定位的元素全部的偏移为0且margin为auto时将水平，垂直都居中，且父元素自身的高度可动态变化

position: absolute;
                /*居中开始*/
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                /*居中结束*/

垂直居中2

若是是单行文本，行高如块的高度同样时将居中，只一行，行高和元素同样高，居中。只能够是文字等一些行内标签，图片不行。

line-height: 600px;
height: 600px;

垂直居中3

让元素相对父元素定位，偏移左50%，上50%，把自身向左移半个宽度，向上移半个高度，同时完成了水平与垂直方向的居中

垂直居中4

vertical-align这个属性的特色，它是相对兄弟级行高（line-height）来定位
实现方式：

可使用伪元素来实现
可使用line-heigh

垂直居中5

注意：垂直的内容不能是块元素
使用 table & table-cell 来操做

垂直居中6

在某些时候须要将小图片与文字对象，可使用对齐的属性absmiddle（绝对居中）

垂直居中7

CSS3中可使用transform移动元素自身的宽度与高度

#img1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%);
      }

阴影

文字阴影text-shadow
盒子阴影box-shadow

背景

背景图像尺寸background-size
背景图像显示的原点background-origin

伪元素

虚拟元素
伪元素不是真的元素是经过CSS虚拟出的一个元素，CSS3的语法为了区分伪元素与伪类，使用“：：”表示，可是前期为了兼容“：”仍然可使用
before, after 在元素内容先后虚拟出新的对象, 跟该元素是父子关系

圆角与边框

圆角border-radius
画圆时, 4个角圆角是高宽的一半
- 若是只提供一个参数，将用于所有的于四个角。
- 若是提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 若是提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

边框图片

边框能够图片化border-image

变形transform

页面布局(Page Layout)

做者想说的：对于布局的分类，并非绝对的。因此此分类图，并不绝对准确。在实际学习中，我发现有些布局没法直接概括入一种类型中，归根结底是由于这些布局在实现时结合了多种方式。对于如今的大部分网页设计来讲，功能复杂化界面设计化愈来愈高，因此这个状况，想必也是这一趋势形成的结果。个人理解，对于页面布局，最重要的是理解其思想，在实际运用中，每每是相互搭配，不能绝对死板。毕竟设计，自己就是一种创造！
对于布局，咱们还能够按类型和功能来进行分类。
先来看按类型分类的布局模式：

无任何布局模式；
表格布布局模式；
浮动布局模式；
定位布局模式；
多列布局模式；
Flexbox 布局模式；
Grid 布局模式；
不规则布局模式；

另外除了类型分类，还能够按功能模式来分类：

静态布局（Static Layout）；
流式布局（Liquid Layout）；
自适应布局（Adaptive Layout）；
响应式布局（Responsive Layout）；

浮动布局(Float Layout)

负边距

所谓的负边距就是margin取负值的状况，如margin:-100px，margin:-100%。当一个元素与另外一个元素margin取负值时将拉近距离

当多个元素同时从标准流中脱离开来时，若是前一个元素的宽度为100%宽度，后面的元素经过负边距能够实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移

双飞翼布局

布局要求有几点：
一、三列布局，中间宽度自适应，两边定宽；
二、中间栏要在浏览器中优先展现渲染；
三、容许任意列的高度最高；
四、要求只用一个额外的DIV标签；
五、要求用最简单的CSS、最少的HACK语句；

须要使用到负边距的概念

多栏布局

栅格系统

栅格系统就是利用浮动实现的多栏布局, bootstrap使用比较多
bootstrap 可视化布局-- http://www.bootcss.com/p/layoutit/

多列布局

栅格系统并无真正实现分栏效果（如word中的分栏），CSS3为了知足这个要求增长了多列布局模块. 可认为是分列布局
部分属性:
column-count：<'integer'> | auto
功能：设置或检索对象的列数
适用于：除table外的非替换块级元素, table cells, inline-block元素
<'integer'>：用整数值来定义列数。不容许负值
auto：根据 <' column-width '> 自定分配宽度

column-gap：<'length'> | normal
功能：设置或检索对象的列与列之间的间隙
适用于：定义了多列的元素
计算值：绝对长度值或者normal

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：设置或检索对象的列与列之间的边框。与border属性相似。
适用于：定义了多列的元素

columns：<' column-width '> || <' column-count '>
功能：设置或检索对象的列数和每列的宽度
适用于：除table外的非替换块级元素, table cells, inline-block元素
<' column-width '>：设置或检索对象每列的宽度
<' column-count '>：设置或检索对象的列数

弹性布局(Flex Layout)

IE11+zhic
display:flex 弹性盒
flex: auto; 表明不按比例, 平均分配

流式布局(Fluid Layout)

流式布局的特色是页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。表明做栅栏系统（网格系统）。
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的(他妈的, 都不能像这样总结干练简洁一点的!!!)
网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也做相似处理（width:100%, max-width通常设定为图片自己的尺寸，防止被拉伸而失真）。
固定布局和流式布局在网页设计中最经常使用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样能够根据客户端分辨率的大小来进行合理的显示.
　　

瀑布流布局

瀑布流布局是流式布局的一种, 视觉表现为良莠不齐的多栏布局，随着页面滚动条向下滚动.

插件：
- masonry是一个响应式网格布局库, 可使用
- imagesLoaded 图片加载
- infinite scroll 无限加载

响应式布局(Responsive Layout)

一些说明:
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

媒介查询的概念(Media Query)

此概念是响应式布局的前提和关键。

内部样式
media screen and (width:800px){ … }
导入样式
import url(example.css) screen and (width:800px);
连接样式
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
XML中应用样式
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

媒介设置的语法

@media [not|only] media_type and feature

media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {
   CSS样式...
}

and表示与，条件要同时知足；逗号表示或。

响应式栅格系统

respond.js是一个用于让IE8如下浏览器支持@media queries的插件
引入方法

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]-->

移动优先(Mobile First)

桌面优先(优雅降级)
这是一种传统的作法，开发项目时优先PC端，而后再经过一些hack的方法让项目正常运行在移动端，所谓的降级能够简单认为就是将一些信息隐藏，由于移动端的可视范围有限，必须给用户提供简洁核心的内容。
移动优先(渐进加强)
- 对于产品设计师，一个新产品先设计移动版，而后才是桌面版。
- 对于工程师，一个新产品，先开发移动版，而后才是桌面版本。

这样的好处是能把握好最核心最关键内容，让界面简洁。

视区(viewport)

可见窗口(visual viewport)
布局窗口(layout viewport)

页面设计(Web Design)

参考资料: http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/

响应式设计(RWD)

Responsive Web Design
响应式设计基于响应式布局，使用同一套页面在各类各样不一样大小的设备上进行大小合适、布局（甚至功能）合理的展示。
响应式设计会根据识别屏幕宽度对于展现的具体内容块进行位置调整，甚至展现和隐藏。
实现方式：

响应式布局
特性检测（用于网页功能的渐进加强）

自适应设计(AWD)

Adaptive Web Design
自适应设计是经过服务端检测设备类型、从 site 的不一样版本中选择最合适该设备类型的设计布局/尺寸的版本进行展现。它可使用到全部（包括响应式布局）布局方案。
实现方式：

server-side detection
different versions to different devices
对于 PC: 可以使用流式布局；
对于 Mobile: 可以使用流式布局。推荐一个 Rem 解决方案：
- 设置元素（能够包括字体等）大小为 rem （rem 是以跟元素font-size为基准的单位）
- 按照屏幕宽度的不一样，JS 动态设置的 font-size 大小，元素一样会按照屏幕宽度等比例放大缩小

RWD 和 AWD 的异同

相同点：
均针对不一样的分辨率/device 采用不一样的样式和布局达到页面展现最优
布局方式本质没有差异（AWD 也 including responsive layout）
不一样点：
前者强调同一套页面多端兼容展现，然后者给出多套页面，对于不一样 device 进行了分类处理
前者是经过 CSS Media query 进行分辨率检测，能够实时的响应浏览器尺寸变化，改变元素尺寸/布局，然后者通常是 server side detection，一次性渲染既定布局和样式

前端预处理技术

CSS不像其它高级语言同样支持算术运算、变量、流程控制与面向对象特性，因此CSS样式较多时会引发一些问题，如修改复杂，冗余，某些别的语言很简单的功能实现不了等。而javascript则是一种半面向对象的动态语言，有java的影子，有C的味道，中间有比其它语言多的糟粕，使用预处理办法能够解决这些问题。其中Less[les]与Sass是CSS的预处理技术，而CoffeeScript、TypeScript则是javascript的预处理技术。
相似.NET针对SQL语句而实现的Linq

前端框架组成

以mui为例：
- dist: 目标, 最后输出的结果
- fonts: web fonts
- grunt：前端工程化会用到
- js: javascript
- plugin: 插件
- template: 模板
- sass: css预处理

Less

以@为标志

编写Less文件
经过解析插件把Less解析为CSS(注意提早装好Less编译器)

解析方式

编译器解析
- HBuilder的设置
在线解析
- 引入 less.js 进行解析, 发布项目时不建议使用此方法, 消耗资源, 效率较低;
预处理
- 使用Node.js 来实现
koala-app 进行编译

混入(Mixins)

相似函数或宏

内置变量@arguments表明全部参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }
注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，不然会致使整个页面内的less语法出错而失效
Mixins必须使用ID或者类，即#xx或.xx，不然无效
前面定义的会覆盖后定义的, 在编译时会统一赋后值

color:red;
//...
color:yellow;
//编译后,@color均为yellow

嵌套

容许将多个CSS选择器嵌套在一块儿，&表示当前选择器的父选择器
在使用嵌套规则时，须要特别注意 & 符号。内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面，若是没有 & 符号，则它被解析为父选择器的后代；若是有 & 符号，它就被解析为父元素自身或父元素的伪类。

好比，上述代码中，因为选择器 h1 前面没有 & 符号，则h1 被解析为 header 选择器的后代，即 header h1；而 :hover 和 .slogan 前面有 & 符号，& 符号表示对父选择器的引用，则 &.slogan 表示父元素自身，&:hover 表示父元素的伪类，解析结果为 a:hover 和 p.slogan。

运算

运算主要是针对任何数字、颜色、变量的操做，支持加、减、乘、除、()或者更复杂的综合运算；

函数

Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数
函数使用说明：http://www.lesscss.net/functions/
注意 data-uri 能够把外部资源转换为内嵌资源, 能够作作功课
loops函数

继承

做用域

同一级的变量后者覆盖前者，内部变量优先级高于外部变量，变量只在同一个文件中生效

注释

真正编译的时候, 有些注释会被消掉

less重要的是函数的内容

Sass

以$为标志

Sass 的两种语法

第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本；
第二种比较老的语法成为缩排语法（或者就称为 "Sass"）

解析方式

不能直接在页面中解析，须要使用ruby预先翻译成css文件，而Less能够在线动态翻译。
可使用Koala

变量

$标记
同Less语法一致

嵌套

同Less语法一致

导入

sass中如导入其余sass文件，最后编译为一个css文件，优于纯css的@import
导入以后, 一些其余文件的变量能够跨文件使用

混入(mixin)

sass中可用mixin定义一些代码片断，且可传参数，方便往后根据需求调用。今后处理css3的前缀兼容轻松便捷。定义时使用关键字@mixin，调用时使用@include
不过, Sass没有@argument参数

mixin circle($size:100px,$color:lightblue){
    width: $size;
    height: $size;
    border-radius: $size/2;
    background: $color;
}

.cls41{
    @include circle();
}

.cls42{
    @include circle(150px);
}

.cls43{
    @include circle(200px,lightgreen);
}

扩展

sass可经过@extend来实现代码组合声明，使代码更加优越简洁

.class1{
// ...
}

.class2{
extend .class1;
}

运算

函数

流程控制

sass中和其它程序语言同样也拥有流程控制语句，如if，for，each，while，指令，函数等。

CoffeeScript

已是过去式了...
是一种翻译语言, 也叫预编译语言

TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法，并且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

在PC端开发的时候，要注意IE9如下的兼容，移动端开发时，能够比较放心了

浏览器兼容性与前端性能优化

兼容性主要考虑三方面：

CSS兼容
JavaScript兼容
HTML兼容

兼容的通常标准
在不一样的主流的浏览器上表现效果一致
能适应不一样的屏幕大小
能适应不一样的分辨率与色彩深度
浏览器兼容在线测试：https://turbo.net

css hack

条件注释

IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。


<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 如下版本<![endif]-->
<!--[if !IE 8]> -->用于非 IE <!-- <![endif]-->

gt : greater than，选择条件版本以上版本，不包含条件版本 >
lt : less than，选择条件版本如下版本，不包含条件版本 <
gte : greater than or equal，选择条件版本以上版本，包含条件版本>=
lte : less than or equal，选择条件版本如下版本，包含条件版本 <=
! : 选择条件版本之外全部版本，不管高低

样式内属性标记法

在CSS样式的属性名前或值后面添加特殊的字符让不一样的浏览器解析
http://browserhacks.com/ 在线查询，这一个功能强大的提供各类针对性兼容办法的网站，很是实用。
“-″下划线是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

选择器前缀法

@media screen\9{...}只对IE6/7生效

文档模式 (X-UA-Compatible)

文档模式的主要做用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪一个版本的方式来解析并渲染网页代码。

JavaScript兼容

第一可使用javascript操做样式与标签，强制浏览器兼容，好比先使用javascript判断浏览器类型，再操做样式与标签。
第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容。

//检测IE各个版本，非IE返回0
var ieVersion = /*@cc_on (function() {switch(@_jscript_version) {case 1.0: return 3; case 3.0: return 4; case 5.0: return 5; case 5.1: return 5; case 5.5: return 5.5; case 5.6: return 6; case 5.7: return 7; case 5.8: return 8; case 9: return 9; case 10: return 10;}})() || @*/ 0;
            alert(ieVersion);
            var isIE = !!window.ActiveXObject;
            alert(isIE);

前端性能优化

要提升前端性能能够从如下几个方面入手:
1)、尽可能减小HTTP请求数量
2)、压缩
3)、缓存
4)、使用内容发布网络（CDN的使用）
5)、DNS Prefetch
6)、将CSS样式表放在顶部
7)、将javascript脚本放在底部
8)、使用外部javascript和CSS
9)、避免重定向

减小HTTP请求

图片地图

可使用Dreamweaver来实现, 也叫热点地图. 使用一张图片, 和定位来实现;

雪碧图

web font

内联资源

所谓的内联资源就是将一些小的资源文件序列化成base64的编码，放在CSS样式或页面中，在客户端再解析，优势是合并了小的文件，减小请求，把二进制变成了字符串方便存储，可是会出一个没有意义的长字符串影响开发时阅读代码，另外在某些状况下将失去图片的缓存。
该技术, 比较适合复用度比较高, 比较小的图片\文本\字体
软件: JSCompress.cn 进行base64编码

合并资源

将多个小的离散的css、js文件合并，注意粒度，把多个请求变成1个请求
软件:
copy a.js+b.js+c.js abc.js /b
Jscompres
CssGaga

压缩

GZIP压缩

GZIP，即网页压缩，是由WEB服务器和浏览器之间共同遵照的协议
Gzip一般能够减小70%网页内容的大小，包括脚本、样式表、图片等文件

实现

开启Tomcat Gzip压缩
IIS 压缩设置
压缩JavaScript, css
优化图像(压缩图片)
jscompress
压缩HTML

缓存

http头部缓存

<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过时时间前浏览器能够直接从浏览器缓存取数据，而无需再次请求新内容，可使用客户端缓存的内容，可是请求仍是会发生，状态为304。浏览器会默认开启缓存功能。

本地存储

LocalStorage、SessionStorage、Web SQL Database

离线缓存

ApplicationCache，在断开服务器时仍然可使用客户端的缓存文件，继续浏览。

动态页面静态化

将动态内容，须要复杂计算的内容变成静态的如HTML、JavaScript
这个技术, 能够试用.

内容分发网路(CDN)

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定，它是一个经策略性部署的总体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。

DNS Prefetch

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的链接时就无需进行 DNS 的解析，减小用户等待时间，提升用户体验。

问题思考: 打开页面时只产生一个HTTP请求，请求大小不超过10K，缓存?

参考资料

流布局与响应式布局有什么区别?, https://www.zhihu.com/question/21679928
聊聊 CSS 中的布局模式, ttps://yq.aliyun.com/articles/608933#
前端布局方式汇总及概念浅析, http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/
Web网页布局的主要方式, https://juejin.im/post/59f706a8f265da43094471a7?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
自适应布局教程--阮一峰, http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
Flex 布局教程--阮一峰, http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
解剖CSS布局原理, https://segmentfault.com/a/1190000009139500
PC端CSS布局汇总, https://segmentfault.com/a/1190000012257390
网路的演变, http://www.evolutionoftheweb.com/?hl=zh-cn

CSS3 & 页面布局

相关连接

字体图标(web font)

css sprite

选择器

优先级

刻度

盒子模型(box model)

边距折叠

内联和块标签

cssreset

BFC

浮动

多种居中方法

块标签自身水平居中

块标签内对齐

垂直居中1

垂直居中2

垂直居中3

垂直居中4

垂直居中5

垂直居中6

垂直居中7

阴影

背景

伪元素

圆角与边框

边框图片

变形transform

页面布局(Page Layout)

浮动布局(Float Layout)

负边距

双飞翼布局

多栏布局

栅格系统

多列布局

弹性布局(Flex Layout)

流式布局(Fluid Layout)

瀑布流布局

响应式布局(Responsive Layout)

媒介查询的概念(Media Query)

媒介设置的语法

响应式栅格系统

移动优先(Mobile First)

视区(viewport)

页面设计(Web Design)

响应式设计(RWD)

自适应设计(AWD)

RWD 和 AWD 的异同

前端预处理技术

前端框架组成

Less

解析方式

混入(Mixins)

嵌套

运算

函数

继承

做用域

注释

Sass

Sass 的两种语法

解析方式

变量

嵌套

导入

混入(mixin)

扩展

运算

函数

流程控制

CoffeeScript

TypeScript

浏览器兼容性与前端性能优化

兼容性主要考虑三方面：

兼容的通常标准

css hack

条件注释

样式内属性标记法

选择器前缀法