面试

HTML5

what

• 是一套包含HTMML,CSS,JS在内的技术组合，它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务。

优

• 1. 网络标准统一，HTML5本身是由W3C推荐出来的。
• 2. 多设备，跨平台，即时更新。
• 3. 提高可用性和改进用户的友好体验。
• 4. 有几个新的标签将有利于开发者定义重要的内容。
• 5. 可以给站点带来更多的多媒体元素。
• 6. 可以很好的替代Flash和Silverlight。
• 7. 涉及到网站的抓取和索引时，对于SEO很友好。
• 8. 被大量应用于移动应用程序和游戏。

缺

• 1. 安全性：websocket和透明代理的实现有严重安全问题，webstorage和websocket这样的功能很容易被黑客利用来盗取用户的信息与资料。
• 2. 完善性：许多特性浏览器的支持程度不一样。
• 3. 技术门槛：HTML5简化了开发者学习，像web worker、web socket、web storage等新特性，后台甚至浏览器原理的知识。
• 4. 性能：某些平台上的引擎问题导致HTML5性能低下。
• 5. 浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

Doctype作用

• 1. 声明位于文档最前面，处于标签之前，告知浏览器的解析器以何种方式解析文档。
• 2. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
• 3. 在混杂模式中，页面以宽松的方式向后兼容的方式显示。模拟老式浏览器的行为防止站点无法工作。
• 4. Doctype不存在或格式不正确会导致文档以混杂模式呈现。

语义化

• 1. 去掉或样式丢失的时候能让页面呈现清晰的结构
  • ：html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
• 2. 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
  • 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
• 3. PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.
  • 例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
• 4. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
  • 5. 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。
• 6. 便于团队开发和维护

• W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

CSS3

响应式布局

• 媒体查询

• 百分比

  • %单位是依赖于元素的祖先元素。

• rem

  • rem与em区别

    • rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
    • 作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法
    • em是文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)
    • em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。（相对是的HTML元素的字体大，默认16px）
    • em与rem的重要区别： 它们计算的规则一个是依赖父元素另一个是依赖根元素计算

  • 通过 rem 单位来实现适配，需要内嵌一段脚本去动态计算根元素大小。

• vw/vh

  • 使用纯CSS视口单位来自行自适应，虽然现在的兼容性还没法完全能够接受

  • 依赖于视口的尺寸，根据视口尺寸的百分比来定义的

    • vw : 1vw 等于视口宽度的1%
    • vh : 1vh 等于视口高度的1%
    • vmin : 选取 vw 和 vh 中最小的那个
    • vmax : 选取 vw 和 vh 中最大的那个

出现css阻塞地方

• 1. 当css后面跟着嵌入的js时，该css就会出现阻塞后面资源下载的情况，而当把嵌入JS放到css前面就不会出现阻塞。
• 2. 根本原因是浏览器会维持html中css与js的顺序，样式表必须在嵌入的js执行前先加载解析完。但嵌入的js会阻塞后面资源的下载，所以就会出现上面CSS阻塞下载的情况。

优化css性能

• • 减少首次有效绘制时间，只将渲染首屏内容的关键css内联到HTML中（Github上有一个项目Critical CSS可确定哪些内容是首屏关键样式），但内联css不会进行缓存，每次需重新下载。
• • 剩下的css由外部异步加载导入并启动缓存。异步加载方式：
  • • 使用js动态动态创建样式表link并插入到DOM中
  • • 将link元素的media属性设置为用户浏览器不匹配的媒体类型。因为对浏览器来说，如果样式表不适合当前媒体类型，其优先级会被放低，会在不阻塞页面渲染情况下再进行下载，但在文件加载完成后将media的值设为screen或all <link rel="stylesheet" href="mystyle.css" media="noexist" onload="this.media='all'">
• • 文件压缩，只会去除无用的空格。
• • 去除无用的css。编写代码时，尽量提取公共类，减少重复。
• • 有选择的使用选择器
  • 保持简单，不要嵌套过多过于复杂的选择器。
  • • 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

• 减少重排和重绘

  • • 触发重排：font-size、font-family、元素内外边距，通过js改变css类，通过js获取DOM元素位置的相关属性、css伪类激活，滚动滚动条或改变窗口大小。 优先使用flex弹性布局。
  • • 触发重绘：改变元素的外观（如color，background，visibility等属性）

css预处理

• • css预处理器是一种专门的编程语言，用来为css增加一些变成特性（css本身不是编程语言）不需要考虑浏览器兼容问题，因为css预处理器最终编译和输出的仍是标准的css样式。
• • 可在css预处理器中使用变量，简单逻辑判断，函数等基本编程技巧。有合理的样式复用机制。
• less，sass

浮动的原理和工作方式

• • 浮动元素是脱离文档流的，不占据空间。浮动元素碰到包含他的元素的边框或其他浮动元素的边框会停下来。
• • 引发问题：
  • • 父元素的高度无法撑开，影响与父元素同级的元素。
  • • 与浮动元素同级的非浮动元素紧跟其后。
  • • 若非第一个元素浮动，则该元素之前的元素也需要紧跟其后，否则会影响页面的显示的结构。

• 清除浮动：

  • • 在所有浮动标签后面使用空标签清除浮动，定义css clear：both；弊端是增加无意义的标签。
  • • 给浮动元素的父标签添加css属性，overflow：auto；
  • • 非IE浏览器者使用伪元素清除浮动，不过要设置伪对象height：0；否则该元素高度要比实际高出若干像素。

link与@import区别

• • link是HTML标签无兼容问题，页面被加载时，link会同时被加载。
• • @import由css提供，但只在IE5以上才能识别，且引用的css会等到页面被加载完再加载。

absolute与fixed区别

• 共同点：

  • 1. 改变行内元素的呈现方式，display被置为inline-block；
  • 2. 让元素脱离普通流，不占据空间；
  • 3. 默认会覆盖到非定位元素上。

• 不同点：

  • 1. absolute的根元素是可以设置的，而fixed的根元素固定为浏览器。
  • 2. 当你滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。

src与href区别

• src用于替换当前元素，href用于在当前文档和引用资源间确立联系。
• src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置，请求src资源时会将其指向的资源下载并应用到文档中。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似于将所指资源嵌入当前标签内，这也是为啥要将js脚本放在底部而不是头部。
• href指向网络资源所在的位置，建立和当前元素之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet" />，那浏览器就会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css而不是使用@import方式。

bootstrap

JS

js继承及对象共享

• 1.利用原型来继承,通过增加一个空的函数来避免原型链上的对象共享
• 1.利用原型来继承,通过增加一个空的函数来避免原型链上的对象共享

  var a = {name：“小明”}；
      var b = cloneObj(a);
       function cloneObj(obj){
              var f = function(){};
              f.prototype = obj;
              return new f();
      }

2.使用extend，多用于插件封装

示例：

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果：

Result={name:”Momo”,age:23,sex:”gril”};

js阻塞

• why

  • • 所有浏览器在下载JS时会阻塞一切其他活动，比如资源的下载，内容的呈现等等。直到JS下载，解析，执行完才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍会阻塞其他资源的下载，如图片或css文件。
  • • 由于浏览器为了防止JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。
  • • 同时嵌入的脚本会阻塞所有内容的呈现，而由外引入的脚本只会阻塞其后内容的呈现，2种方式都会阻塞其后资源的下载，但是外部引入的脚本可将引入标签写在页面最后就可避免此种情况。

• how to do

  • 嵌入脚本

    • 1. 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
    • 2. 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。
    • 3. 使用 defer（只支持IE）
    • 4. 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用 setTimeout 来调用
  • 1. 将脚本放在底部。还是放在head中，用以保证在js加载前，能加载出正常显示的页面。

HTTP无状态协议

HTTP无状态协议，是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

客户端与服务器进行动态交互的Web应用程序出现之后，HTTP无状态的特性严重阻碍了这些应用程序的实现，毕竟交互是需要承前启后的，简单的购物车程序也要知道用户到底在之前选择了什么商品。于是，两种用于保持HTTP连接状态的技术就应运而生了，一个是Cookie，而另一个则是Session。HTTP本身是一个无状态的连接协议，为了支持客户端与服务器之间的交互，我们就需要通过不同的技术为交互存储状态，而这些不同的技术就是Cookie和Session了。

Cookie是通过客户端保持状态的解决方案。从定义上来说，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。让我们说得更具体一些：当用户使用浏览器访问一个支持Cookie的网站的时候，用户会提供包括用户名在内的个人信息并且提交至服务器；接着，服务器在向客户端回传相应的超文本的同时也会发回这些个人信息，当然这些信息并不是存放在HTTP响应体（Response Body）中的，而是存放于HTTP响应头（Response Header）；当客户端浏览器接收到来自服务器的响应之后，浏览器会将这些信息存放在一个统一的位置，对于Windows操作系统而言，我们可以从： [系统盘]:\Documents and Settings[用户名]\Cookies目录中找到存储的Cookie；自此，客户端再向服务器发送请求的时候，都会把相应的Cookie再次发回至服务器。而这次，Cookie信息则存放在HTTP请求头（Request Header）了。

有了Cookie这样的技术实现，服务器在接收到来自客户端浏览器的请求之后，就能够通过分析存放于请求头的Cookie得到客户端特有的信息，从而动态生成与该客户端相对应的内容。通常，我们可以从很多网站的登录界面中看到“请记住我”这样的选项，如果你勾选了它之后再登录，那么在下一次访问该网站的时候就不需要进行重复而繁琐的登录动作了，而这个功能就是通过Cookie实现的。

与Cookie相对的一个解决方案是Session，它是通过服务器来保持状态的。由于Session这个词汇包含的语义很多，因此需要在这里明确一下 Session的含义。首先，我们通常都会把Session翻译成会话，因此我们可以把客户端浏览器与服务器之间一系列交互的动作称为一个 Session。从这个语义出发，我们会提到Session持续的时间，会提到在Session过程中进行了什么操作等等；其次，Session指的是服务器端为客户端所开辟的存储空间，在其中保存的信息就是用于保持状态。从这个语义出发，我们则会提到往Session中存放什么内容，如何根据键值从 Session中获取匹配的内容等。

要使用Session，第一步当然是创建Session了。那么Session在何时创建呢？当然还是在服务器端程序运行的过程中创建的，不同语言实现的应用程序有不同创建Session的方法，而在Java中是通过调用HttpServletRequest的getSession方法（使用true作为参数）创建的。在创建了Session的同时，服务器会为该Session生成唯一的Session id，而这个Session id在随后的请求中会被用来重新获得已经创建的Session；在Session被创建之后，就可以调用Session相关的方法往Session中增加内容了，而这些内容只会保存在服务器中，发到客户端的只有Session id；当客户端再次发送请求的时候，会将这个Session id带上，服务器接受到请求之后就会依据Session id找到相应的Session，从而再次使用之。正是这样一个过程，用户的状态也就得以保持了。

