视频链接: CSS3 & 页面布局

CSS3与页面布局学习总结（一）CSS3与页面布局学习总结（二）CSS3与页面布局学习总结（三）CSS3与页面布局学习总结（四）CSS3与页面布局学习总结（五）CSS3与页面布局学习总结（六）CSS3与页面布局学习总结（七）CSS3与页面布局学习总结（八）

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

1. 加载慢
2. 放大失真
3. css颜色无法变

语法:

网站: fontello.com

软件: fontcreator

软件:
css satyr
css sprite tool

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

注意把握内嵌样式, 内部样式, 外部样式的使用幅度.

注重加载速度的, 可以使用前两者, 比如首页

其他的, 可以使用外部样式, 比如base, reset等

注意, 继承的优先级所在的位置

• 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），相对于根元素(即)font-size计算值的倍数
• 相对长度, 可以通过设置根节点的值来进行统一. 即只需设置根节点, 所有rem的大小都会改变.

• 实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的tmall就使用这种办法

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

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

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

• 如何形成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 只能影响自己, 不能影响其他元素

• 当一个有宽度的块标签设置时将实现自身的水平居中
  注意, 一般需要宽度

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

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

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

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

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

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

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

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

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

• 文字阴影
• 盒子阴影

• 背景图像尺寸
• 背景图像显示的原点

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

• 圆角
• *画圆时, 4个角圆角是高宽的一半 *
• 如果只提供一个参数，将用于全部的于四个角。
• 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
• 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

• 边框可以图片化

作者想说的：对于布局的分类， 并不是绝对的。所以此分类图，并不绝对准确。在实际学习中，我发现有些布局无法直接归纳入一种类型中，归根结底是因为这些布局在实现时结合了多种方式。对于现在的大部分网页设计来说，功能复杂化界面设计化越来越高，所以这个情况，想必也是这一趋势造成的结果。我的理解，对于页面布局，最重要的是理解其思想，在实际运用中，往往是相互搭配，不能绝对死板。毕竟设计，本身就是一种创造！

对于布局，我们还可以按类型和功能来进行分类。

先来看按类型分类的布局模式：

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

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

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

负边距

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

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

双飞翼布局

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

需要使用到负边距的概念

多栏布局

栅格系统

栅格系统就是利用浮动实现的多栏布局, bootstrap使用比较多

多列布局

栅格系统并没有真正实现分栏效果（如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 '>： 设置或检索对象的列数

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

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

瀑布流布局

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

• 插件：

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

媒介查询的概念(Media Query)

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

• 内部样式
  media screen and (width:800px)
• 导入样式
  import url(example.css) screen and (width:800px);
• 链接样式
  
• XML中应用样式
  

媒介设置的语法

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

响应式栅格系统

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

移动优先(Mobile First)

• 桌面优先(优雅降级)
  这是一种传统的做法，开发项目时优先PC端，然后再通过一些hack的方法让项目正常运行在移动端，所谓的降级可以简单认为就是将一些信息隐藏，因为移动端的可视范围有限，必须给用户提供简洁核心的内容。
• 移动优先(渐进增强)

• 对于产品设计师，一个新产品先设计移动版，然后才是桌面版。
• 对于工程师，一个新产品，先开发移动版，然后才是桌面版本。

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

视区(viewport)

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

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

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

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

• server-side detection
• different versions to different devices
  对于 PC: 可使用流式布局；
  对于 Mobile: 可使用流式布局。推荐一个 Rem 解决方案：

• 设置元素（可以包括字体等）大小为 rem （rem 是以跟元素font-size为基准的单位）
• 按照屏幕宽度的不同，JS 动态设置 的 font-size 大小，元素同样会按照屏幕宽度等比例放大缩小

• 相同点：
  均针对不同的分辨率/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解析为CSS(注意提前装好Less编译器)

解析方式

• 编译器解析

• HBuilder的设置

• 在线解析

• 引入 less.js 进行解析, 发布项目时不建议使用此方法, 消耗资源, 效率较低;

• 预处理

• 使用Node.js 来实现

• koala-app 进行编译

混入(Mixins)

类似函数或宏

• 内置变量@arguments代表所有参数(运行时)的值 注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效
• Mixins必须使用ID或者类，即#xx或.xx，否则无效
• 前面定义的会覆盖后定义的, 在编译时会统一赋后值

嵌套

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

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

运算

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

函数

Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数
注意 data-uri 可以把转换为, 可以做做功课

继承

作用域

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

注释

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

less重要的是函数的内容

以$为标志

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参数

扩展

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

运算

函数

流程控制

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

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

TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法，而且本质上向这个语言添加了可选的和编程。

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

兼容性主要考虑三方面：

• CSS兼容
• JavaScript兼容
• HTML兼容

兼容的一般标准

• 在不同的主流的浏览器上表现效果一致
• 能适应不同的屏幕大小
• 能适应不同的分辨率与色彩深度
  

条件注释

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

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
“90″ 只对IE9/IE10生效，是IE9/10的hack

选择器前缀法

文档模式 (X-UA-Compatible)

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

JavaScript兼容

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

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

减少HTTP请求

图片地图

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

雪碧图

web font

内联资源

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

Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求新内容，可以使用客户端缓存的内容，但是请求还是会发生，状态为304。浏览器会默认开启缓存功能。

本地存储

LocalStorage、SessionStorage、Web SQL Database

离线缓存

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

动态页面静态化

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

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

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