整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
标准盒子模型：宽度=内容的宽度（content）+ border + padding
低版本IE盒子模型：宽度=内容宽度（content+border+padding）
1. 如何理解CSS盒子模型标准盒子模型：宽度=内容的宽度（content）+ border + padding低版本IE盒子模型：宽度=内容宽度（content+border+padding）
2.BFC
1）什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
2）形成 BFC 的条件
* 浮动元素，float 除 none 以外的值
* 定位元素，position（absolute，fixed）
* display 为以下其中之一的值 inline-block，table-cell，table-caption
* overflow 除了 visible 以外的值（hidden，auto，scroll）
3）BFC 的特性
* 内部的 Box 会在垂直方向上一个接一个的放置。
* 垂直方向上的距离由 margin 决定
* bfc 的区域不会与 float 的元素区域重叠。
* 计算 bfc 的高度时，浮动元素也参与计算
* bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
代码结构更加清晰
见名知意，没有基础的人也能知道这部分代码是干嘛的
方便团队开发维护，代码可读性更强
有利于SEO优化，爬虫依赖于标签来确定上下文关系
meta标签提供关于html文档的元数据，不会显示在页面，但是对于机器是可读的，告诉浏览器怎么解析页面，告诉搜索引擎关键字（SEO优化）
meta作用：告诉机器浏览器该如何解析该页面，描述这个页面的主要内容，可以设置服务器发送到浏览器的http头部内容
charset="utf-8"设置页面使用的字符编码
viewport 设置视口，移动端的适配
这是因为渲染进程与js进程是互斥的，脚本会阻塞页面的渲染，脚本之间的加载是同步进行的，按引入顺序执行，但是以下两个属性会影响脚本执行与页面渲染的顺序
defer：不会阻塞渲染，这样即使放在header内部，也不会阻塞页面加载，不过js会先于document加载完成，并且也不会影响脚本之间的执行顺序，按照引入顺序执行
async：与defer一样，都是解决阻塞渲染，但它是在document加载完成后才执行，并且它的执行顺序是按照谁先加载完成执行谁，所以对于文件顺序有要求，存在前后依赖的不要使用它
块级元素：div，h1-h6，p，ul，ol，dl，li，hr，dt，dd，form，table
特性：块元素独占一行，宽高生效，默认宽和父元素一样，内容撑开高度，margin，padding全部生效
行内元素：em，i，del，small，strong，ins，span，a
特性：宽高不生效，左右margin生效上下不生效，在一行排列，大小靠内容撑开，padding都生效
行内块元素：img，input(表单元素，除去form)
特性：在一行排列，宽高生效，margin，padding生效
border-radius圆角
border-image 边框图片
border-image: url() top right bottom left
border-width: top right bottom left
box-shadow盒子阴影: x,y,size,opcity
text-shadow文字阴影linear-gradient 线性渐变
background: linear-gradient(to position , color,color,...,color)
radial-gradient 径向渐变
background: radial-gradient(shap size at position ,
color,color,...,color)
2D/3D转换 transform：rotate(旋转) scale(缩放) translate(位移)
@media媒体查询，根据屏幕宽度，设置，用来解决移动端适配,根据屏幕大小使相应的css生效
flex布局(弹性盒子)
display：none 不占位，源码可见
opacity: 0 占位，源码可见，透明度0
visibility: hidden 占位，源码可见
position: top:-9999px,left:-9999px 利用定位将元素移出视窗
行内元素：text-align：center
块元素: margin: 0 auto
position: left: 50%; transform: translate(-50%)
height = line-height
verticle-align: middle
position: top: 50%; transform: translate(0,-50%)
static 默认
relative 相对定位，不脱标，相对于自身位置进行偏离，不影响元素本身特性，z-index提升层级
absolute 绝对定位，脱标，相对于已有定位的父元素进行偏离，都没有就相对于body进行偏离
fixed 固定定位，脱标，相对于视窗进行偏离
宽高固定 position: top:0,left:0,right:0,bottom:0,margin:auto
宽高固定 position：top: 50%, left: 50%, margin-left: -width/2px,margin
top: -height/2px
dispaly: flex; justify-content: center,align-items: center(极力推荐)
position: left: 50%,top: 50%; transform: translate(-50%,-50%)
不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
* clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：
{clear:both;height:0;overflow:hidden;}
* 给浮动元素父级设置高度
* 父级同时浮动（需要给父级同级元素添加浮动）
* 父级设置成inline-block，其margin: 0 auto居中方式失效
* 给父级添加overflow:hidden 清除浮动方法
* 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}- id选择器
- 类选择器
- 属性选择器
- 伪类选择器
- 标签选择器
- 伪元素选择器
- 通配符选择器优先级：内联样式 > ID选择器(100)> 类选择器(10) = 属性选择器 = 伪类选择器 > 元素选择器(1) = 关系选择器 = 伪元素选择器 > 通配符选择器(0)
!important
后代选择器选全部
子代选择器只选亲孩子
1. float 布局
优点： 比较简单，兼容性也比较好。只要清除浮动做得好，是没有什么问题的缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
2. 绝对布局
优点：很快捷，设置很方便，而且也不容易出问题缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
3. flex 布局
优点：简单快捷缺点：不支持 IE8 及以下
4. table布局
优点：实现简单，代码少缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。
5. grid布局
跟 flex 相似。
**新特性：**
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
**移除元素：**
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
**h5新标签兼容：**
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->**如何区分：**
DOCTYPE声明\新增的结构元素\功能元素
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内
容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型， 宽度 = 内容宽度。
2. box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承父盒子模型；
3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为 外边距塌陷。
4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。
调用localstorge、cookies等本地存储方式
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用after伪对象清除浮动
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}3.设置overflow为hidden或者auto
4.浮动外部元素
The HTML canvas is used to draw graphics that include everything from simple lines to complex graphic objects.The <canvas> element is defined by:
HTML画布用于绘制包含从简单线到复杂图形对象的所有图形。
<canvas>元素定义如下：
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics (usually JavaScript).
<canvas>元素只是图形的容器。 您必须使用脚本来实际绘制图形（通常为JavaScript）。
The <canvas> element must have an id attributeso it can be referred to by JavaScript:
<canvas>元素必须具有id属性，因此可以由JavaScript引用：
getContext() returns a drawing context on the canvas.
getContext（）返回画布上的绘图上下文。
The HTML canvas is a two-dimensional grid.The upper-left corner of the canvas has the coordinates (0,0).X coordinate increases to the right.Y coordinate increases toward the bottom of the canvas.
3 绘制 Drawing Shapes
ThefillRect(x, y, w, h) method draws a "filled" rectangle, in which w indicates width and h indicates height. The default fill color is black. A black 100*100 pixel rectangle is drawn on the canvas at the position (20, 20):
fillRect（x，y，w，h）方法绘制一个“填充”矩形，其中w表示width，h表示height。 默认填充颜色为黑色。
画布上的黑色100 * 100像素矩形绘制在位置（20,20）处：
The fillStyleproperty is used to set a color, gradient, or pattern to fill the drawing.Using this property allows you to draw a green-filled rectangle.
fillStyle属性用于设置颜色，渐变或图案以填充图形。
使用此属性可以绘制一个绿色填充的矩形。
The canvas supports various other methods for drawing:
Draw a LinemoveTo(x,y): Defines the starting point of the line.lineTo(x,y): Defines the ending point of the line.
Draw a CirclebeginPath(): Starts the drawing.arc(x,y,r,start,stop): Sets the parameters of the circle.stroke(): Ends the drawing.
GradientscreateLinearGradient(x,y,x1,y1): Creates a linear gradient.createRadialGradient(x,y,r,x1,y1,r1): Creates a radial/circular gradient.
Drawing Text on the CanvasFont: Defines the font properties for the text.fillText(text,x,y): Draws "filled" text on the canvas.strokeText(text,x,y): Draws text on the canvas (no fill).There are many other methods aimed at helping to draw shapes and images on the canvas.
画布支持各种其他绘图方法：
画一条线
moveTo（x，y）：定义行的起始点。
lineTo（x，y）：定义行的终点。
画一个圆
beginPath（）：启动绘图。
arc（x，y，r，start，stop）：设置圆的参数。
stroke（）：结束绘图。
渐变
createLinearGradient（x，y，x1，y1）：创建线性渐变。
createRadialGradient（x，y，r，x1，y1，r1）：创建一个径向/圆形渐变。
在画布上绘制文字
字体：定义文本的字体属性。
fillText（text，x，y）：在画布上绘制“填充”文本。
strokeText（text，x，y）：在画布上绘制文本（轮廓）。
还有许多其他方法旨在帮助在画布上绘制形状和图像。
天小编给大家带来了一本适用于web前端开发各个阶段的超级好书——《响应式web设计》pdf电子版。文末附获取方式
本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术，比如媒体查询、流式布局、弹性媒体和弹性字体等，还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中，比如移动先行（Mobile First）、渐进增强、平稳退化、无障碍设计等。更加难得的是，本书以设计跨屏幕的网页（响应式设计）为出发点，以点带面，把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中，读者在掌握先进设计方法的同时也能掌握最新的设计技术（比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频，以及CSS3的新选择器、特效、过渡、变形和动画等），从而可以免除重复学习新标准之苦，让自己一步跨入Web设计领域的最前沿。无论你想学习响应式Web设计，还是学习HTML5和CSS3的实际应用，本书都能满足你的需要，是毋庸置疑的明智之选。
说到底，响应式Web设计并非一门独立的技术，而只是现有技术的一个组合应用。只要有一点HTML和CSS基础的读者都能顺利地掌握它。对于中、高级的前端设计和开发人员，翻阅本书也有助于理清自己的知识脉络，对这个新的设计理念获得更全面、深入的理解和把握。
目录
第1章 HTML5、CSS3及响应式设计入门 1
1.1 为什么智能手机很重要（而老版的IE不再重要） 2
1.2 响应式设计一定是最佳选择吗 3
1.3 响应式网页设计的定义 3
1.4 为什么要在响应式设计上停滞不前 4
1.5 响应式网页设计示例 4
1.5.1 下载视口调试工具 4
1.5.2 在线创意源泉 11
1.6 为什么HTML5很优秀 12
1.6.1 省时省力 12
1.6.2 新增了语义化标签元素 13
1.7 CSS3为响应式设计和更多创新奠定了基础 13
1.7.1 底线：CSS3不破坏任何东西 14
1.7.2 CSS3如何解决日常设计问题 14
1.8 看呐，不用图片 17
1.9 HTML5和CSS3现在就能用吗 20
1.10 响应式网页设计不是灵丹妙药 20
1.11 引导客户：网站不必在所有浏览器中表现一致 21
1.12 小结 22
第2章 媒体查询：支持不同的视口 23
2.1 现在就能使用媒体查询 23
2.2 为什么响应式设计需要媒体查询 24
2.2.1 媒体查询语法 24
2.2.2 媒体查询能检测那些特性 26
2.2.3 用媒体查询改造我们的设计 27
2.2.4 加载媒体查询的最佳方法 27
2.3 我们的第一个响应式设计 27
2.3.1 我们的设计是固定宽度的，不要惊讶 28
2.3.2 响应式设计中要保证图片尽可能精简 32
2.3.3 小视口下的内容剪切 33
2.4 阻止移动浏览器自动调整页面大小 34
2.5 针对不同视口宽度修正设计 37
2.6 响应式设计中内容始终优先 38
2.7 媒体查询只是必要条件之一 42
2.8 小结 42
第3章 拥抱流式布局 43
3.1 固定布局经不起未来考验 43
3.2 为什么响应式设计需要百分比布局 44
3.3 将网页从固定布局修改为百分比布局 44
3.3.1 需要牢记的公式 45
3.3.2 设置百分比元素的上下文 47
3.3.3 必须时刻牢记上下文 52
3.4 用em替换px 54
3.5 弹性图片 56
3.5.1 让图片随视口缩放 56
3.5.2 为特定图片指定特定规则 58
3.5.3 给弹性图片设置阈值 59
3.5.4 超级全能的max-width属性 61
3.6 为不同的屏幕尺寸提供不同的图片 61
3.7 流动网格布局和媒体查询的默契配合 66
3.8 CSS网格系统 66
3.9 小结 72
第4章 响应式设计中的HTML5 73
4.1 HTML5的哪些部分现在就能用 73
4.1.1 大多数网站可以用HTML5编写 74
4.1.2 腻子脚本和Modernizr 74
4.2 如何编写HTML5网页 75
4.2.1 HTML5的精简之道 76
4.2.2 HTML5标签的合理写法 76
4.2.3 伟大的<a>标签万岁 77
4.2.4 HTML的废弃零件 77
4.3 HTML5的全新语义化元素 78
4.3.1 <section> 78
4.3.2 <nav> 79
4.3.3 <article> 79
4.3.4 <aside> 79
4.3.5 <hgroup> 79
4.3.6 <header> 81
4.3.7 <footer> 81
4.3.8 <address> 81
4.4 HTML5结构元素的实际用法 81
4.5 HTML5的文本级语义元素 87
4.5.1 <b> 88
4.5.2 <em> 88
4.5.3 <i> 88
4.5.4 在页面中应用文本层语义元素 88
4.6 遵循WAI-ARIA实现无障碍站点 90
4.7 在HTML5中嵌入媒体 93
4.8 用HTML5的方法为页面添加视频或音频 93
4.8.1 提供备用的媒体源文件 95
4.8.2 针对老版本浏览器的备用方案 95
4.8.3 和标签的用法基本一致 96
4.9 响应式视频 96
4.10 离线Web应用 99
4.10.1 离线Web应用概述 99
4.10.2 让网页可离线使用 99
4.10.3 理解manifest文件 100
4.10.4 页面被自动加载到离线缓存 101
4.10.5 版本注释的用途 101
4.10.6 离线访问网站 101
4.10.7 离线Web应用的故障诊断 102
4.11 小结 103
第5章 CSS3：选择器、字体和颜色模式 104
5.1 CSS3给前端开发人员带来了什么 104
5.1.1 Internet Explorer 6到8对CSS3的支持 105
5.1.2 使用CSS3设计和开发页面 105
5.2 CSS规则解析 105
5.3 私有前缀及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多栏布局 108
5.4.2 文字换行 110
5.5 CSS3的新增选择器及其用法 111
5.5.1 CSS3属性选择器 111
5.5.2 CSS3结构伪类 113
5.5.3 对伪元素的修正 122
5.6 自定义网页字体 123
5.6.1 @font-face规则 124
5.6.2 使用@font-face嵌入网页字体 124
5.7 帮帮我，标题模糊怎么办 127
5.8 新的CSS3颜色格式和透明度 129
5.8.1 RGB颜色 130
5.8.2 HSL颜色 131
5.8.3 针对IE6、IE7和IE8提供备用颜色值 132
5.8.4 透明通道 132
5.9 小结 134
第6章 用CSS3创造令人惊艳的美 135
6.1 文字阴影 136
6.1.1 HEX、HSL或RGB颜色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字阴影 138
6.1.4 制作浮雕文字阴影效果 139
6.1.5 多重文字阴影 140
6.2 盒阴影 140
6.2.1 内阴影 141
6.2.2 多重阴影 142
6.3 背景渐变 143
6.3.1 线性背景渐变 144
6.3.2 径向背景渐变 147
6.3.3 重复渐变 149
6.4 背景渐变图案 151
6.5 CSS3的响应性 153
6.6 组合使用CSS3属性 155
6.7 多重背景图片 159
6.7.1 背景图片大小 161
6.7.2 背景图片位置 161
6.7.3 背景属性的缩写语法 161
6.8 更多CSS特性 162
6.9 可缩放图标：响应式设计中的完美选择 162
6.10 小结 163
第7章 CSS3过渡、变形和动画 164
7.1 什么是CSS3过渡以及如何使用它 164
7.1.1 过渡相关的属性 166
7.1.2 响应式网站中的有趣过渡 168
7.2 CSS3的2D变形 169
7.3 尝试CSS3的3D变形 174
7.3.1 分析3D变形效果 176
7.3.2 3D变形尚未成熟 178
7.4 CSS3动画效果 179
7.5 小结 185
第8章 用HTML5和CSS3征服表单 186
8.1 HTML5表单 186
8.1.1 理解HTML5表单中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list（及对应的datalist元素） 191
8.1.7 HTML5的新输入类型 192
8.1.8 日期和时间输入类型 198
8.2 如何给不支持新特性的浏览器打补丁 203
8.3 使用CSS3美化HTML5表单 204
8.4 小结 210
第9章 解决跨浏览器问题 211
9.1 渐进增强与优雅降级 215
9.2 该不该修复老版本IE 216
9.2.1 统计数据（再看看世界的变化） 216
9.2.2 个人选择 216
9.3 前端的瑞士军刀：Modernizr 217
9.3.1 使用Modernizr辅助修正样式问题 219
9.3.2 使用Modernizr让老版本IE支持HTML5元素 221
9.3.3 给IE6、7、8追加min/max媒体查询功能 222
9.3.4 使用Modernizr按需加载资源 223
9.4 必要时将导航链接转换为下拉菜单 225
9.5 高分辨率设备（未来趋势） 228
9.6 小结 231
*请认真填写需求信息，我们会在24小时内与您取得联系。