综上所述，HTTP本身是一个无状态的连接协议，为了支持客户端与服务器之间的交互，我们就需要通过不同的技术为交互存储状态，而这些不同的技术就是Cookie和Session了。

cookie与session区别

​ 1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
​ 2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。考虑到安全应当使用session。
​ 3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
​ 考虑到减轻服务器性能方面，应当使用COOKIE。
​ 4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

cookie的优缺点

优点：

​ 1. 通过良好的编程习惯，控制保存在cookie中的session对象的大小。
​ 2. 通过加密和安全传输技术，减少cookie被破解的可能性。
​ 3. 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
​ 4. 控制cookie的生命周期，使之不会永远有效。偷盗者可能拿到一个过期的cookie。
​ 5.解决无状态问题。

缺点：

​ 1. cookie数量和长度的限制。每个域名最多有20条cookie，每个cookie长度不超过4KB，否则会被截掉。
​ 2. 安全性问题。如果cookie被人拦截，那人就可以获取session信息。即使加密也于事无补，因为拦截者并不需要知道cookie的信息，他只要原样转发cookie就可达到目的。
​ 3. 有些状态不可能保存在客户端。如，为了防止重复提交表单，我们需要在服务器保存一个计数器。如果我们把这个计数器保存在客户端就起不到任何作用。

常用的HTTP方法

• GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器
• POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
• PUT： 传输文件，报文主体中包含文件内容，保存到对应URI位置。
• HEAD： 获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
• DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
• OPTIONS：查询相应URI支持的HTTP方法。

URL和URI区别

URI，是uniform resource identifier，统一资源标识符，用来唯一的标识一个资源。

• Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
• URI一般由三部组成：
• ①访问资源的命名机制
• ②存放资源的主机名
• ③资源自身的名称，由路径表示，着重强调于资源。

URL是uniform resource locator，统一资源定位器，它是一种具体的URI，即URL可以用来标识一个资源，而且还指明了如何locate这个资源。

• URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。
• 采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。URL一般由三部组成：
• ①协议(或称为服务方式)
• ②存有该资源的主机IP地址(有时也包括端口号)
• ③主机资源的具体地址。如目录和文件名等

HTTP请求报文与响应报文格式

请求报文

• a、请求行：包含请求方法、URI、HTTP版本信息
• b、请求首部字段
• c、请求内容实体
• d、空行

响应报文

• a、状态行：包含HTTP版本、状态码、状态码的原因短语
• b、响应首部字段
• c、响应内容实体
• d、空行

常见的首部

• 通用首部字段（请求报文与响应报文都会使用的首部字段）
  • Date：创建报文时间
  • Connection：连接的管理
  • Cache-Control：缓存的控制
  • Transfer-Encoding：报文主体的传输编码方式
• 请求首部字段（请求报文会使用的首部字段）
  • Host：请求资源所在服务器
  • Accept：可处理的媒体类型
  • Accept-Charset：可接收的字符集
  • Accept-Encoding：可接受的内容编码
  • Accept-Language：可接受的自然语言
• 响应首部字段（响应报文会使用的首部字段）
  • Accept-Ranges：可接受的字节范围
  • Location：令客户端重新定向到的URI
  • Server：HTTP服务器的安装信息
• 实体首部字段（请求报文与响应报文的的实体部分使用的首部字段）
  • Allow：资源可支持的HTTP方法
  • Content-Type：实体主类的类型
  • Content-Encoding：实体主体适用的编码方式
  • Content-Language：实体主体的自然语言
  • Content-Length：实体主体的的字节数
  • Content-Range：实体主体的位置范围，一般用于发出部分请求时使用

HTTPS工作原理

• 首先HTTP请求服务端生成证书，客户端对证书的有效期、合法性、域名是否与请求的域名一致、证书的公钥（RSA加密）等进行校验；
• 客户端如果校验通过后，就根据证书的公钥的有效， 生成随机数，随机数使用公钥进行加密（RSA加密）；
• 消息体产生的后，对它的摘要进行MD5（或者SHA1）算法加密，此时就得到了RSA签名；
• 发送给服务端，此时只有服务端（RSA私钥）能解密。
• 解密得到的随机数，再用AES加密，作为密钥（此时的密钥只有客户端和服务端知道）。

一次完整的HTTP请求所经历的7个步骤

HTTP通信机制是在一次完整的HTTP通信过程中，Web浏览器与Web服务器之间将完成下列7个步骤：

• 建立TCP连接

在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建 Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则， 只有低层协议建立之后才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。

• Web浏览器向Web服务器发送请求行

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET /sample/hello.js HTTP/1.1。

• Web浏览器发送请求头
  • 浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。
• Web服务器应答
  • 客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态码。
• Web服务器发送应答头
  • 正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。
• Web服务器向浏览器发送数据
  • Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。
• Web服务器关闭TCP连接
  • 一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：

1

Connection:keep-alive

TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

建立TCP连接->发送请求行->发送请求头->（到达服务器）发送状态行->发送响应头->发送响应数据->断TCP连接

常见的HTTP相应状态码

• 200：请求被正常处理
• 204：请求被受理但没有资源可以返回
• 206：客户端只是请求资源的一部分，服务器只对请求的部分资源执行GET方法，相应报文中通过Content-Range指定范围的资源。
• 301：永久性重定向
• 302：临时重定向
• 303：与302状态码有相似功能，只是它希望客户端在请求一个URI的时候，能通过GET方法重定向到另一个URI上
• 304：发送附带条件的请求时，条件不满足时返回，与重定向无关
• 307：临时重定向，与302类似，只是强制要求使用POST方法
• 400：请求报文语法有误，服务器无法识别
• 401：请求需要认证
• 403：请求的对应资源禁止被访问
• 404：服务器无法找到对应资源
• 500：服务器内部错误
• 503：服务器正忙

HTTP1.1版本新特性

• a、默认持久连接节省通信量，只要客户端服务端任意一端没有明确提出断开TCP连接，就一直保持连接，可以发送多次HTTP请求
• b、管线化，客户端可以同时发出多个HTTP请求，而不用一个个等待响应
• c、断点续传
  • 实际上就是利用HTTP消息头使用分块传输编码，将实体主体分块传输。

HTTP优化方案

• TCP复用：TCP连接复用是将多个客户端的HTTP请求复用到一个服务器端TCP连接上，而HTTP复用则是一个客户端的多个HTTP请求通过一个TCP连接进行处理。前者是负载均衡设备的独特功能；而后者是HTTP 1.1协议所支持的新功能，目前被大多数浏览器所支持。
• 内容缓存：将经常用到的内容进行缓存起来，那么客户端就可以直接在内存中获取相应的数据了。
• 压缩：将文本数据进行压缩，减少带宽
• SSL加速（SSL Acceleration）：使用SSL协议对HTTP协议进行加密，在通道内加密并加速
• TCP缓冲：通过采用TCP缓冲技术，可以提高服务器端响应时间和处理效率，减少由于通信链路问题给服务器造成的连接负担。

Cache-control缓存控制

网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。
其作用根据不同的重新浏览方式分为以下几种情况：
（1） 打开新窗口如果指定cache-control的值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器。
（2） 在地址栏回车如果值为private或must-revalidate（和网上说的不一样），则只有第一次访问时会访问服务器，以后就不再访问。如果值为no-cache，那么每次都会访问。如果值为max-age，则在过期之前不会重复访问。
（3） 按后退按扭如果值为private、must-revalidate、max-age，则不会重访问，而如果为no-cache，则每次都重复访问。
（4） 按刷新按扭无论为何值，都会重复访问 当指定Cache-control值为“no-cache”时，访问此页面不会在Internet临时文章夹留下页面备份。另外，通过指定“Expires”值也会影响到缓存。例如，指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 在ASP中，可以通过Response对象的Expires、ExpiresAbsolute属性控制Expires值；通过Response对象的CacheControl属性控制Cache-control的值，例如： Response.ExpiresAbsolute = #2000-1-1# ‘ 指定绝对的过期时间，这个时间用的是服务器当地时间，会被自动转换为GMT时间 Response.Expires = 20 ‘ 指定相对的过期时间，以分钟为单位，表示从当前时间起过多少分钟过期。 Response.CacheControl = “no-cache” Expires值是可以通过在Internet临时文件夹中查看临时文件的属性看到的。

课程表制作

使用微信小程序制作的课程表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//index.wxml文件

<view>
  <view class="top">
    <view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text">
      周{{item}}
    </view>
  </view>
</view>
<view style="display:flex;flex-direction:row;background:#D2E6B3">
  <view style="color:#7cba23;">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9,10]}}" class="left">
      {{item}}
    </view>
  </view>
  <!-- <view wx:for="{{[1,2,3,4,5,6,7,8,9,10]}}">
    <view style="width:750rpx;margin-top:{{(index+1)*100}}rpx;  position: absolute;border-bottom:1rpx solid {{index==3?'red':'lightgray'}};">
    </view>
  </view> -->
  <view wx:for="{{wlist}}">
    <view class="flex-item kcb-item" bindtap="showCardView" data-statu="open" data-index="{{index}}" style="margin-left:{{(item.xqj-1)*100}}rpx;margin-top:{{(item.skjc-1)*100+10}}rpx;height:{{item.skcd*100-5}}rpx;background-color:{{colorArrays[index%9]}}">
      <view class="smalltext">{{item.kcmc}}</view>
    </view>
  </view>
</view>

index.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

.top {
  display: flex;
  flex-direction: row;
  margin-left: 35rpx;
  background-color: #d2e6b3;
  color: #7cba23;
}
 
.top-text {
  width: 100rpx;
  height: 35rpx;
  font-size: 9pt;
  justify-content: center;
  display: flex;
  align-items: center;
  border: 1px solid gray;
}
.left {
  width: 35rpx;
  height: 100rpx;
  font-size: 9pt;
  justify-content: center;
  display: flex;
  align-items: center;
  border: 1px solid gray;
}

.flex-item {
  width: 95rpx;
  height: 100px;
}
 
