CSS3 flex盒子语法介绍
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
以下6个属性设置在容器上：
o flex-direction容器内项目的排列方向(默认横向排列)
o flex-wrap容器内项目换行方式
o flex-flow以上两个属性的简写方式
o justify-content项目在主轴上的对齐方式
o align-items项目在交叉轴上如何对齐
以上介绍完了容器中的属性，下面说一下容器中项目的属性：
o order 项目的排列顺序。数值越小，排列越靠前，默认为0。
o flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
o flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
o flex-basis在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来
大小。
o flex 是flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto。
后两个属性可选。
o align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，
如果没有父元素，则等同于stretch。
order
1 .item {
2 order:
3 }
flex-grow
1 .item {
2 flex-grow:
3 }
flex-shrink
1 .item {
2 flex-shrink:
3 }
flex-basis
1 .item {
2 flex-basis:
3 }
flex
1 .item {
2 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
3 }
align-self
1 .item {
2 align-self: auto | flex-start | flex-end | center | baseline | stretch;
3 }
容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。希望你可以在实际应用中熟练使用。
===========================================================
CSS3 flex布局应用介绍
本篇用flex来实际布局一下。例如我们以前会用inline-block或float配合%百分比来实现自适应的三列等高布局。但margin / padding计算起来比较复杂，加加减减维护起来很麻烦。用flex弹性盒模型就简单多了。
首先弄出原始的HTML结构，左右侧边栏定宽220px
1.* { margin: 0; padding: 0; }
2.#header, #footer { width: 100%; }
3.#left, #right { width: 220px; }
4.
5.
6.
7.
8.
9.
10.
11.
现在将内容容器（#page）设成flex弹性盒模型：#page { display: flex; }
中间main就是个普通的div，因此宽度好像没有自适应，很简单设#main { flex: auto; }即可。因为两个侧边栏没有设flex，因此剩余的宽度将被main独享
main的位置不对，调整位置非常简单，设置#main { … order: 1; }即可。当然别忘了同步给right设#right { … order: 2; }。left不设默认为0。
你可能会疑惑，直接在DOM按left->main->right顺序排列不就行了，为何排列成m ain->left->right？确实调整DOM顺序也能达到同样效果，但将main越置前，对S EO搜索越友好。这其实并无标准答案，如果你觉得left的内容同样重要，那left-> main->right的DOM顺序也是没问题的。
现在只剩最后一步，将footer置底并拉升page部分。先将html和body的height 设成100%，为全屏做准备。由于body里包含了header，page，footer，因此为b ody设置flex弹性盒模型，同时设置flex-direction: column;让3个子元素垂直排列body { … display: flex; flex-direction: column; }
最后将page拉伸就简单了，思路和上面main一样，只要给page设置flex:auto;，因为header和footer没有设flex，因此剩余的高度将被page独享。
1.* { margin: 0; padding: 0; }
2.html, body { height: 100%; }
3.body {
4.display: flex;
5.flex-direction: column;
6.}
7.#header, #footer { width: 100%; }
8.#page {
9.display: flex;
10.flex:auto;
11.}
12.#left, #right { width: 220px; }
13.#right { order: 2; }
14.#main {
15.flex: auto;
16.order: 1;
17.}
总结一下自适应三列等高布局的思路，body应用垂直的flex模型，让页头，页面，页脚垂直排列，其中只有页面部分有flex:auto;将自适应高度。页面部分应用flex模型，内容，左侧栏，右侧栏将水平排列，其中只有内容部分有flex:auto;将自适应宽度。如果为了SEO优化，在DOM中将内容部分放在左右侧边栏上面的话，通过o rder调整顺序。
用flex弹性盒子可以轻松实现等比例布局：
1..Grid { display: flex; }
2..Grid-cell { flex: 1; }
3.
4.
5.
6.
7.
8.
也可以实现部分固定比例，剩余部分自适应布局：
评论区布局：
代码页面上都有，极其简单，可以自行参考。
总结
flex用于布局真的非常方便，原先用inline-block，float写的一堆既丑且难维护的代码，用flex可以很优雅地实现，什么垂直居中都是浮云。唯一需要的只是时间，等那些旧式浏览器都死透了，弹性盒子的春天就来了。
第9章使用Bootstrap实现网页响应式布局 课程名称Web前端开发项目名称 使用Bootstrap实现 网页响应式布局任务名称使用Bootstrap实现网页响应式布局课时 6 项目性质□演示性□验证性□设计性√综合性 授课班级授课日期授课地点 教学目标能力目标： 1. 具备应用Bootstrap实现响应式布局的能力 2. 具备灵活运用Bootstrap的能力 知识目标： 1. 掌握Bootstrap框架的基本语法 2. 掌握运用Bootstrap实现各种响应式布局的方法素质目标： 1. 培养学生信息搜集能力 2. 培养学生团结合作、互帮互助的能力 教学内容1. 任务描述 2. 任务展示与实现 （1）实现云景旅游公司首页Bootstrap布局（2）学生动手操作 3. 教师讲解本任务涉及的知识点 4. 任务小结 教学重点 1. Bootstrap框架的基本语法 2. Bootstrap框架实现响应式网页
教学难点 1. Bootstrap框架实现响应式网页 教学准备1. 装有Sublime或者Hbuilder的电脑 2. 教学课件PPT 3. 教材：《Web前端技术项目式教程》 作业设计1．使用Bootstrap实现公司二级页面“公司概况”的响应式效果。 教学过程 教学环节 教学内容与过程 （教学内容、教学方法、组织形式、教学手段） 课前组织 做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。 课程说明【课前说明】 分别从Bootstrap语法基础，Bootstrap框架的使用方法，讲解响应式网页的实现方法。 【目的】 使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。掌握Bootstrap框架的基础，掌握使用Bootstrap框架实现响应式网页的方法。
网易校招前端一面和二面 一面 1.对前端安全的理解 讲了讲XSS、CSRF、点击劫持、社会工程学等等的特点、攻防方式 2.对模块化的了解 讲了讲amd、cmd、es6的模块特点和区别,后面想想应该加上angular模块和懒加载的部分 3.angular双向绑定的原理 4.左边固定右边自适应CSS布局： ?浮动 ?绝对布局 ?表格与表格布局 ?inline-block ?flex ?grid 5.对HTML5标签语义化的理解 6.css动画，追问：js动画写过吗？position有哪些基本值？它们有什么区别？ 简单说了说translate/transform/animation，没有写过js动画。 a/r/f/s…相对于页面/自身/屏幕/默认定位 7.异步的几种方式 8.自己实现bind函数 // 简单的辅助绑定函数 function bind(fn, obj) { return function() { return fn.apply( obj, arguments ); };
} 9.谈谈项目和优化的地方？ 直接拿成绩有毒给他们演示，讲了一个懒加载列表+事件代理解决加载列表卡顿的情况。追问：怎么控制事件触发频率？怎么实现的？ 二面 1.手写一个select组件，就是点一下select出来一个列表，点击列表项select自动填充。 我：可以有一个Select、List、ListItem类，然后传统的DOM驱动的写法是先获取到它们的DOM节点再监听事件，触发事件后执行相应的逻辑，MVVM的写法是使用数据来控制它们的行为…然后开始写 面试官：你写的太复杂了，这题根本不需要用到面向对象，简化一下 我：请提示一下？ 面试官：select和列表都在一个父元素里 我：父元素设为relative定位，里面的列表设为absolute定位，然后写一个函数，参数是源dom和目标dom，可以把源dom的值展现到目标dom上去。 面试官：嗯…然后继续手头上的工作 (代码暂时先不贴，这一块到底怎么写才优雅我现在还有点疑惑) 2.模版用过没有？&*%、%￥(没听懂，应该是一些模板)字符串怎么解析成模板的？特别是带逻辑的那一块? 我：Angular的字符串解析模板了解一点，是用装饰器…但我还没说完就叫停了考官：没用过就算了吧，不过怎么可能没用过呢？ 这个时候我已经开始出冷汗了… 3.手写用setTimeout模拟setInterval 开始我说setTimeout里面再调用setTimeout 面试官：不对 我想了一会：自定义一个mySetInterval函数 function mySetInterval(cb,time){ let temp = function(){ setTimeout(temp,time) cb.apply(null) } setTimeout(temp,time) } 面试官：嗯…又是一段沉默，然后继续做他的事情
Flex综合测试题 1）下面关于RIA的概念说法错误的是（） A）RIA将桌面应用程序的强交互性与传统Web应用灵活的结合起来 B）RIA的富客户端采用异步的方式同服务器端通讯 C）RIA在通讯中会传输所有的数据，增加了数据的信息量 D）RIA可以整合声音，视频等桌面元素 2）一下关于Flex程序说法不正确的是（） A）Flex程序由*.MXML、*.as、*.css文件组成 B）MXML语言专用于Flex程序中，是用于描述界面表现的一种XML标记语言 C）ActionScript是针对Adobe Flash Player运行环境的编程语言 D）MXML提供了一系列标签供用户使用，MXML不区分大小写 3）一下关于Applicaton布局的说话，错误的是（） A）Application默认的布局是BasicLayout B）HorizonatalLayout表示水平布局方式 C）VertiacalLayout表示竖直布局方式 D）TileLayout表示主题布局方式 4）关于一下代码的说法，不正确的是（） Flex 4 样式与布局 第一篇 Flex 4 与自定义布局（Layout） Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的就是定义一个自定义布局。 Flex 4/Spark架构中的容器并不控制它们自己的布局。相反，每种容器具有一个布局属性，用于确定如何在屏幕上设置子元素的布局。可以使用一个单独的Group容器，并赋予其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。代码很简单，如下所示： （参考文章：Flex 4与自定义布局： 译文：https://www.doczj.com/doc/ea333223.html,/lihe111/archive/2009/07/06/4325571.aspx 原文：https://www.doczj.com/doc/ea333223.html,/2009/05/flex-4-custom-layouts.html） 第二篇 Flex 4 SkinClass 改变组件外观 在Flex 4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML 文件进行定义。通过skinclass来改变外观的spark组件通常也是skinclass引用的Host component。Flex 4 中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，这样组件外观设计的代码通过改变小部分的代码就可以得到重用了。 一、SkinClass必须包含的三样东西： 1、HostComponent metadata SkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的组件。我们可以通过metadata标签来指定HostComponent。如：我们需要设置Button 的外观，那么Button就是HostComponent。 Code： 1. 8种css垂直居中水平居中的绝对定位 ①绝对定位居中： 我们在css布局中常用到的是margin：0 auto;来居中，一直觉得margin：auto;是不能居中的，但是实现元素居中只需要声明元素高度和下面的css就可以了。 Absolute-center{ margin:auto; position:absolute; top:0; right:0; left:0; bottom:0; } 优点： 1.支持跨浏览器，包括IE8-IE10. 2.无需其他特殊标记，CSS代码量少 3.支持百分比%属性值和min-/max-属性 4.只用这一个类可实现任何内容块居中 5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下） 6.内容块可以被重绘。 7.完美支持图片居中。 缺点： 1.必须声明高度（查看可变高度Variable Height）。 （查看溢出Overflow）。 2.建议设置overflow:auto来防止内容越界溢出。 3.在Windows Phone设备上不起作用。 1)容器内： 内容块的父元素使用相对定位position:relative;使用上述绝对居 中方式可以使内容居中显示于父容器中。 .center-container{ Position:relative; } .absolute-center{ Width:50%; Height:50%; Overflow:auto; Margin:auto; Position:absolute; Top:0; Left:0; Right:0; Bottom:0; } 2)视区内 想让内容块一直停留在可视区域内？将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。 .Absolute-Center.is-Fixed { position: fixed; z-index: 999; } 3)边栏 如果你要设置一个固顶的头或增加其他的边栏，只需要在内容块的样式中加入像这样的CSS样式代码：top:70px;bottom:auto;由于已经声明了margin:auto;，该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。 你可以将内容块固定与屏幕的左侧或右侧，并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧，使用left:0;right:auto;固定与屏幕左侧。 .Absolute-Center.is-Right { left: auto; right: 20px; text-align: right; } .Absolute-Center.is-Left { right: auto; left: 20px; text-align: left; } 第8章使用Flex实现网页响应式布局 教学过程 课堂实训同步训练：使用Flex实现云景旅游公司首页响应式布局 1.实现首页头部响应式效果 手机端页面最终的显示效果是：Logo、导航、导航项、搜索表单全部居中。 云景旅游手机端页面头部Flex代码 1 .logo{ 2 display: flex; 3 justify-content: center; 4 } 5 nav ul li{ 6 display: flex; 7 justify-content: center; 8 } 9 .navbar form { 10 display: flex; 11 } 12 .navbar input { 13 flex-grow: 1; 14 } 云景旅游PAD端页面头部Flex代码 1 @media(min-width:768px){ 2 nav ul{ 3 display: flex; 4 } 5 nav{ 6 display: flex; 7 justify-content: center; 8 } 9 } 云景旅游桌面端页面头部Flex代码 1 @media(min-width:992px){ 2 header{ 3 display: flex; 4 } 5 .navbar{ 6 display: flex; 7 flex: 1; 8 justify-content: space-between; 9 } 10 .navbar input{ 11 flex-grow: 0; / 12 } 13 } 2.主体内容.main_top区域实现 .top区域Flex代码 1 .top{ 2 display: flex; 3 } 4 .top_left{ 5 flex: 1; 6 display: flex; 7 align-items: center; 8 } 9 .top_right{ 10 flex: 1; 11 } .bottom区域Flex代码 1 .bottom{ 2 display: flex; 3 } 4 .col{ 5 flex: 1; 6 } 3.主体内容.main_middle区域实现 .main_middle区域包含两个.jingqu部分，两部分代码相同，此处只列举其中一个部分代码。 .jingqu区域Flex代码 1 .jingqu{ 2 display: flex; 3 } 4 .jingqu .transbox{ 5 flex: 2; 6 } 7 .jingqu_img{ Flex弹性布局详解 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 1.基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 2.容器的属性 ** 1）：flex-direction ** 规定盒子容器主轴方向，可以是水平方向和垂直方向，另外侧轴一定是垂直于主轴方向的。 ** 2）：flex-wrap ** 规定flex容器主轴上放不下项目的时候，要不要进行换行，以及怎么换行。 **3）：flex-flow ** 前面两个属性的集合，可以一并设置主轴和换行的属性。 **4）：align-items ** 控制了项目在flex容器侧轴方向上的对齐方式。 **5）：justify-content ** 控制了项目在flex容器主轴方向上的对齐方式。 **6）：align-content ** 本属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 3.属性理解 flex-direction排布方向属性理解： > flex-direction:row 你左手拿着肉串，将它横着摆放在自己的眼前，你发现：咦，这不就是flex容器的主轴为row 的方向吗？没错了这个样子就是我们日常书写方式下的主轴默认值：水平从左往右。 > flex-direction:row-reverse 肉串太大了，你左手保持这个姿势有点累，你换成了右手，你发现：咦，这不就是flex容器方向的水平从右往左吗？没错了，row-reverse就是和平时的书写方式反向的呈现。 > flex-direction:column-reverse 诶，右手又累了，换到左手吧，这个时候发现肉油要滴下来了，你赶忙把羊肉串竖立了起来，你发现：咦，这不就是flex容器主轴为column垂直从下到上的方向吗？没错了，主轴的方向这个时候就是从下往上，侧轴变成了水平垂直方向从左往右。 > flex-direction: column 好吧，我实在想象不出来有谁会把羊肉串从上到下这么拿着，姑且你就是这么拿着的吧。这个时候，你发现，咦？这个不就是flex主轴从上到下的方向吗？没错了，这个时候主轴方向还是垂直方向，只是变成了从上到下。侧轴没有变化依然是水平方向从左往右。 flex-wrap项目换行属性理解： > flex-wrap:wrap 运气不好，竹签断了一节，羊肉粒排不下了，没办法只能假装吃两根羊肉串了，这时候，你发现，这不就是换行吗？项目在flex一行中排列不下了，那么wrap属性值就指定了，这个时候可以进行换行，第一行在上，第二行在下方。 前端页面在各端的适配性探讨 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'> 大小之辨-完全自 适应“完全自适应式”是卤煮对越此方案的叫法，由于卤煮现在找不到官方名称，所以暂时就这样叫它。这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度 的设备来调整元素、字体、图片、高度等属性的值。简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询熟悉，根据不同的屏幕宽度，调整样式。卤煮之前也是这样想的，但是你需要考虑到界面上的许多元素需要设置字体，如果用 media query为每个元素在不同的设备下都设置不同的属性的话，那么有多少种屏幕我们的css就会增加多少倍。实际上在这里，我们采用的是js和css熟悉rem来解决这个问题的。REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。html { font-size: 10px; } div { font-size: 1rem; height: 2rem; width: 3rem; border: .1rem solid #000; } 采用以上写法，div继承到了html节点的font-size，为本身定义了一系列样式属性，此时1em计算为10px，即根节点的font-size值。所以，这时div的高度就是20px，宽度是30px，边框是1px，字体大小则是10px;一旦有了这样的方法，我们自然可以根据不同的屏幕宽度设置不同的根节点字体大小。假设我们现在设计的标准是iphone5s，iphone5系列的屏幕分辨率是640。为了统一规范，我们将iphone5 分辨率下的根元素font-size设置为100px; html { font-size: 100px; } 那么以此为基准，可以计算出一个比例值6.4。我们可以得知其他手机分辨率的设备下根元素字体大小: /* 数据计算公式640/100 = device-width / x 可以设置其他设备根元素字体大小ihone5: 640 ：100 iphone6: 750 : 117 iphone6s: 1240 : 194 */ var deviceWidth = window.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 行内元素也可以使用Flex布局。 Webkit内核的浏览器，必须加上-webkit前缀。 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 使用样例： 效果图： 二、基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 三、容器的属性 以下6个属性设置在容器上。 ?flex-direction ?flex-wrap ?flex-flow ?justify-content ?align-items ?align-content 3.1 flex-direction属性 它可能有4个值。 ?row（默认值）：主轴为水平方向，起点在左端。 ?row-reverse：主轴为水平方向，起点在右端。 示例（row-reverse）： Flex_4_样式与布局小结
8种css垂直居中水平居中的绝对定位
Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-使用Flex实现网页响应式布局
Flex弹性布局详解
前端页面在各端的适配性探讨
Flex布局使用说明
效果图aa bb cc dd ee
1.css3 有哪些新特性? 选择器、圆角、动画、多重背景、背景的宽度高度flex 布局响应式布局边框阴影文本阴影 2.响应式布局怎么理解的，响应式布局是通过什么实现? 根据不同的屏幕加载不同的css样式 1).移动端适配 2）.一套代码适配pc端移动端多个 3.js创建对象有哪几种方式? 1）.自面量 2）.new Object 3）.构造函数 4.es6有哪些新特性? 1）.let const 2）.模板字符串 3）.方法的简写属性的简写 4）.三点运算符
5）.解构赋值 6）.箭头函数 7）.set map 8）.class 类 9）.模块化 5.箭头函数和普通的方法有什么区别? 1）.箭头函数省略了function 2）.箭头函数里面的this指向上下文(可以改变this指向) 6.gulp 可以干什么 gulp 自动化构建工具。 压缩代码合并代码压缩图片自动处理前缀创建web服务处理sass
7.清除浮动有哪些方法。 1）.浮动元素的父元素overflow:hidden overflow:auto 2）.浮动元素的最后面加一个空div 给他clear:both 3）.after伪类清除浮动 .clearfix:after{ content:""; dislpay:block; height:0px;
clear:both; } 4）、给父元素设置高度。 8.行内元素块元素的区别? 1）块元素默认独占一行，行内元素默认情况不独占一行，行内元素的的宽度就是内容的宽度 2）默认情况块元素可以设置宽度高度默认情况行内元素不可以设置宽度高度3）默认可以margin 上下左右，行内默认只能margin 左右不能上下。9.网站加载速度优化? 1）.图片不失真尽量小 2）.多个背景图片合并 3）.代码压缩代码合并 4）.js写到页面最底部 5）.懒加载 6).不要有冗余代码 7).服务器带宽款一些
1.优点:不增加额外的全局变量，不污染全局变量，加强了封装性。 缺点:变量保存在内存中，容易造成内存泄漏。解决方案及时释放变量。 2.在函数外部可以访问函数内部的变量或者由该变量得到的值。 3. 3.1使用闭包代替全局变量。立即执行函数 (function(){})() 3.2包装相关功能 3.3延迟执行例如ajax callback,setTimeout. 4. 4.1this永远指向其所在函数的所有者，如果没有所有者时则指向window.同一个函 数在不同的执行情况下会有不同的效果。 4.2 call 和 apply 都可以改变this指向，call 和 apply 不同点 var arr =[2,3,4] call(window,2,3,4) apply(window,arr) 5. 5.1阮一峰张鑫旭 5.2Node.js实战高性能网站建设进阶指南 5.3 w3cplus isux 网易用户体验中心 6. 6.1yslow检测 6.2减少http请求 6.2.1合并资源文件 6.2.2避免使用 location.reload(),可以使用location.href= “当前页面url”代替。因为location.reload()会对页面所有资源进行重新请求。 6.2.3css精灵 6.3压缩文件。在Server段对资源进行GZIP压缩 6.4将js放在文件底部，css放在文件顶部
6.5使用CDN 内容发布网络 6.6添加HTTP Expires 7.CSS中，盒子模型规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素都有盒子模型，所以说在Web世界里盒子模型无处不在。 由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。 8. 块级元素: div dl dt form h1 h2 li ol ul p 行内元素: span a label select em br code 不同点: 行内元素设置width height padding margin 时都无效，块级元素都有效。 行内元素在一条直线上排列，块级元素会占据一整行 9.css层叠指的是样式的优先级，当样式有冲突时，以优先级高的为主。 9.1 id>class>标签>伪元素 9.2权重相同时，已后面定义的为主。 10.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 11. 11.1语义化标签例如 header footer article nav time mark 11.2 占位符属性 placeholder 必要属性 required 自动聚焦属性 autofocus 正则表达式 pattern type=“range”滑块 11.3 localStorage sessionStorage getItem,setItem. 12. 12.1箭头符操作
CSS 属性 CSS 属性组： ?动画 ?背景 ?边框和轮廓 ?框 ?颜色 ?内容页的媒体属性 ?尺寸 ?盒子模型(新) ?盒子模型(旧) ?字体 ?内容生成 ?网格 ?超链接 ?线框 ?列表 ?外边距 ?字幕 ?多列 ?内边距 ?页面媒体 ?定位 ?分页 ?Ruby ?语音 ?表格 ?文本 ?2D/3D 转换 ?过渡 ?用户界面 "CSS" 列指示属性是在哪个CSS 版本中定义的(CSS1, CSS2, 或者CSS3). 动画属性 属性描述CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 3 animation 复合属性。检索或设置对象所应用的动画特效。 3 animation-name 检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 3 animation-duration 检索或设置对象动画的持续时间 3
https://www.doczj.com/doc/ea333223.html, 检索或设置对象动画的过渡类型 3 animation-delay 检索或设置对象动画的延迟时间 3 animation-iteration-count 检索或设置对象动画的循环次数 3 animation-direction 检索或设置对象动画在循环中是否反向运动 3 animation-play-state 检索或设置对象动画的状态 3 背景属性 属性描述CSS background 复合属性。设置对象的背景特性。 1 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 1 background-color 设置或检索对象的背景颜色。 1 background-image 设置或检索对象的背景图像。 1 background-position 设置或检索对象的背景图像位置。必须先指定background-image属性。 1 background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 1 background-clip 指定对象的背景图像向外裁剪的区域。 3 background-origin S设置或检索对象的背景图像计算background-position时的参考原点(位置)。 3 background-size 检索或设置对象的背景图像的尺寸大小。 3 边框(Border) 和轮廓(Outline) 属性 属性描述CSS border 复合属性。设置对象边框的特性。 1 border-bottom 复合属性。设置对象底部边框的特性。 1 border-bottom-color 设置或检索对象的底部边框颜色。 1 border-bottom-style 设置或检索对象的底部边框样式。 1 border-bottom-width 设置或检索对象的底部边框宽度。 1 border-color 置或检索对象的边框颜色。 1
级联样式表级别3 (CSS3) 网格布局（“网格”）是Internet Explorer 10 和使用JavaScript 的Windows 应用商店应用中新增的功能。与Flexbox 相似，通过“网格”所获得的布局流畅性大于使用浮动或脚本进行定位所获得的布局流畅性。CSS3 网格对齐使你可以为网页或Web 应用的主要区域划分空间，并在尺寸、位置和层范畴内定义各个HTML 控件部件之间的关系。从而无需创建固定布局，固定布局无法利用浏览器窗口中的可用空间。 截止到编写本文档时，CSS3 网格布局仍处于开发阶段。当前的预发行版中实现的CSS3 网格布局基于CSS 网格布局模块（当前处于万维网联合会(W3C) 工作草案阶段）。 由于网格功能使你能够将元素对齐到列和行中但它没有内容结构，因此通过它还可以实现无法由HTML 表格实现的方案。通过将网格功能与媒体查询结合使用，可以使布局无缝地适应设备、方向、可用空间等因素的变化。 本主题包含下列部分： ?网格元素 轨道（列和行） o重复网格轨道 网格项 o对齐网格项 o堆叠网格项 o跨越网格项 ?相关主题 有关网格布局的实例演示，请参阅IE Test Drive上的实例演示：CSS3 网格布局和网格系统。另请参阅如何使用CSS 网格创建自适应布局。 网格元素 网格布局的基本构建块就是网格元素，该元素是通过将元素的display属性设置为-ms-grid（对于块级的网格元素）或-ms-inline-grid（对于内联级的网格元素）。（由于“网格布局”草案尚处于准备阶段，所以这一节中的属性必须在使用时带有特定于Microsoft 供应商前缀“-ms-”，才能与Internet Explorer 10 和适用于Windows 8 的使用JavaScript 的Windows 应用商店应用配合使用。）例如，下面的代码示例在具有"myGrid" ID 的元素内创建网格： CSS 轨道（列和行） 在创建网格元素之后，使用以下属性对列和行应用大小： 属性描述
css3弹性盒子模型之box-flex(一) 2013-10-14 16:01:02| 分类：html5+css3 | 标签：css3 弹性盒子 box-flex |举报|字号订阅 box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome （-webkit）。 一、box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分。
CSS3 flex盒子语法介绍 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 以下6个属性设置在容器上： o flex-direction容器内项目的排列方向(默认横向排列) o flex-wrap容器内项目换行方式 o flex-flow以上两个属性的简写方式 o justify-content项目在主轴上的对齐方式 o align-items项目在交叉轴上如何对齐
以上介绍完了容器中的属性，下面说一下容器中项目的属性： o order 项目的排列顺序。数值越小，排列越靠前，默认为0。 o flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 o flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 o flex-basis在分配多余空间之前，项目占据的主轴空间（main size）。 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来 大小。 o flex 是flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto。 后两个属性可选。 o align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性， 如果没有父元素，则等同于stretch。