月份:2016年7月

Chrome 开发工具 (Chrome Developer Tools):Network Panel说明

出处:http://www.cnblogs.com/starof/p/5443445.html 官方资料:Chrome Developer Tools: Network Panel 一、chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如详细的时间数据,http请求头响应头,cookies,WebSocket数据。 Chrome 开发工具 (Chrome Developer Tools):Network Panel说明 通过分析这些数据,可以知道哪个资源加载耗时最久,谁发起的网络请求,这些对性能优化很有帮助。 这些数据的获取都是通过一个api来完成的,Resource Timing… Read More

HTML5: 全局属性

出处:http://www.cnblogs.com/starof/p/4593741.html 全局属性:对于任何一个标签都是可以使用的属性。 一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role=”xxx”>,但这是种非常不规范的方式。 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突。 <form data-type="comment" class="container"> ... </form> data-*自定义属性不影响页面布局,但可读可写。下面介绍怎样读写。 1、获取自定义属性 获取时通过dataset对象,使用”.”来获取属性,需要去掉data-前缀。 html: <div id='test' data-age="23">html5 data-*自定义属性 data-age</div>… Read More

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前。 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。 在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。 BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。转换为 BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个 BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。 BFC的运用 在w3c的规范中,除了上面的一段定义之外,BFC的相关知识点分布地比较零散,但基本集中在float、绝对定位、margin… Read More

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说,页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质,布局也就轻而易举。 在 W3C 规范中定义了标准的盒模型: Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding,… Read More

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?

其实方法非常简单,直接写代码: <div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="visibility: hidden;" /> </div> 同时设置图片和背景图片,同时将图片设置为不可见(不是不显示),只显示背景图片。 这里用到技巧就是:display:none和visibility:hidden的区别 dispaly:none ; CSS1隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 visibility: hidden;设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间。如果希望对象为可视,其父对象也必须是可视的。 一句话:display:none是看不见也摸不到,visibility:hidden看不见但摸得到。 本文:CSS: div高度自动适应背景图片的高度… Read More

域名详解

域名 域名就是用来唯一标示互联网上的服务器的,当我们访问一个网站时候,比如http://www.example.com/index.html,其中的com,example.com,www.example.com都是域名。域名不区分大小写,即www.example.com与WWW.EXAMPLE.COM一样。 FQDN FQDN(Fully qualified domain name)即全域名,大多数指的是一个绝对域名,这个域名指明了其在DNS树级结构中的准确位置。它也指明了其中所有域的层 级,包括顶级域和根域。www.example.com.就是一个FQDN。 DNS resolver一般是按照FQDN的格式来解析一个域名的,如果被解析的域名 中不存在.,则DNS resolver会自动为其加上.。 域名的等级 域名分为顶级域名(Top Level Domain, TLD),二级域名,三级域名等等。以www.example.com为例,其中com为顶级域名,example为com下的子域名,www是example.com下的子域名,这是一个树形的结构,最多可以有127个层 级。 com |--example… Read More

移动开发需要知道的像素知识『多图』