.kcb-item {
  position: absolute;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
 
.smalltext {
  font-size: 8pt;
  color: #fff;
  padding-left: 2px;
}

.scroll {
  height: 1170rpx;
  z-index: 101;
  position: fixed;
}

index.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    colorArrays: ["#85B8CF", "#C0C652", "#D8AA5A", "#FC9F9D", "#0A9A84", "#61BC69", "#12AEF3", "#E29AAD"], 
    wlist: [
      { "xqj": 1, "skjc": 1, "skcd": 3, "kcmc": "高等数学@教A-301" },
      { "xqj": 1, "skjc": 5, "skcd": 3, "kcmc": "高等数学@教A-301" },
      { "xqj": 2, "skjc": 1, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 2, "skjc": 8, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 3, "skjc": 4, "skcd": 1, "kcmc": "高等数学@教A-301" },
      { "xqj": 3, "skjc": 8, "skcd": 1, "kcmc": "高等数学@教A-301" },
      { "xqj": 3, "skjc": 5, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 4, "skjc": 2, "skcd": 3, "kcmc": "高等数学@教A-301" },
      { "xqj": 4, "skjc": 8, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 5, "skjc": 1, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 6, "skjc": 3, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 7, "skjc": 5, "skcd": 3, "kcmc": "高等数学@教A-301" },
    ],
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

CSS知识点

一 . 解决老的浏览器支持问题

1.加上相应的前缀即可

2.基本概念

• CSS3弹性盒子：
  • 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式；引入弹性布局的目的是提供更有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。
  • 弹性容器通过设置display属性为flex或inline-flex将其定义为弹性盒子，弹性容器内包含了一个或多个弹性子元素； 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

3.选择器

二 . 多重样式优先级深入概念

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序

下列是一份优先级逐级增加的选择器列表：

• 通用选择器（*）
• 元素(类型)选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

• Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• Never 永远不要在全站范围的 css 上使用!important
• Never 永远不要在你的插件中使用 !important
• • 内联样式表的权值最高 1000；
  • ID 选择器的权值为 100
  • Class 类选择器的权值为 10
  • HTML 标签选择器的权值为 1
• id属性不要以数字开头，数字开头的id在Mozilla/Firefox浏览器不起作用
• 创建样式表
  • 外部样式表
  • 内部样式表
  • 内联样式表
  • 多重样式表

CSS 优先级法则：

• A 选择器都有一个权值，权值越大越优先；
• B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
• C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
• D 继承的CSS 样式不如后来指定的CSS 样式；
• E 在同一组属性设置中标有“!important”规则的优先级最大；

目标选择器

• ：target{ }当目标被选中时就会执行该样式

三 . CSS属性

1.align-content

• align-content属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

• 提示：使用 justify-content 属性对齐主轴上的各项（水平）

  注意：容器内必须有多行的项目，该属性才能渲染出效果。

  CSS 语法

  1	align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

• 属性值

  值	描述
  stretch	默认值。项目被拉伸以适应容器
  center	项目位于容器的中心。
  flex-start	项目位于容器的开头。
  flex-end	项目位于容器的结尾。
  space-between	项目位于各行之间留有空白的容器内。
  space-around	项目位于各行之前、之间、之后都留有空白的容器内。
  initial	设置该属性为它的默认值。
  inherit	从父元素继承该属性。

  #main { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center;}

2.align-items属性

• 设置flex容器的对齐方式，使用每个flex对象元素的 align-self 属性可重写 align-items 属性。
• 语法
  • align-items: stretch|center|flex-start|flex-end|baseline（位置元素在容器的基线）|initial（设为默认值）|inherit;

3.背景属性background

• 当使用简写属性时，属性值的顺序为：:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

四 . 文本格式

• 文本颜色color
• 文本对齐方式：text-align
• 文本修饰：text-decoration
• 文本转换：text-transform
• 文本缩进（指定第一行缩进）：text-indent
• 指定字符间的距离：letter-spacing（可正可负）
• 指定一个段落中行之间的空间：line-height
• 指定单词间的间距：word-spacing

一 . CSS3的基本概念

• CSS 用于控制网页的样式和布局。而CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。
• CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。
• css是指层叠样式表，解决内容与表现分离的问题
• id选择器可为特有的id的html元素指定特定的样式，ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
• 不要在属性值与单位之间留有空格（如：”margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

二 . CSS3的新属性

1.边框border

• 圆角边框：border-radius
  • border-radius：左上 右上 右下 左下；
• 阴影边框：border-shadow
  • box-shadow: 右偏移量 下偏移量 模糊距离 阴影尺寸 颜色 内外阴影；(可同时加多个)
  • • h-shadow：必需，水平阴影的位置。允许负值
    • v-shadow：必需。垂直阴影的位置。允许负值。
    • blur：可选，模糊距离
    • spread：可选，阴影尺寸
    • color：颜色
    • insert：可选，将外部阴影（outset）改为内部阴影，外部阴影是默认值（不允许写）
• 图像边框（IE浏览器不支持）：border-image
• 对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

2.图片滤镜filter属性

• 为元素添加可视效果（如饱和度与模糊度）
• img{ filter:grayscale(100%); //修改所有图片的颜色为100%灰度}
• 常用属性值
  • filter:none | biur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity()| saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

三 . 常见模型和样式表

行内元素只有左右边距，没有上下边距，指定padding值可能有bug

1.居中对齐汇总

1-1 . 水平居中对齐

margin:0 auto;

必须是块级元素，且给定了宽度

text-align:center;

父级元素是块级元素，自身是行内元素或者行内块元素

width:内容宽；height：内容高；padding：盒宽减去内容宽再除以2；background-clip：content-box；

利用padding和background-clip配合实现div的水平居中

.parent{margin:0 auto;width:200px;height:200px;background-color:red;}.children {width: 100px;height: 100px;padding: 50px;background-color: black;background-clip:content-box;/居中的关键/

2 . 垂直居中

line-height:盒子高

自身或者父级元素必须有具体行高

position加translate（-50%，-50%），百分比以自身为基准,适合没固定大小的内容（min-width,max-height,overflow:scroll)

绝对定位

祖先容器：position：relative；

自身：height：***；position：absolute；margin：auto；top：0；left：0；

高度必须给出，建议加overflow：auto；防止内容溢出

内容元素：position: fixed，z-index: 999，记住父容器元素position: relative **

.Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999;}

注意点

1.相邻的垂直块级盒子，外边距会合并，且以最大的外边距为准

2.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块级元素，如果父级元素没有上内边距及边框，则父元素的上边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会合并

解决方法：

• 可以为父级盒子加上1px的上边框或上内边距
• 可以为父元素添加overflow：hidden；

3.宽度属性width和高度属性仅适用于块级元素，对行内元素无效（img标签和input除外）

计算盒子模型总高度时，还应考虑上下两个盒子外边框合并问题

如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小

内盒尺寸（元素实际大小）=width/height+padding+border

4.盒子模型布局稳定性

按照优先使用宽度（width），内边距（padding）外边距（margin）

width > padding > margin

原因：

• margin会有外边距合并问题还有ie下面的margin加倍的bug，所以最后使用
• padding 会影响盒子的大小，需要进行加减计算，比较麻烦，其次使用
• width没有什么问题

5. CSS盒模型

CSS3中可以通过box-sizing来指定盒模型，即指定为content-box，border-box，这样我们在计算盒子大小的方式就发生了变化

可分为以下两种情况：

• box-sizing : content-box ;盒子大小为 width+padding +border，content-border指事默认值，其让元素维持W3C的标准Box Mode

• box-sizing ： border-box；盒子大小就是width，即padding和border是包含在width里面的，新添属性

  注意：上面的标注的width指的是CSS属性里设置的width：length；content的值会自动调整的

6 . CSS层叠样式

• 样式冲突，遵循就近原则。哪个样式离结构近，就执行哪个样式
• 样式不冲突不会层叠

7.CSS继承性

恰当地使用继承可以简化代码，子元素可以继承父元素的样式（text-，font-，line-，这些元素开头的都可以继承，以及color属性）

8.CSS优先级

定义css样式时，经常出现两个或更多规则应用在同一元素上，这时就出现优先级问题

继承样式的权重为0.即在嵌套结构中，不管父元素权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式，行内样式优先，应用style属性的元素，其行内样式的权重非常高，远大于100.

权重相同时遵循就近原则。！important拥有最大的权重

9.浮动Float

• 浮动首先包含块的概念（包裹）。也就是说，浮动的元素总是找离他最近的父级元素对齐，但是不会超过内边距的范围

• 浮动元素排列元素，跟上一个元素（块级）有关。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

一 . Grid布局

• CSS Grid 布局是CSS中最强大的布局系统，是一个二维布局系统（flexbox是一维布局系统），也就意味着它可以同时处理行和列
• grid的目标是完全改变我们基于网格的用户界面的布局方式
• Grid布局由两个核心组成部分是wrapper（父元素）和item（子元素）。wrapper是实际的grid（网格），items是grid（网格内的内容）

1 . 网格容器

• 要把wrapper元素变成grid，只要简单将其display设置为grid即可。应用 display: grid 的元素。这是所有 网格项（grid item）的直接父级元素。
• 属性
  • display：将网格定义为网格容器，并为其内容建立新的网格格式上下文。grid （生成一个块级网格） ；inline-grid （内联网格）

2 .网格项

• 是网格容器的直接子元素（注意：通过嵌套元素（也称为子网格，即 subgrid ）向下传递网格参数的能力已移至 CSS Grid 规范的 Level 2 版本(详情访问 https://www.w3.org/TR/css-grid-2/#subgrids）

3.网格线

• 构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。
• 

4.网格轨道

• 两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。
• 

5.网格单元格

• 两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。

6 .网格区域(grid-template-areas)

• 4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。

• 网格单元格可以认为是网格线行为1和2，以及列网格线1和2之间的网格区域

• 通过引用grid-area属性指定的网格区域名称来定义网格模板，重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表空单元格。这个语法本身可视作网格的可视化结构。

  • :由网格项的grid-area指定网格区域名称

  • none：不定义网格区域

  • .container{ grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: “header header header header” “main main . sidebar” “footer footer footer footer”; }

  • 

  • 注意你不能 用这个语法来命名网格线，只是命名 网格区域

    • 当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线 和 起始列网格线 的名称将为 foo-start，而最后一条行网格线 和 最后一条列网格线 的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start 。

• columns（列）和rows（行）

  • 为了使其成为网格的二维容器，需要定义行和列。

  • 要定位和调整items（子元素）大小，我们将使用grid-column和grid-row属性来设置。使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

    • track-size： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位） line-name`：你可以选择的任意名称

    • 1 2	grid-template-columns: <track-size> ... | <line-name> <track-size> ...; grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

    • 定义100px宽的3列 grid-template-columns ：100px 100px 100px;

    • 定义50px高的两行 grid-template-rows : 50px 50px；

    • 1 2	grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;

    • 

    • .wrapper{display: grid；grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px；}

    • 如果你的定义包含多个重复值，则可以使用 repeat() 表示法来简化定义： grid-template-columns:repeate(3,20px [col-start]);

    • 你也可以明确的指定网格线(Grid Line)名称

      1 2	grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]

    • 如果多行共享相同的名称，则可通过网格线名称和计数来引用它们 grid-template-start: col-start 2;

    • fr单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如grid-temp-columns : 1fr 1fr 1fr ;该代码会将每个网格项设置为网格容器宽度的三分之一：

• 放置items（子元素）

  • 设置子元素的大小可通过网格线来设置
  • • .item1{grid-column-start :1;grid-column-end :4;}
    • 简写式 .item1{grid-column: 1 / 4 ;}
    • 表示item1占据从第一条网格线开始，到第四条网格线结束（注意：3列有4条网格线）

1
2
3
4
5
6
7
8
9
10
11
12

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

7. 简写属性grid-template

• 用于定义rows , columns , areas 简写属性 grid-template: none | / ;
• none：将所有三个属性设置为其初始值
• <grid-template-rows> / <grid-template-columns>：将 grid-template-columns 和 grid-template-rows`设置为相应地特定的值，并且设置grid-template-areas为none

游戏：

如果你觉得同时输入grid-column和grid-row也很复杂，我们还有另一种缩写。grid-area属性接受4个由’/‘分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。

举个例子如下所示：grid-area: 1 / 1 / 3 / 6;。

如果我们有很多个网格项呢？你可以任意覆盖它们不用有任何担心。用grid-area定义第二个网格项为所有未浇水的胡萝卜浇水。

一 . 边框border

1.圆角边框borde-radius

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同
• border-top-left–radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。

2.盒阴影box-shadow

• box-shadow: h-shadow v-shadow blur spread color inset;

• boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

  值	说明
  h-shadow	必需的。水平阴影的位置。允许负值
  v-shadow	必需的。垂直阴影的位置。允许负值
  blur	可选。模糊距离
  spread	可选。阴影的大小
  color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

3.边界图片border-image

• 将图片规定为包围div的边框

• -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 /
  -o-border-image:url(border.png) 30 30 round; / Opera */
  border-image:url(border.png) 30 30 round;

• 简写属性border-image：source slice width outset repeate;

• border-image-slice:图片边框向内偏移，没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素，剪裁位置(27)。

  值	描述
  number	数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
  %	相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
  fill	保留边框图像的中间部分。

• border-image-outset：边框图像区域超出边框的量

  • 1	border-image-outset: length|number;

    注释：border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。

• border-image-repeate：图像边框是否平铺（repeated），铺满（rounded）或拉伸（streched）；

  • 该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。

    值	描述
    stretch	拉伸图像来填充区域
    repeat	平铺（重复）图像来填充区域。
    round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

4.简写属性

1. border：width style color;

2.borde-width属性

• 4个值时 ，如 border-width:thin medium thick 10px;上细右中等下粗，左为10像素的边框
• 3个值时，上 右和左 下
• 2个值时 ， 上和下 左和右
• 1个值时 ， 所有边框都一样

3.border-style属性

• 属性值个数如上图，值的分布状况也一样
• none：无边框
• hidden：与：none相同，不过，应用于表时除外，对于表，hidden解决边框冲突问题
• dotted：点状边框
• dashed：虚线
• solid：实线
• double：双线
• groove/ridge：定义3D凹槽边框/3D 垄状边框。其效果取决于border-color
• inset/outset：定义 3D inset/outset 边框。其效果取决于 border-color 的值。
• inherit：指定应该从父元素继承border属性值

4.表格边框border-collapse

• border-collapse属性设置表格的边框是否合并为一个单一的边框，还是像标准的html中那样分开显示
• 属性值
  • collapse：边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性
  • separate：默认值，边框会被分开，不会忽略border-spacing和empty-cells属性
  • inherit：规定应该从父元素继承border-collapse属性的值
• border-spacing属性设置相邻单元格的边框间的距离（仅用于边框分离模式）
  • 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
  • border-spacing：10px 20px；
• empty-cells属性设置是否显示表格中的空单元格（仅用于分离边框）
  • hidden：不在空单元格周围绘制边框
  • show：在空单元格周围绘制边框，默认
  • inherit：继承
  • 只有指定!DOCTYPE,IE8才支持empty-cells属性

二 . CSS3背景background

1.背景图片background-image

• 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

• background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;

• background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

  • CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

  • 你指定的大小是相对于父元素的宽度和高度的百分比的大小。

  • background-size: length|percentage|cover|contain;

    值	描述
    length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
    percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
    cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

• background-position属性设置背景图像的起始位置。

  • 注意对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed（固定）”。

  • 示例代码：

    background-image:url(‘smiley.gif’);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;

  • 提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。

  • 1	background-position: horizontal vertical

    水平是

    1	percentage | length | left | center | right

    垂直是

    1	percentage | length | top | center | bottom

• background-Origin属性指定了背景图像的位置区域。

  • background-Origin属性指定background-position属性应该是相对位置。
  • 注意：如果背景图像background-attachment是”固定”，这个属性没有任何效果。
  • content-box, padding-box,和 border-box区域内可以放置背景图像。

• background-clip属性

  • background-clip: border-box|padding-box|content-box;

    值	说明
    border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
    padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
    content-box	背景绘制在内容方框内（剪切成内容方框）。

2.背景固定属性background-attachment

• background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

3.背景层混合模式background-blend-mode属性

• background-blend-mode 属性定义了背景层的混合模式（图片与颜色）

• background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

  值	描述
  normal	默认值。设置正常的混合模式。
  multiply	正片叠底模式。
  screen	滤色模式。
  overlay	叠加模式。
  darken	变暗模式。
  lighten	变亮模式。
  color-dodge	颜色减淡模式。
  saturation	饱和度模式。
  color	颜色模式。
  luminosity	亮度模式。

4.背景颜色background-color

1 . CSS3渐变Gradients

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

  • 为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

  • background: linear-gradient(direction, color-stop1, color-stop2, …);

  • 例子 ：都是从左开始渐变

    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 /
    background: -o-linear-gradient(right, red, blue); / Opera 11.1 - 12.0 /
    background: -moz-linear-gradient(right, red, blue); / Firefox 3.6 - 15 /
    background: linear-gradient(to right, red , blue); / 标准的语法（必须放在最后） */

  • 使用角度

    • background: linear-gradient(angle, color-stop1, color-stop2);
    • 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
    • 但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

  • 使用透明度（Transparency）

    • CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。为了添加透明度，我们使用 rgba() 函数来定义颜色结点。
    • rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

  • 重复的线性渐变

    • repeating-linear-gradient() 函数用于重复线性渐变
    • background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

• 径向渐变（Radial Gradients）- 由它们的中心定义

  • 为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

  • background: radial-gradient(center, shape size, start-color, …, last-color);

  • 径向渐变 - 颜色结点不均匀分布

    • background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

  • 设置形状

    • shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
    • background: -webkit-radial-gradient(circle, red, yellow, green);

  • 不同尺寸大小关键字的使用

    • closest-side

    • farthest-side

    • closest-corner

    • farthest-corner

三 . 文本效果

1.文字阴影text-shadow

• text-shadow: h-shadow v-shadow blur color;
• text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

2.文字溢出text-overflow

• text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

• text-overflow: clip|ellipsis|string;

  值	描述
  clip	修剪文本。
  ellipsis	显示省略符号来代表被修剪的文本。
  string	使用给定的字符串来代表被修剪的文本。

3.文字换行word-wrap

注意：所有主流浏览器都不支持

• word-wrap属性允许长的内容可以自动换行。

• word-wrap: normal|break-word;

  值	描述
  normal	只在允许的断字点换行（浏览器保持默认处理）。
  break-word	在长单词或 URL 地址内部进行换行。

4.单词拆分换行word-break

• word-break 属性规定自动换行的处理方法。

• word-break: normal|break-all|keep-all;

  值	描述
  normal	使用浏览器默认的换行规则。
  break-all	允许在单词内换行。
  keep-all	只能在半角空格或连字符处换行。

5.文本最后一行对齐text-align-last

• 只有 Internet Explorer 支持 text-align-last 属性。Firefox 支持另一个可替代该属性的属性，即 -moz-text-align-last 属性。
• 注意：text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。
• text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

7.文本修饰text-decoration

• 值	描述
  none	默认。定义标准的文本。
  underline	定义文本下的一条线。
  overline	定义文本上的一条线。
  line-through	定义穿过文本下的一条线。
  blink	定义闪烁的文本。
  inherit	规定应该从父元素继承 text-decoration 属性的值。

8.文本首行缩进text-indent

• text-indent 属性规定文本块中首行文本的缩进。负值是允许的。如果值是负数，将第一行左缩进。

9.文本大小写转换text-transform

10.字间距word-space

• 负值是允许的。

四 . 多列

1.文本分成多列属性columns

• columns: column-width column-count;

2.列间隔column-gap

• column-gap 属性规定列之间的间隔。

• 注释：如果列之间设置了 column-rule，它会在间隔中间显示。

  column-gap: length|normal;

  值	描述
  length	把列间的间隔设置为指定的长度。
  normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

3.指定列间的规则column-rule

• column-rule: column-rule-width column-rule-style column-rule-color;

  值	说明
  column-rule-width	设置列中之间的宽度规则
  column-rule-style	设置列中之间的样式规则
  column-rule-color	设置列中之间的颜色规则

• column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

• column-rule-width: thin|medium|thick|length;

• column-span: 1|all;

  值	描述
  1	元素应横跨一列。
  all	元素应横跨所有列。

五 . 用户界面

1.调整尺寸resizing

• resize属性指定一个元素是否是由用户调整大小的

• 注意：resize属性适用于计算其他元素的溢出值是不是“visible”

• resize:none| both | horizontal | vertical;

  值	描述
  none	用户无法调整元素的尺寸。
  both	用户可调整元素的高度和宽度。
  horizontal	用户可调整元素的宽度。
  vertical	用户可调整元素的高度。

2.方框大小调整box-sizing

• box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

• box-sizing: content-box|border-box|inherit:

  值	说明
  content-box	这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
  border-box	指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算
  inherit	指定box-sizing属性的值，应该从父元素继承

3.外形调整outline-off

• outline轮廓是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

• outline属性的简写顺序：color——style——width

• outline-offset属性设置轮廓框架在border边缘外的偏移

• outlines在两个方面可能不同于边框

  • outlines不占用空间
  • outlines可能非矩形

• outline-offset: length|inherit:

  值	描述
  length	轮廓与边框边缘的距离。
  inherit	规定应从父元素继承 outline-offset 属性的值。

4.标准用户界面appearance

• appearance: normal|icon|window|button|menu|field;

  值	说明
  normal	正常呈现元素
  icon	作为一个小图片的呈现元素
  window	作为一个视口呈现元素
  button	作为一个按钮，呈现元素
  menu	作为一个用户选项设定呈现元素选择
  field	作为一个输入字段呈现元素

六 .盒子模型box-sizing

• 用于控制元素的盒子模型的解析模式

• CSS 3中，所有的页面元素都包含在一个矩形框内，称为盒子。盒子描述了元素及其属性在页面布局中所占的空间大小。

  

1.标准盒模型box-sizing：content-box；

• W3C默认的标准盒子模型
• 宽度计算，总宽度=内容宽（width）+border+padding+margin；
• 这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。
• 注意：我们通过JavaScript代码获取某一个元素的大小时，所得到的width和height其实是盒子模型中的content的大小。

2.IE传统盒子模型box-sizing：border-box；

• 总宽度=内容宽（width+padding+border）+margin；
• 假设我们有这样的一个场景，设置子类元素的margin或者border时，可能会撑破父层元素的尺寸，这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中，这样就不会存在撑破父层元素的情况了。
• 表单中有一些input元素其实还是展现的是传统IE盒模型，带有一些默认的样式，而且在不同平台或者浏览器下的表现不一，造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。

3.外边距重叠

• 两个外边距相加，并没有重叠，而是取两者间的最大值
• 解决方法
  • 两者只设置其中一个
  • 两者间添加内容

4.子改父改问题

• 当两个div是父子级关系时，当为子级元素设置外边框时，子级会将上外边距的值传给父级，导致父，子级的显示同时改变
• 解决方法
  • 给父级的div设置上内边距padding-top（改变父级div的height）
  • 给父级div设置透明边框border：1px solid transparent;(同时改变父级div的height和width)

5.盒模型在不同情况下的表现

1.块级元素盒模型的默认宽度

如果一个块级元素未声明明确的宽度，并且是static或者relative定位，那么他的宽度将会保持100%的宽度（这里的100%指的是其最近父层元素），同时盒子的padding和border会向内推动而不是向外扩展。

• 但是，如果一旦明确设置了宽度为100%，那么padding将会向外延伸。

2.无宽度的绝对定位盒子

• 未设置宽度的绝对定位的盒子的表现与之前有点不同。它的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加。这种情况会持续到盒子的宽度达到父层元素宽度的100%（最近的相对定位的父元素或者浏览器窗口），如果再超出，文本就会发生折行。
• 对盒子来说，垂直扩展以适应包含的内容是很自然的。但是值得奇怪的是，不仅仅是不同平台下的文本表现不同，不同的浏览器处理这个问题时，也有很多怪癖。

3.内联元素的盒模型

• padding应用在文本的上部或下部，但是当折行时它会忽略上面一行的padding并且以行高（line-height）要求的位置作为起点。而设置的margin值只在第一行有效，因为那是盒子的起点

6.CSS3弹性盒子flexbox

• 而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。

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

• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

• 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

• 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

  

1.指定弹性子元素在父容器中的位置flex-direction

• flex-direction 属性规定灵活项目的方向。

• 当你调转行和列的方向时，flex-start和flex-end对应的方向也被调转；

• 当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

• flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

  值	描述
  row	默认值。灵活的项目将水平显示，正如一个行一样。
  row-reverse	与 row 相同，但是以相反的顺序。
  column	灵活的项目将垂直显示，正如一个列一样。
  column-reverse	与 column 相同，但是以相反的顺序。
  initial	设置该属性为它的默认值。
  inherit	从父元素继承该属性。

2.内容（横轴上）对齐justify-content属性

• 内容对齐justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

• justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

• justify-content: flex-start | flex-end | center | space-between | space-around；

  • flex-start：

    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：

    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：

    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：

    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：

    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

3.侧轴方向上的对齐方式align-items

• align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
• align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

4.弹性盒子子元素换行方式flex-wrap

• flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

• flex-wrap ：normal | wrap | wrap-reverse | initial |inherit ;

  值	描述
  nowrap	默认值。规定灵活的项目不拆行或不拆列。
  wrap	规定灵活的项目在必要的时候拆行或拆列。
  wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
  initial	设置该属性为它的默认值。
  inherit	从父元素继承该属性

5.设置各个行（垂直方向）的对齐aign-content

• 设置行与行之间的距离
• align-content属性在弹性容器内的各项没有占用交叉轴上所有可用空间时对齐容器内的各项（只在垂直方向上，都是单独占据一行）
• align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

6.排列弹性子元素order

• 用整数来定义排列顺序，数值小的排在前面，可为负值。 设置或检索弹性盒模型对象的子元素出现的順序。
• order: number|initial|inherit;

7.完美居中margin：auto；

• 使用弹性盒子，只需设置margin：auto；可使得弹性子元素在两上轴方向上完全居中

8.设置弹性元素自身在侧轴方向上的对齐方式align-self

• align-self:auto | flex-start | flex-end | center | baseline | stretch

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

  • align-self 属性可重写灵活容器的 align-items 属性。

9.指定子元素如何分配空间flex

• flex属性用于设置和检索弹性盒模型对象的子元素如何分配空间

• flex属性是flex-grow，flex-shrink和flex-basis属性的简写属性

• 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

• flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

  值	描述
  flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
  flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
  flex-basis	项目的长度。合法值：”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。
  auto	与 1 1 auto 相同。
  none	与 0 0 auto 相同。
  initial	设置该属性为它的默认值，即为 0 1 auto。
  inherit	从父元素继承该属性。

10.设置flex容器的对齐方式align-items

• 使用每个flex对象元素的 align-self 属性可重写 align-items 属性。

• align-items： stretch | center | flex-start | flex-end | baseline | initial | inherit;

  值	描述
  stretch	默认。 拉伸元件以适应容器。
  center	中心元素在容器内。
  flex-start	位置元素在容器的开头。
  flex-end	位置元素在容器的末端。
  baseline	位置元素在容器的基线。
  initial	设置为默认值。
  inherit	从其父元素继承此属性。

七 . 重置所有属性all

• all 属性用于重置所有属性，除了 unicode-bidi 和 direction。

• all: initial|inherit|unset;

  值	描述
  initial	修改所有元素属性或父元素的值为其初始化值
  inherit	修改所有元素属性或父元素的值为其父元素的值
  unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

八 . 多媒体查询@media

• CSS3的多媒体查询继承了CSS2多媒体查询类型的所有思想：取代了查找设备的类型，CSS3根据设置自适应显示。适合于设置设计响应式的页面。

• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

• 媒体查询可检测的东西

  • viewport（视图）的宽度与高度
  • 设备的宽高
  • 朝向（智能手机横屏，竖屏）
  • 分辨率

• 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

  • 如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
    • not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
    • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
    • all: 所有设备，这个应该经常看到。

• 你也可以在不同的媒体上使用不同的样式文件：

  1	<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

九 . 选择器

优先级

• 第一个数字(a)通常就是0，除非在标签上使用style属性；
  第二个数字(b)是该选择器上的id的数量的总和；
  第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
  第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；通用选择器(*)是0优先级；

• 

1，基本选择器语法

2，层次选择器语法

3，动态伪类选择器语法

4，目标伪类选择器

5，UI元素状态伪类选择器语法

6，结构伪类选择器使用语法

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n) 中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

7，否定伪类选择器

8，属性选择器语法

注：例

十 . 定位position

1.绝对定位absolute

• 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
• Absolutely定位使元素的位置与文档流无关，因此不占据空间,Absolutely定位的元素和其他元素重叠。
• 相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

2.相对定位relative

• 相对定位元素的定位是相对其正常位置。
• 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
• 相对定位元素经常被用来作为绝对定位元素的容器块。

3.没有定位static

• HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

4.固定定位fixed

• 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
• Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

5.堆叠元素z-index

• 元素的定位与文档流无关，所以它们可以覆盖页面上的其他元素

• z-index属性指定了一个元素的堆叠顺序，具有更高堆叠顺序的总是在较低的堆叠顺序元素的前面

• 如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面

  值	描述
  auto	默认。堆叠顺序与父元素相等。
  number	设置元素的堆叠顺序。
  inherit	规定应该从父元素继承 z-index 属性的值。

6.浮动float和清浮动clean

• 注意： 绝对定位的元素忽略float属性！

  值	描述
  left	元素向左浮动。
  right	元素向右浮动。
  none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
  inherit	规定应该从父元素继承 float 属性的值。

• clear属性指定段落的左侧或右侧不允许浮动的元素。

  值	描述
  left	在左侧不允许浮动元素。
  right	在右侧不允许浮动元素。
  both	在左右两侧均不允许浮动元素。
  none	默认值。允许浮动元素出现在两侧。
  inherit	规定应该从父元素继承 clear 属性的值。

十一 . css居中汇总

1.水平居中

margin:0 auto;

必须是块级元素，且给定了宽度

text-align:center;

父级元素是块级元素，自身是行内元素或者行内块元素

width:内容宽；height：内容高；padding：盒宽减去内容宽再除以2；background-clip：content-box；

利用padding和background-clip配合实现div的水平居中

.parent{margin:0 auto;width:200px;height:200px;background-color:red;}.children {width: 100px;height: 100px;padding: 50px;background-color: black;background-clip:content-box;/居中的关键/

line-height:盒子高

自身或者父级元素必须有具体行高

position加translate（-50%，-50%），百分比以自身为基准,适合没固定大小的内容（min-width,max-height,overflow:scroll)

2 . 垂直居中

#ex3_container{ width:200px; height:200px; background-color:yellow; position:relative; }

#ex3_content{ left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }

绝对定位

祖先容器：position：relative；

自身：height：***；position：absolute；margin：auto；top：0；left：0；

高度必须给出，建议加overflow：auto；防止内容溢出

内容元素：position: fixed，z-index: 999，记住父容器元素position: relative

3.视口居中

内容元素： postion：fixed；z-index：999；记住父容器元素position：relative；

.Absolute-Center.is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}

