第三方内容在其沙箱区域内具有强大的能力。如果你担心恶意用户诱使你的网站加载第三方资源，可以通过 CSP 用作防护手段，其可以限制加载图片，脚本和样式的来源。
因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。
浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
上传截图很多做法是把图像发送到后端，把裁剪后的结果发送给浏览器，这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切：这里头关键有三步：显示未经处理的图片，得到裁剪区域，显示裁剪后的区域。
由于http是无状态的协议，这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足，目前实现会话跟踪的常用技术方法：cookie、session、url重写、隐藏input、ip地址。
Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容
在浏览器地址栏输入URL,浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤,如果资源未缓存，发起新请求,如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证...
H5使用input标签调用系统默许相机，摄像，录音功能。使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能
外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见，display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释
我们都知道在html中引入外部的CSS 有2种方式，link标签和@import，他们又什么区别呢？link属于html标签，而@import是css提供的，页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载...
就是在每个浏览器中上边两个中只能使用一个的话一定得记得把IE9考虑进来，因为它也是能识别条件注释的（感觉IE9就是IE向现代高级浏览器过渡的东西，CSS3只支持一部分，但是之前IE专有的一些问题照样存在）
IE6不支持min-height，解决办法使用css hack，ol内li的序号全为1，不递增。解决方法：为li设置样式display: list-item;定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。解决办法：
3D 场景中的面不只有水平面这一个，空间是由无数个面组成的，所以我们有可能会在任意一个面上放置物体，而空间中的面如何确定呢？我们知道，空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板，从面板中拖动物体到右侧的 3D 场景中
因为不是所有浏览器都支持WebP格式，我们就有两种思路：一个是只在支持WebP格式的浏览器中使用WebP格式；一个是让不支持WebP格式的浏览器可以支持WebP。
在开发中，css样式有一些属性往往需要重复使用，为了避免代码冗余，降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】，随着这些工具的流行，CSS变量也开始规范制定，目前很多浏览器都已经支持了
在css中我们想实现透明颜色，首先就会想到rgba()和hsla()这2个属性。这篇文章就简单介绍下使用这2种方式来实现半透明边框。
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果。把box-shadow特性的两个偏移量设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。
