页面布局

浏览器中的页面 一、DOM树 1、在渲染引擎中，DOM有三个层面的作用： DOM是表述HTML的内部数据结构，它会将Web页面和JavaScript脚本连接起来，并过滤一些不安全的内容 2、DOM树如何生成： 网络进程和渲染进程建立一个管道，HTML解析器直接解析，不需要等待text/html类型的数据全部接受完毕再进行解析 3、HTML 解析过程 ①通过分词器将字节流转换为token ②将token解析为DOM节点 （将token压入栈中，然后一个一个分析） ③将DOM节点添加到DOM树中 4、JavaScript如何影响DOM生成 暂停HTML解析，下载解析执行完毕后再继续进行html解析 （如果执行js代码期间遇到CSSDOM，则需要等待CSS 下载加载完成） 为了快速执行js，在DOM生成前，会有个预解析操作（当渲染引擎收到第一个字节流后，会开启一个预解析线程，用来分析HTML文件包含的JS，CSS等相关文件，并提前下载） CSS样式文件本身不会阻塞DOM生成，但是JS会阻塞DOM生成，而CSS样式文件会阻塞JS执行 5、渲染引擎有一个安全检查模块叫XSSAuditor，用来检查词法安全 二、CSS如何影响首次加载时的白屏时间 CSSDOM作用： 提供给Javascript操作样式表的能力 为布局树的合成提供基础的样式信息 URL 请求开始，到首次显示页面的内容

1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示？ iphone5分辨率640*1136 逻辑像素与物理像素的关系 px逻辑像素：浏览器使用的抽象单位 dp，pt物理像素：设备无关像素 dpr：设备像素缩放比 计算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2； DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度 目前，在计算机显示设备参数描述上，二者意思一致 计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏） 注意：单位为硬件像素（物理像素），非px PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。 retina屏（高清屏）：dpr都是>=2。 2、 viewport 手机浏览器默认为我们做了两件事情： ① 页面渲染在一个980px（ios）的viewport ② 缩放 为什么要有viewport？ 一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。 度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport 设计移动web

转（ http://www.cnblogs.com/tianyaxiang/archive/2011/12/11/2284195.html ） Razor引擎学习：RenderBody，RenderPage和RenderSection ASP.NET MVC 3 已经正式发布一段时间了，现在估计许多人都在拼命学，我也不能例外，刚刚看到了一篇文章，介绍了三个非常有用的方法：RenderBody，RenderPage和RenderSection，现在自己再总结下。 1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) @RenderBody()

@RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 @RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage("~/Views/Shared/_Header.cshtml") 带参数： @RenderPage("~/Views/Shared/_Header.cshtml", new { parm = "my", parm2 = "you" }) 被@RenderPage的页面获取传递过来的参数： @PageData["param"] @RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderSection("Header") 当然还要在视图中定义节，否则会出现异常：

1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) 带参数 @RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you") 调用页面获取参数： //获取 RenderPage() 传递过来的参数 @PageData["param"] 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml

1. RenderBody 在Razor引擎中没有了“母版页”，取而代之的是叫做“布局”的页面（_Layout.cshtml）放在了共享视图文件夹中。在这个页面中，会看到标签里有这样一条语句： @RenderBody() 其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。 这个方法不需要参数，而且只能出现一次。 2. RenderPage 从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”) 带参数 @RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you") 调用页面获取参数： //获取 RenderPage() 传递过来的参数 @PageData["parm"] 3. RenderSection 布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下： @RenderPage(“~/Views/Shared/_Header.cshtml”

在浅析Chrome的渲染流程（上）中我们介绍了渲染流水线中的 DOM生成 、 样式计算 和 布局 三个阶段。今天我们来讲下渲染流水线后面的阶段。 分层 经过生成布局之后生成的布局树，将每个元素的具体位置信息都计算出来了，那么接下来是不是开始着手绘制页面了？ 答案依然是否定的。 因为页面中有很多复杂的效果，比如一些复杂的3D变换、页面滚动，或者使用z-indexing做z轴排序等。为了更加方便地实现这些效果， 渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerThree） 。提到图层，大家最先应该想到的是PS软件。PS中图层是很常见的，比如将图片背景变成透明的，就需要先复制一个图层出来后，用滤棒清除掉图层中不需要的部分，然后应用到原始图像上，就可以生成一个具有透明背景的图片了。 要想直观地理解什么是图层，可以通过Chrome的 “开发者工具”，选择 “Layers” 标签，就可以可视化页面的分层情况，如下图： 如果找不到 “Layers” 这个标签，请参考下图： 从上面的第一张图可以看出，渲染引擎给页面分了很多图层，这些图层按照一定的顺序折叠加在一起，就形成了最终的页面。 现在你知道了浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。那么这些图层和布局树节点的之间的关系是什么样子呢？请参考下图： 通常情况下，

1. 创建GitHub账号 GitHub技术博客首先需要GitHub账户，请在官网按照步骤自行注册账号。 2. 创建博客仓库 使用注册的账户登录，然后点击创建仓库，输入项目信息如下所示，注意项目名称规则，已用户名.github.io为名称。 3. 项目设置页面 选择刚刚创建的仓库，点击 Setting 链接，进入仓库设置页面。 4. 选择自动页面生成器 在设置页面中，在页面的最下方选择加载页面自动生成器。 5. 创建用户页面 在页面生成器中，填写对应的信息 网页标题，网页名称，内容等信息，完成后选择加载页面布局。 6. 选择页面布局 在打开的页面布局中，选择一个页面布局样式，然后点击发布页面按钮 7. 查看页面效果 打开对应的网址 http://用户名.github.io 既可以查看地址。 来源： https://www.cnblogs.com/SLchuck/p/5674241.html

转自： http://www.cnblogs.com/lyzg/ 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 1. 问题的引出 最近阅读白树的博文《 移动web资源整理 》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码： html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--引入css样式--> 7 <link rel="stylesheet" href="fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome.min.css"> 8 <style> 9 /*设置body样式*/ 10 body { 11 margin: 0; /*去掉蓝色边框两侧的空白因为body默认属性两边有缝隙*/ 12 } 13 14 /*设置头部样式*/ 15 .pg_header { 16 background-color: #2459a2; 17 height: 48px; 18 line-height: 48px; /*设置header中的内容根据高度上下居中(文字)*/ 19 20 min-width: 980px; /* 设置最小宽度*/ 21 } 22 23 /*设置logo样式*/ 24 .pg_header .logo { 25 background-color: #3b5998; 26 27 width: 200px; 28 height: 48px; 29 color: white; 30 font