详情请看：https://www.w3cschool.cn/css/css-center.html

网页布局

1.尽力四个阶段

• table表格布局，通过dw拖拽表格或者手写table标签布局
• float浮动以及position定位布局，借助元素盒模型本身的特性以及float position等属性
• flex弹性盒模型布局，革命性的突破，解决传统方案上的三大痛点 排列方向 ，对齐方式，自适应尺寸。是目前最强大，最成熟的布局方案
• grid栅格布局，二维布局，具有强大的内容尺寸和定位能力，适合在两个维度上对齐内容的布局

十二 . Grid布局

1.将容器定义为grid（网格布局）

• display ： grid / inline-grid；

  • grid：生成一个块级网络
  • inline-grid：生成一个内联网格

• 网格容器是所有网格项（grid item)的直接父级元素，将元素定义为网格容器，并未其内容建立新的网格格式上下文。

• 网格项目默认放在行中，并且跨网格容器的全宽

• 注意：float ，display : inline-block ,display :table-cell，vertical-align，column-*属性对网格项无效

2.定义网格行和列grid-template-columns和grid-template-rows

• 使用空格分隔的值列表，用于定义网格的行与列，这些值表示网格轨道（grid track）大小，它们之间的空格表示网格线

• grid-template-columns ： … | … ;

  • track-size :可以是长度值，百分比 ，或者等份网络容器中可用空间（使用fr单位）

  • line-name ： 你可以选择的任意名称

    