像素(Pixel)对于WEB开发者来说很是熟悉,在PC互联网时代没少与其打交道。进入移动互联网之后,随着移动设备屏幕的解析度越来越高,衍生了一些关于屏幕和像素的一些新概念,比如DPI,DP,PT,Retina,4K等等,本文对这些概念做一个简单的介绍。 DPI与PPI DPI(Dots Per Inch)是印刷行业中用来度量空间点密度用的,这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设 备中的原子单位不是墨汁点而是像素,所以就创造了PPI(Pixels Per Inch),这个值是屏幕每英寸的像素数量,即像素密度(Screen density)。由于各种原因,目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中,不过二者的意思是一样的,都是代表像素密度。 高PPI屏幕显示的元素会比较精细(看起来会比较小),低PPI屏幕显示的元素相对来说就比粗糙(看起来会比较大),我们通过一幅图来看看在不同PPI下元素显示的区别: 移动开发需要知道的像素知识『多图』 HD与4K 现在移动设备、智能电视宣传最多的两个关键词估计就是HD、4K,这二者都是用来描述显示设备分辨率的标准,到底二者之间有什么区别? HD(High-Definition)的分辨率要高于1280x720px或者720p。 Full HD的分辨率要高于1920x1080px,目前是主流电视以及高端手机(比如Galaxy SIV, HTC one, Sony… Read More

HTML5: 两个viewport的故事(第一部分)

英文:http://www.quirksmode.org/mobile/viewports.html 翻译:http://weizhifeng.net/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕。 这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动 端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。 概念:设备像素和CSS像素 你需要明白的第一个概念是CSS像素,以及它和设备像素的区别。 设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率,并且其值可以(通常情况下)从screen.width/height属性中读出。 如果你给一个元素设置了width: 128px的属性,并且你的显示器是1024px宽,当你最大化你的浏览器屏幕,这个元素将会在你的显示器上重复显示8次(大概是这样;我们先忽略那些微妙的地方)。 如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。 现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以,元素的宽度并没有从128个像素被修改为256个像素;相反是实际像素被放大了两倍。形式上,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。 换句话说,放大到200%使一个CSS像素变成为一个设备像素的四倍。(宽度2倍,高度2倍,总共4倍) 一些配图可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的;CSS像素与设备像素完全重叠。 HTML5: 两个viewport的故事(第一部分) 现在让我们缩小。CSS像素开始收缩,这意味着现在一个设备像素覆盖了多个CSS像素。 HTML5: 两个viewport的故事(第一部分)… Read More

HTML5: 两个viewport的故事(第二部分)

英文:http://www.quirksmode.org/mobile/viewports2.html 翻译:http://weizhifeng.net/viewports2.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕。 这篇文章我们来聊聊关于移动浏览器的内容。如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身。 移动浏览器的问题 当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸。为桌面浏览器所设计的网站在移动浏览器中显示的内容明显要少于在桌面浏览器中显示的;不管是对其进行缩放直到文字小得无法阅读,还是在屏幕中以合适的尺寸只显示站点中的一小部分内容。 移动设备的屏幕比桌面屏幕要小得多;想想其最大有400px宽,有时候会小很多。(一些手机声称拥有更大的宽度,但是它在撒谎-或者也可以说它给我们提供了没用的信息。) 平板设备中的像素中间层会在桌面环境和移动环境的缺口之间架起一段桥梁,比如像iPad或者传说中HP基于webOS所研发的设备,但是这并没有改变根本问题。站点必须也能在移动设备上工作,所以我们不得不让它们能在小尺寸的屏幕上正常显示。 最重要的问题在CSS上,特别是viewport的尺寸。如果我们照搬桌面环境的模式,那么我们的CSS就要立马熄火了(译者:即显示混乱)。 让我们看下之前sidebar为width: 10%的例子。如果移动浏览器想要实现跟桌面浏览器一样的行为,它们最多为元素设置40px的宽度,但是这太窄了。你的流式布局会看起来被挤乱了。 解决这个问题的一个方法是为移动浏览器建立一个特定的站点。先抛开你是否有必要这么做这个基本问题,而实际的情况是只有很少的网站拥有者真正知道要对移动设备做特殊的处理。 移动浏览器厂商想给它们的客户尽可能的提供最好的体验,这现在指的就是「尽可能的跟桌面一样」。因此耍一些花招是必要的。 两个viewport viewport太窄了,以至于不能正常展示你的CSS布局。明显的解决方案是使viewport变宽一些。无论如何,需要把它分成两部分:visual viewport和layout viewport。 George Cummins在Stack Overflow上对基本概念给出了最佳解释:… Read More

CSS3: 移动端开发中 max-device-width 与 max-width 的区别

翻译自stackoverflow.com,源地址:http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web 有同学需要开发web页在iphone/android手机上访问,想问max-device-width 与 max-width 有什么区别,他打算针对不同的屏幕大小加载不同的样式,就像下面这样: @media all and (max-device-width: 400px) @media all and (max-width: 400px) 这两者有什么不同? max-width 指的是显示区域的宽度,比如浏览器的显示区域宽度 (max-width is… Read More