• 通过grid-rows可给定行的高度值，若没有给定则按照自身的内容来定义

• 如果你的定义包含多个重复值，可使用repeat（）表示法简化定义

  • grid-template-columns ： repeate（3，20px [col-start]);

• fr单元格允许你用等分容器剩余可用空间来设置网格轨道的大小（grid track）

  • grid-template-columns：1fr 1fr 1fr ;

3.网格区域grid-template-area

• 通过引用grid-area属性指定网格区域名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格
• grid-template-area : “ | . | none | … “ “ ….” ;
  • grid-area-name :由网格项的grid-area指定的网格区域的名称
  • . （点号）：代表一个空的网格区域名称
  • none ： 不定义网格区域

4.简写属性grid-template

• grid-template ：none | grid-template-rows / grid-tempalte-columns ；
  • none ：将属性设置为其初始值
  • grid-template-rows / grid-template-columns ：将grid-template-columns和grid-template-rows设置为特定的值，并且设置grid-template-area为none

5.间距大小column-gap/row-gap

• 设置行/列之间间距的宽度，且只能在行/列之间创建间距，网格外部边缘不会有这个间距
• 简写属性gap
  • gap：row-gap column-gap；
  • gap：15px 10px;表示行间距15px，列间距10px

网格项目

网格项对齐

【justify-self】

justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

1

`auto | normal | start | ``end` `| center | stretch | baseline | first baseline | last baseline`

网格轨道对齐

　　网格轨道对齐可以相对于网格容器行和列轴。

　　align-content指定网格轨道沿着行轴对齐方式；justify-content指定网格轨道沿着列轴对齐方式。它们支持下面属性：

1

`normal | start | ``end` `| center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline`

6.行轴线对齐justify-items

• 沿着inline（行）轴线对齐网格项（grid items）此值适用于容器中所有网格项。
• justify-items ：start | end | center | stretch；
  • start ：将网格对齐到其单元格的左侧起始边缘（左侧对齐）
  • end ：右侧对齐
  • center：中间对齐
  • stetch：填满单元格的宽度（默认值）
• 这些行为可通过单独网格项的justify-self属性进行设置

7.列轴线对齐align-items

• 沿着 block（列）轴线对齐网格项(grid items)

• 1 2 3 4 5 6

  align-items: start | end | center | stretch; start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐） end：将网格项对齐到其单元格的底部结束边缘（底部对齐） center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐） stretch：填满单元格的高度（默认值）

8.对齐简写属性place-items

• place-items ： align-items justify-items ；

9.网格容器大小justify-content

• justify-content : start | end | center | stretch | space-around | space-between | space-evenly ;
  • start：将网格对齐到 网格容器(grid container) 的左侧起始边缘（左侧对齐）
  • end：将网格对齐到 网格容器 的右侧结束边缘（右侧对齐）
  • center：将网格对齐到 网格容器 的水平中间位置（水平居中对齐）
  • stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
  • space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
  • space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
  • space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

10.place-content: align-content justify-content;

11.创建隐式网格轨道

• 指定任何自动生成的网格轨道（grid tracks/隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时就会创建隐式轨道

• 显式的是通过固定数量的网格线和网格轨道进行定义的

• 自动填充轨道auto-fill

  • auto-fill关键字创建适合网格容器的轨道数，而不会导致网格溢出
  • 注：repeat（auto-fill ，1fr）；只会创建一个轨道，因为宽度为1fr的单个轨道已经填满了整个网格容器

• 自动调整轨道auto-fit

  • auto-fit关键字创建适合网格容器的轨道数，但在网格项目放置后，他只会根据需要创建任意数量的轨道，并且任何空的重复轨道都会折叠在一起
  • 可以通过minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压
    • grid-auto-columns：minmax（60px，200px）；
    • 隐式轨道现在至少有60px宽，最大有200ps像素

12.自动放置grid-auto-flow

• 如果项目数超过单元格数，也会添加隐式轨道。默认下，自动放置算法通过连续填充每一行来放置网格项，并根据新行添加新行。可使用grid-auto-flow属性来指定如何把网格项自动放置到网格容器

• 如果网格项数超过单元格数量，则添加新列而不是行

13.未定义显式网格

• 由于可以使用grid-auto-rows和grid-auto-columns自动调整单元格大小，因此不必定义显示网格

推荐网址：https://www.cnblogs.com/wangxiang9528/p/9867822.html

https://www.cnblogs.com/hsprout/p/8277322.html

十三 . flexbox布局

• 任何一个容器都可以指定为flex布局，设置diaplay：flex；属性后，子元素的float，clear和vertical属性将会失效

1.定义在容器的属性

https://www.cnblogs.com/hsprout/p/8277322.html（表难看时可看这个链接）

十四 . 补充

1.before和after伪类选择器

• 他们会在被选中的标签周围生成一些内容

• 清除浮动

  .clearfix : after {

  content : “ “;display : block ; clear :both ; visibility : hidden ; font-size :0 ;height: 0;

  }

  .clearfix {

  display : inline-block;height: 1% ;

  }

  上面这段代码会在目标标签后面补上一段空白，然后将他清除。这个方法很实用，特别当 overflow ： hidden ；方法不顶用时

• 要使用伪标签者必须是块式标签

• 选择器大汇总

  • 通用选择器*
  • 标签p class（.） id（#）选择器
  • 后代选择器X Y(X>Y)
  • 相邻选择器X+Y
  • 兄弟选择器X~Y
  • 属性选择器X[title] X[title=“值” ]
  • 开头匹配属性选择器X[href^=”值 “]
  • 结尾匹配属性选择器X[href$=”值 “]
  • 自定义选择器 X[data-*=”foo”]
  • 取反伪类 X:not(selector)
  • 伪元素:first-line,:first-letter,:before,:after
  • 伪类： X:nth-child(n)， X:nth-last-child(n)，X:nth-of-type(n)，X:nth-last-of-type(n)， X:first-child， X:last-child，X:only-child，X:only-of-type，X:first-of-type，

https://www.w3cschool.cn/css/css-selector.html

2.区块属性（block）

• 字间距{letter-spacing：normal；}
• 对齐{text-align ：justify；}（两端对齐）left（左对齐）center（居中）
• 缩进{text-indent：数值px；}
• 垂直对齐{vertical-align：baseline；}（基线）sub；（下标）sup；（上标）top；text-top；middle；bottom；text-bottom；
• 词间距{word-spacing：normal；}数值
• 空格white-space：pre；（保留）nowrap；（不换行）
• 显示{display：block；}（块）inline；list-item；（列表项）run-in；（追加部分）compact；（紧凑）marker；（标记）table；inline-table；table-raw-group；table-header-group；table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

3.透明度opacity

• 如何用CSS实现背景半透明效果？我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。

• 一般情况下，我们可以使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用。解决方法

  • 使用一张透明的图片做背景可以达成效果
  • 使用RGBA

• CSS在设置了透明度的层里，怎么让里面的层不透明

  • 如果是颜色，完全可以用背景色透明 rgba来代替opacity，
  • 如果是图片，就用ps简单处理一下即可。
  • opacity这个属性指定的透明是包括里面的元素的，不可能只有外面透明，里面不透明

• css里边写透明样式怎么写

  • 如果是用样式的话需要用到滤镜
    style=”filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)”

    说明：
    Opacity：起始值，取值为0～100, 0为透明，100为原图。
    FinishOpacity：目标值。
    Style：1或2或3
    StartX：任意值
    StartY：任意值

  • 但是因为滤镜的兼容性问题，最好是不要用，可以用ps做图的时候，把背景调一下透明度后导成png格式的图片就行了，如果透明的背景颜色一样的话，那么你可以切成1px*1px大小的png图片平铺，gif只支持透明度100%也就是完全透明的图片，半透明的不支持，而png格式的图片则不存在什么问题，唯一会有问题的地方就只是IE6不兼容透明png格式而已。

4.css hack（浏览器兼容问题）

• CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的， Hack主要针对IE浏览器。
• CSS Hack常见的有三种形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
  1、属性级Hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。
  2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
  3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<![endif]–>，针对IE6及以下版本：<![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。
• PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

一 . 元素细节

1.a链接标签

如果没有href属性，则不能使用hreflang，media，rel，target，type属性且该标签仅仅是一个占位符；通常在当前浏览器窗口显示被链接页面，除非规定了其他target

可链接到指定id位置

2.area标签

能够在所需图像上设置作用区域，使用者可通过点击该作用区域来跳转到相应的页面

3.abbr标签

用来表示一个缩略词或首字母缩略词，通过对缩略词语进行标记，能为浏览器，拼写检查程序，翻译系统以及搜索引擎分度器提供有用的信息The WHO was founded in 1948.

4.article标签，aside标签

article标签定义独立的内容，定义的内容必须是有意义的且必须独立于文档的其他内容。论坛帖子，博客文章，新闻故事，评论都是其潜在来源

aside标签用来表示跟当前页面的内容没有很大关系的部分，通常显示侧边栏和补充关系的内容，如目录，索引等。注意：不要用aside元素去标记括号内的文本，因为这种类型的文本被认为是其内容流的一部分。

5.address标签

可得到某个文档中所属作者或者持有者的相关信息。

• 位于body元素内部，表示文档作者/所有者的联系信息
• 位于article元素内部，表示该文章作者/所有者的联系信息
• 如果行文中出现了一些随意的地址，你就不应该使用address元素，而应该使用普通的

  元素就行了。

• address元素里应该只存放地址信息，不要放置其它跟地址不相关的信息，比如出版时间，你应该把它放到time元素里。

6.base标签

• 规定所有链接的默认URL和默认目标必须位于head标签内，且一个文档最多使用一个base元素
• 最好把base标签放在head元素的第一位，这样head区域的其他元素就可以使用base元素的信息
• 如果使用base标签，则必须具备href或者target属性或者两个属性都具备，支持全局属性，不支持任何事件

7. blockquote标签

• 用于引用大段的内容块，处于该标签的文本会独自分离出来且自动缩进
• 如果标签是不需要段落分隔的短引用，请使用q标签
• 若引文来自网络，则可将原内容的出处URL地址设置到cite属性上，若要以文本的形式告知读者引文的出处，可用cite标签

8.button标签

• 可定义一个按钮，在button元素内部可放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处

• 请始终为button元素规定type元素。不同浏览器对button元素的type属性使用不同的默认值，IE将提交button与/button之间的文本，而其他浏览器将提交value属性的内容。

  • 在使用标签时很容易想当然的当成 使用，这很容易产生以下几点错误用法：

    1、通过$(‘#customBtn’).val()获取按钮 value的值

    ​ 在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。

• 如果在 HTML 表单中使用 元素，不同的浏览器可能会提交不同的按钮值。请使用 input在 HTML 表单中创建按钮。

• 唯一禁止使用的元素是图像映射，因为图像映射对鼠标和键盘敏感的动作会干扰表单按钮的行为

• button属性

  • form属性规定button元素属于哪个表单，位于表单之外却仍是表单的一部分，但其属性值必须是按钮所属表单
    的id，如需使用一个以上的表单，使用空格分隔的列表
  • autofocus属性规定当页面加载时按钮自动获得焦点。
  • disabled属性规定禁用该按钮
  • formaction规定当提交表单时向何处提交表单数据。覆盖form元素的action属性，但必须配合type=“submit”使用
  • formanctype属性规定在向服务器发送表单数据之前如何对其进行编码。覆盖表单的nctypr属性，也必须和submit配合使用
  • formmethod属性规定用于发送表单数据的HTTP方法，覆盖method属性必须和submit配合使用
  • formnovalidate属性，提交表单时不进行验证
  • formtarget属性规定何处打开action URL.覆盖form元素的target属性
  • name属性
  • type
  • value

9.bdo标签

• bdo标签覆盖默认的文本标签

  1	<bdo dir="rtl">该段落文字从右到左显示</bdo>

• dir属性为必填，仅有 ltr 和 rtl 属性值

10.table表格子标签

1.col标签

• 用于控制表格中的列，使你更方便为表格中的列应用样式

2.colgroup标签

• 用于对表格中的列进行组合，以便对其进行格式化，通过使用colgrounp标签，可以向整个列应用样式，而不需要重复为每个单元格设置样式
• 只能在table元素内，在caption元素之后，在任何thead，tbody，tfoot，tr元素之前使用colgroup标签
• span属性规定列组应该横跨的列数

3.caption标签

• 定义表格的标题，只能对每个表格定义一个标题

4.td，th标签

• 都是用于表示一个表格的单元格
• th为表头单元格，包含头部信息（粗体并且居中），td为标准单元格，包含数据（左对齐）
• colspan属性规定单元格可横跨的列数
• rowspan属性设置单元格可横跨的行数
• headers属性规定与单元格相关联的一个或多个表头单元格 header=”th标签的id值”

5.tr标签

• 定义表格的行

6.tfoot，thead，tbody标签

• tfoot用于表示一个表格的页脚，tbody规定表格的表头，tbody规定表格的主体

• 三者必须结合起来用

• 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上

• tfoot>元素内部必须包含一个或者多个 tr 标签。

  thead、tbody 和 tfoot>元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

</body>
</html>

11.title标签

定义文档的标题

• 定义浏览器工具栏中的标题
• 提供页面被添加到文件夹时的标题
• 显示搜索引擎结果中的页面标题

12.time标签

• 用于标注日期、时间或日期与时间的组合（日期格式是YYYY-MM-DD）。
• 该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

13.textarea标签

• textarea标签用于创建一个可以输入多行的文本框。

• 文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

  可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height和 width属性

  属性	值	描述
  autofocusNew	autofocus	规定当页面加载时，文本区域自动获得焦点。
  cols	number	规定文本区域内可见的列数。
  disabled	disabled	规定禁用文本区域。
  formNew	form_id	定义文本区域所属的一个或多个表单。
  maxlengthNew	number	规定文本区域允许的最大字符数。
  name	text	规定文本区域的名称。
  placeholderNew	text	规定一个简短的提示，描述文本区域期望的输入值。
  readonly	readonly	规定文本区域为只读。
  requiredNew	required	规定文本区域是必需的/必填的。
  rows	number	规定文本区域内可见的行数。
  wrapNew	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

14. 短语元素

1.em标签呈现的是被强调的文本

2.strong标签定义重要的文本

3.dfn标签定义一个定义项目

4.code定义计算机代码文本

5.samp定义样本文本

6.kbd标签定义键盘文本，表示文本是从键 盘上键入的。

7.var标签定义变量

8.cite标签定义引用。

​ 可使用该标签对参考文献的引用进行定义，比如 书籍或杂志的标题

9.高亮显示mark标签

15.列表标签

1.ul 无序列表

2.dl带有项目和描述的描述列表

注意 :

请不要将该元素（也不要用 ul 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。

要改变描述列表中描述的缩进量，请使用 CSS margin 属性。

16.del删除标签，ins插入标签

My favorite color is blue red!

17.details细节标签

• 只有chrome和Safari 6 支持details标签

• details标签规定了用户可见的或者隐藏的需求的补充细节

• details标签用于供用户开启关闭的交互式控件。任何形式的内容都可以被放在details标签内

• details标签内的内容对用户是不可见的，除非设置了open属性

• details标签与summary标签配合使用可以为details定义标题。标题是可见的，用户点击标题时，会显示出details内的内容

  Copyright 1999-2011.

  - by Refsnes Data. All Rights Reserved.

  All content and graphics on this web site are the property of the company Refsnes Data.

18. embed 标签

• embed 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）

19.figcaption标签

• figcaption标签用来表示figure标签的标题
• figcaption元素应该被置于figure元素的第一个或者最后一个子元素的位置

20.form表单

1.form 元素包含一个或多个如下的表单元素：

• input
• textarea
• button
• select
• option
• optgroup
• fieldset
• label

20.form 标签用于创建供用户输入的 HTML 表单。

可以用 ‘:valid ‘ 和’:invalid’ CSS 伪类 来给一个元素指定样式。

21.footer标签

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个

• 假如您使用

22.fieldset标签

• HTML5
  标签用于对表单中的相关元素进行分组：
• 标签可以将表单内的相关元素

  标签会在相关表单元素周围绘制边框。

23.hgroup标签

• 使用hgroup标签对标题进行组合
• 注意: 本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。 但是其轮廓算法(outline algorithm)未在任何浏览器中实现，因此
  语义仍旧是理论的。HTML5 (W3C) 规范提供了如何处理副标题，小标题，可选标题和标语（Subheadings, subtitles, alternative titles and taglines）的建议。

24.水平线hr标签

• 定义内容中的主题变化，并显示为一条水平线。

25.header标签

header标签用来表示介绍性的内容，即，定义了文档中的页眉，作为介绍内容或者导航链接栏的容器。

注释：

26.link标签

链接到外部样式文件:

27.legend标签

legend元素是fieldset元素的第一个子元素，定义了fieldset元素的标题

28.label属性

• 可以为input标签做出标记
• label元素不会向用户呈现任何特殊的效果。不过，他为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。即当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
• label标签的for属性应与相关元素的id属性相同

29.map标签用来表示图像映射

<mapname=”planetmap”>

• map标签用于客户端图像映射（指可点击区域的一幅图像。
• img中的usemap属性可引用map中的id或name属性（取决于浏览器），so我们应该同时向map添加id和name属性
• area元素永远嵌套在map元素内部

30.元数据meta标签

• 元数据是数据的数据信息，不会显示在客户端，当时会被浏览器解析

• meta元素通常用于指定页面的描述，关键词，文件的最后的修改，作者和其他元数据

• 元数据可以被浏览器使用（如何显示内容或重新加载页面），搜索引擎（关键词）或其他web服务调用

• meta标签通常位于head区域内，以名称/值对出现，如果没有提供name属性，则名称/值对中会采用http-equiv属性的值

• 实例

  实例 1 - 定义文档关键词，用于搜索引擎：

实例 2 - 定义web页面描述：

实例 3 - 定义页面作者：

实例 4 - 每30秒刷新页面：

31.度量衡meter标签

• out of 10
• 用于定义度量衡，仅用于已知最大和最小值的度量，如磁盘使用情况，查寻结果的相关性
• 不能作为一个进度条来使用， 进度条 progress 标签

32.导航nav标签

• nav标签用于html页面中的导航，可以是页与页之间的导航，也可是业内的段与段之间的导航

33.noscript标签

• noscript 元素用来定义在脚本未被执行时的替代内容（文本），此标签可被用于可识别

• 如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本，无法识别

  34.option标签

  • 定义下拉列表的一个选项
  • 必须与select或datalist标签结合使用
  • option可在不带任何属性的情况下使用，但通常需要value值，该属性定义了发送到服务器的数据

  属性	值	描述
  disabled	disabled	规定此选项应在首次加载时被禁用。
  label	text	定义当使用 时所使用的标注。
  selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
  value	text	定义送往服务器的选项值。

  35.output标签

  • 用于定义不同类型的输出，可作为输出结果显示（执行脚本的输出）
  0 100 + =

  36.optgroup标签

  • optgroup标签用来定义一个选项组，即可将文档中的选项进行组合
  Volvo Saab Mercedes Audi

  37.预格式化pre标签

  • 被包围在

     标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。一个常见应用就是用来表示计算机的源代码。

  38.中文注音或字符

  • 标签定义 ruby 注释（中文注音或字符）。

    在东亚使用，显示的是东亚字符的发音。

    将 标签与rt和 rp 标签一起使用：
    元素由一个或多个需要解释/发音的字符和一个提供该信息的 元素组成，还包括可选的 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

  • 汉 (Han)
    字 (Zi)

    汉 (Han) 字 (Zi)

  39.上标下标sub sup标签

  • _{和^{标签分别为文档中的内容定义下标和上标}}

  • 1 2 3

    这段文本包含 <sub>下标</sub> 这段文本包含 <sup>上标</sup>

一 .HTML优点

1 . html5的建立的规则

• 新特性应该基于html，css，dom，js
• 应该减少对外部插件的使用（就因乔布斯炮轰flash插件推动了html5的发展）
• 更优秀的错误处理
• 更多取代脚本的标记
• html5应该独立于设备
• 开发进程应向公众透明

2.新特性

• 用于绘画的canvas元素和SVG元素（这个属性超级棒，你可以画一些很好玩的图形）
• 用于媒介回放的video和audio元素（摆脱了flash等插件，网页加载速度极大提升了）
• 对于对本地离线的存储的更好支持（这是html5最强大之处）
• 新的表单控件产生，特别是有关时间日期的，email，calendar，date，time，url，search
• 新的语义化的内容标签出现，article，footer，header，nav，section（减少div的使用，同时提高了代码的复用性）

3.浏览器

现在的浏览器几乎都支持html5

主流浏览器是指拥有自己内核且实用度极高的浏览器。

• Firefox：Gecko内核
• 谷歌 ： 之前是Webkit内核，现在是Blink内核
• IE : Trident内核
• Opera ： Presto内核——Webkit——Blink
• Safari ：Webkit内核

二 . 主要的新增元素

1 . 画布Canvas(基于脚本）

• 默认没有边框和内容，通常需要指定id属性以供脚本使用，所有绘制工作由脚本完成，因其是逐像素进行渲染的，故最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
• 绘制步骤（前两部是固定的）
  • 通过id属性找到canvas元素：var c=document.getElementById(“id值”)；
  • 创建context对象（就是做绘图前的准备）：var cxt=c.getContext(“2d”);
  • 利用context对象绘制路径

2. 可伸缩矢量图形SVG（基于XML)

• 定义：用于定义用于网格的基于矢量的，用XML格式定义的图形，SVG图像在放大或改变尺寸时其图形质量不变

• 优势（与其他图像格式相比，如jpg，gif）

  • 可通过文本编辑器来创建和修改
  • 可被搜索，压缩，索引，脚本化，且在任何分辨率下高质量的打印，即使放大缩小，其质量也不会下降。适合大型渲染区域的应用程序（如google地图）

  类型	canvas	SVG
  支持分辨率	支持	不支持

  支持事件处理器 不支持 支持

  文本渲染能力 弱 强

3. 表单元素属性

• datalist元素规定表单域中自动完成功能，配合option使用
• keygen元素的作用是提供一种验证用户的可靠方法，其规定了用于表单的密钥生成器字段。当提交时会生成密钥和私钥两个键（防止中间人通过截取密钥解密数据），私钥存储于客户端，公钥被发送到服务器。公钥可用于之后验证用户的客户端证书
• output 元素定义不同类型的输出，比如脚本的输出

4. HTML5 Shiv

• IE8及更早版本无法在语义化元素中渲染css效果，可使用HTML Shiv脚本解决兼容问题
• 解决方法：1. 下载shiv然后将以下代码放在网页中

三 . html Web存储

• 定义及优点：使用html5可以在本地存储用户的浏览数据，web存储更安全与快速。这些数据不会保存在服务器端，只用于用户请求网站数据上。可存储大量的数据而不影响网站的性能（这也是为什么你输入网址会先在本地检索的原因），解决了之前cookie存储时需要在请求头上带着数据，且存储大小不超过4k的缺点,数据以键值对存在，且只允许该网页访问web网页上的数据
• 客户端存储数据的两个对象（进行web存储时先检查是否支持（typeof(Storage)!==”undefined”))
  • localStorage：没有时间限制的本地数据存储，关闭浏览器后，数据仍保存在浏览器上
  • sessionStorage：针对一个session的数据存储，关闭浏览器后，数据都将被删除
• 常用方法：
  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

四 . HTML5 Web SQL数据库

1.基本概念

• Web SQL 是在浏览器上模拟数据库，可使用js对操作SQL完成对数据的读写，但是Web SQL数据库不是HTML5规范的一部分，它是一个独立的规范引入一组使用SQL操作客户端数据库的APIs。（仅在Safari,Chrome,Opera浏览器工作）

2. 三大核心方法

• openDatabase：这个方法使用现有的数据库或新建的数据库创建一个数据库对象

  • openDatabase（’数据库名称‘，’版本号‘，’描述文本‘，’数据库大小‘）；创建完后会回调并调用；

• transaction:这份方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚

• executeSql:用于执行实际的SQL查询

  for example

  var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
  db.transaction(function (tx) {
  tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
  tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “W3Cschool教程”)’);
  tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, “www.w3cschool.cn")');
  });

五 . html5 应用程序缓存

1.三大优势：

• 离线浏览-用户可在应用离线下使用它们
• 已缓存资源加载更快
• 减少服务器负载——浏览器将只从服务器下载更新过或更改的资源

2.应用：

3.Manifest文件

• manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
• manifest 文件可分为三个部分：
  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
• 更新缓存，一旦应用被缓存，他就会保持缓存直到发生以下情况
  • 用户清空浏览器
  • manifest文件被修改
  • 由程序来更新应用缓存

六 . Web Workers

1. 定义

是运行在后台的javascript，属于后端的线程，不影响页面的性能。当html页面执行脚本时，页面的状态是不可响应的，直到脚本已完成，因其是前端的单线程

2.前轴

在创建 web worker 之前，请检测用户的浏览器是否支持它：typeof(Worker)!==”undefined” 这步的检测非常重要！你必须先检测才能保证接下来可以顺利操作 web worker！ web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

3. Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

• window 对象
• document
• parent 对象

七 . HTML5 SSE

1.定义

HTML5 服务器发送事件(Server-Sent Events)是基于WebSocket协议的一种服务器向客户端发送事件和数据的单向通讯,允许网页来自服务器的更新，除了·IE，其他主流浏览器都支持

2 . 实例讲解

var source=new EventSource(“demo_sse.php”);
source.onmessage=function(event)
{
document.getElementById(“result”).innerHTML+=event.data + “
“;
};

• 创建一个新的 EventSource 对象（用于接收发送事件通知），然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）
• 每接收到一次更新，就会发生 onmessage 事件
• 当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

八 . WebSocket事件

1.定义及优势

• WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯协议（没有request和response的概念，两者地位完全相同，连接一旦建立就建立了持久性连接，双方可随时向对方发送数据）
• 在WebSocket API中，浏览器和服务器只需做一个握手的动作，两者间就会形成一条快速通道，故可直接进行数据传送。之前一直处于最开始的短轮询Polling阶段，即建立连接必须经过三次握手，连接才能算成功
• WebSockcet协议本质上是一个基于tcp的协议。为建立一个WebSoccket连接，客户端首先要向服务器端发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息“Upgrade：WebSocket”表明这是一个申请协议升级的HTTP请求，服务端解析这些附加头信息并产生应答信息返回给客户端，客户端和服务器端就建立起来，双方可通过这个自由通道的传递信息，且这个连接会一直存在直到两方中有一方断开连接

2.用法

• 通过send（）方法向服务器发送数据，并通过onmessage时间接收服务器返回的数据

• 创建WebSocket对象，var Socket=new WebSocket(url,[protocal]);

  url:指定连接的URL

  protocol:指定可接受的子协议

• 只读属性Socket.readyState表示连接状态

  • 0-连接尚未建立
  • 1—连接已建立，可进行通信
  • 2—连接正在关闭
  • 3—连接已经关闭或者连接不能打开

• Socket.bufferedAmount:只读属性bufferedAmount已被send（)放入队列中等待传输，但还没有发出UTF-8文本字节数

• 示例代码：

  运行 WebSocket

九 . 代码规范

1.使用正确的生命文档类型

文档类型生命位于html文档的第一行

2.使用小写元素名

3.关闭所有元素

4.关闭空的 HTML 元素

5.属性值我们推荐使用引号:

• 如果属性值含有空格需要使用引号。

• 混合风格不推荐的，建议统一风格。

• 属性值使用引号易于阅读。

  6.图片属性

  图片通常使用alt 属性。 在图片不能显示时，它能替代图片显示。

  7.空行和缩进

  不要无缘无故添加空行。

  为每个逻辑功能块添加空行，这样更易于阅读。

  缩进使用两个空格，不建议使用 TAB。

  比较短的代码间不要使用不必要的空行和缩进。

  8.样式表

• 将左花括号与选择器放在同一行。

• 左花括号与选择器间添加以空格。

• 使用两个空格来缩进。

• 冒号与属性值之间添加已空格。

• 逗号和符号之后使用一个空格。

• 每个属性与值结尾都要使用符号。

• 只有属性值包含空格时才使用引号。

• 右花括号放在新的一行。

• 每行最多 80 个字符。

低调的width:auto

width 的默认值是auto；但auto至少包含4种不同的宽度表现：

1. 充分可利用空间。如div，p这些块级元素的默认宽度默认是100%于父级容器的，即 fill-available 。
2. 收缩与包裹。典型代表是浮动，绝对定位，inline-block元素或table元素，即shrink-to-fit ，类似于CSS3中的 fit-content 指的是这种宽度表现。
3. 收缩到最小。这个最容易出现在table-layout为auto的表格中，当一列空间不够时，文字说断就断。
4. 超出容器限制。除非有明确的width相关设置，否则这上面3种情况都不会主动超过父级容器宽度，但存在一些特殊情况。如：内容很长的连续的英文与数字，或者内联元素被设置了white-space:nowrap,则会将所有元素堆在一行。

格式化宽度。

• 格式化宽度仅出现在”绝对定位宽度“中，也就是出现在position属性值为absolute或fixed的元素中。在默认情况下，绝对元素的宽度表现是”包裹性“，宽度由内部尺寸决定。
• 但是对于非替换元素，即left/top或top/bottom对立方位的属性值同时存在时，元素的宽度表现为”格式化宽度“，其宽度的大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。

内部尺寸：简单讲就是元素的尺寸由内部的元素决定，而非外部的容器决定。如何快速判断一个元素使用的是否为”内部尺寸“呢？很简单，假如这个元素里面没有内容，宽度就是0，那就是应用的”内部尺寸“。

• button标签按钮才会自动换行，input标签按钮默认white-space:pre是不会换行的，需将pre值重置为normal。

动态文字例子

需求：页面某个模块文字内容是动态的，文字少时居中显示，超过一行者居左显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="index.js"></script> -->
    <style>
       .box{
           padding: 10px;
           background-color: #cd0000;
           text-align: center;
       }
       .content{
           display: inline-block;
           text-align: left;
       }
    </style>
</head>
<body>
   <div class="box">
       <p id="conMore" class="content">
        文字内容
       </p>
   </div>
   <button>get more</button>
</body>
</html>
<script>
    var btn = document.getElementsByTagName('button')[0];
    var content = document.getElementById('conMore');
    if(btn && content){
        btn.onclick = function(){
            content.innerHTML += '你好';
        }
    }
</script>

这主要得益于”包裹性“，未达内部容器大小时，样式主要取决于外部盒子，超过时，取内部容器大小。除了 inline-block 元素，浮动元素以及绝对定位元素都具有包裹性，据有类似的智能宽度的行为。

一 . 选择器

1.通配选择器 *

• 通用选择器匹配html元素的所有元素

2.元素选择器

• 直接使用元素作为选择器名

3.ID选择器

• 通过对元素设置全局属性id，然后使用#id值来选择页面唯一的元素

4 . 类选择器

• 通过对元素设置全局属性class，然后使用.class值选择器选择页面一个或多个元素
• 也可使用”元素.class值“形式，限定某种类型的元素
• 类选择器还可以调用多种中间用空格隔开进行层叠

5. 属性选择器

• 直接通过两个中括号里面包含属性名即可 如 ： [href]
• 匹配属性值的属性选择器 [type=”password”]
• 属性值开头匹配的属性选择器 [href^=”http”]
• 属性值结尾匹配的属性值 [hre$=”.com”]
• 包含指定字符的属性选择器 [href=”google”]

6.复合选择器

1.分组选择器

• 将多个选择器通过逗号分隔，同时设置统一样式。

2.后代选择器

• 选择器内部所有子选择器（包括直接的和间接的），不在乎子选择器的层次

3.子选择器

• 只能是选择器内的直接选择器

4.相邻兄弟选择器 ，用加号连接

5.普通兄弟选择器，用“~”连接

7.伪元素选择器

1. ::first-line 块级首行

• 块级元素比如p,div等首行文本被选定若想限定某种元素，可加前置 p::first-line{}