xml地图|网站地图|网站标签 [设为首页] [加入收藏]
渲染引擎介绍,等高分栏布局小结
分类:web前端

考虑 <pre> 标签的样式

2016/06/02 · CSS · 标签

原文出处: Chris Coyier   译文出处:众成翻译   

你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签,它允许其中的空格真正显示出来。例如:四个空格将真实显示成四个空格。这不同于其他标签通常的做法,其他标签会将之间的空白压缩成一个。从这一点来说,<pre>标签真的是很有用。

等高分栏布局小结

2016/02/06 · CSS · 等高分栏

原文出处: 流云诸葛   

上一篇文章《圣杯布局小结》总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求。后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如何在实现分栏布局的同时保证每栏的高度相同。我发现这种等高分栏布局的情况,在网站里面其实也很常见,所以本文总结了几种可用的方法来解决这个新的需求。

GCanvas 渲染引擎介绍

2017/07/31 · HTML5 · Canvas

原文出处: 淘宝前端团队(FED)- 韦青   

图片 1

GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript API。基于这套 API 可以方便的去做图形绘制、动画渲染等,开发的体验与 H5 Canvas 是完全一样的。

你在 <pre> 标签中使用 <code> 标签吗?

<pre> 标签的 “per” 的意思是 “preformatted text”(预格式化的文本),没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用,当我需要显示一段代码时,使用它们,下面是一个例子:

JavaScript

<pre><code> function cool(x) { return x + 1; } </code></pre>

1
2
3
4
5
<pre><code>
function cool(x) {
  return x + 1;
}
</code></pre>

解释一下:在<pre><code>和代码之间有一个换行,而这也会被显示成一个空行,这非常讨厌。没有非常好的 CSS 方法来解决这个问题,最好的方法是与 <pre> 标签同一行开始代码,或者用编译程序来去除这里的换行。

图片 2

1. 方法一:万能的flex

跟上篇文章不同,这次把flex这种方法放在了第一位,因为相比较起来,它是所有分栏布局方法里面,优点最多的,如果兼容性允许的话,很有必要在任何时候都优先使用它完成页面布局。如果你打开上篇文章,找到倒数第二部分关于flex实现分栏布局的代码,或者把上篇文章提供的代码下载下来,直接预览flex_layout.html,你会发现上篇文章的那段代码其实已经做到了等高分栏布局,同一段代码,可以实现上篇文章中提到的五种分栏布局,还可以实现本文提到的等高布局的情况,这种能力其它方法真的无法比拟。而它之所以能实现等高布局,跟一个flex的css属性有关系,这个属性是:align-item。它的默认值是:stretch,在flex item元素比如layout__main或layout__aside的高度未定义或者为auto的情况下,会拉伸flex item元素的高度或宽度,铺满flex的交叉轴,详细的原理可以通过上文提供的flex学习资源去了解,这里只做一个简单的引用说明。

GCanvas 介绍

GCanvas发展经历了两个阶段。

  • 第一阶段,2014 年中到 2015 年底,解决 Android 平台 WebView Canvas 渲染性能差的问题。
  • 第二阶段,2016 年 11 月到现在,为前端提供 Native 图形绘制能力。

用一句话来概括 GCanvas,即遵循 W3C 标准,移动端的跨平台的高性能图形渲染引擎。可以从三个方面来解释。

  • 遵循 W3C 标准
    GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript API,开发人员基于这套 API 可以方便的去做图形绘制、动画渲染等。开发的体验与 H5 Canvas 是完全一样的。
  • 跨平台
    GCanvas 的内核基于 OpenGL ES, 用 C++ 实现了一套用于描述 Canvas 标准 API 的接口实现。我们将其称为渲染引擎内核。并通过交叉编译,使得可以适配 Android、iOS 这两大主流移动平台,因而具有跨平台的特性。
  • 高性能
    早期移动平台上 H5 Canvas 去做一些复杂的动画或游戏,在 WebView 上的体验非常差。 主要原因是 WebView 对 GPU 硬件加速的支持差。高性能则是充分利用了 GPU 硬件的渲染能力,主要体现两个方面:
    • 对于 Android 3.0 以前的系统,Android 的渲染管线是不支持硬件加速的,WebView 中的 Canvas 不能获得 GPU 的图形渲染能力的支持。对于这类系统,通过 GCanvas 可以获得更底层的 OpenGL ES 的硬件加速能力提高渲染效率。
    • 链路上来看,缩短了调用路径,提高了渲染性能。使用了 GCanvas 则不需要经过 WebView 内部的复杂逻辑处理和图层树渲染,而是让 JavaScript 通过桥接方式直接调用渲染引擎内核(OpenGL ES)。

选择一个字体

由于 <pre> 标签主要是用来显示代码块,而代码通常使用等宽字体,因此将 <pre> 的样式字体设置成等宽字体是个好主意。

对我们来说幸运地是,浏览器默认字体已经将 <pre> 设置成等宽字体,因此你可以不做任何处理。当然,你可以设置一个你喜欢的字体。

这里有篇文章是 Michael Tuck 写于 2009 年的,他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中,首选字体列在前面,备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

1
2
3
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

图片 3

我不确定 font stack 在今天有没有过时,不管怎样这是一个好的开端。

另外,你可以用自定义字体。或者使用第三方服务。在我写下这篇文章的时候,Typekit 提供了 23 种等宽字体。

2. 方法二:使用table或者伪table

上篇文章中还有另外两种布局方法没有介绍,第一种就是这里要说的table布局或者伪table布局。table布局用的就是table tr td这些元素去实现,相信绝大部分web开发人员在入门html时,首先接触到的布局方法肯定就是table布局了,这种方法简单高效,用它做任何分栏布局都不是问题,只是因为table的嵌套结构太多,html冗杂,又不利于DOM的操作和渲染,用来布局不符合语义,总之缺点较多,所以目前的环境下,用的情况越来越少了。伪table布局其实跟table布局类似,只不过借助于css,可以让我们不直接使用table tr td这些直接的表格元素,而是通过display: table, display: table-row, display: table-cell,改变元素的显示特性,让浏览器把这些元素当成table来渲染,这种渲染的表现跟用真实的table没有啥区别,就连那些table专用的css属性,比如table-layout,border-collapse和border-spacing,都能产生效果。table布局的方法已经很少被采用了,本文也就没必要再去介绍,但是伪table布局的方法值得学习一下,经过这两天的学习,发现伪table的方式相比直接用表格布局,有不少的优点,值得运用到工作中去。不过在说明使用伪table布局的方法之前,得先了解一些伪table相关的知识:

1)可用于伪table表现的display属性值有:

图片 4

2)当把一个元素的display属性设置成以上列出的值后,就可以把这个元素看成与该属性对应的表格元素,比如table-cell对应的就是td;同时,这个元素会拥有跟表格元素一样的特性,比如display: table或者inline-table的元素可以使用table-layout,border-collapse和border-spacing这三个原本只有table才能生效的属性;display:table-cell的元素跟td一样,对宽度高度敏感,对margin值无反应,对padding有效。

3)关于table-cell还有一点要说明的就是,它会被其他一些CSS属性破坏,例如float, position:absolute,所以这些个属性不能同时使用。

4)跟直接使用表格元素不同的是,在使用表格元素的时候需要完全遵守表格元素嵌套结构,也就是下面这种:

<table> <thead> <th></th> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <th></th> </tfoot> </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
    </tfoot>
</table>

而使用伪table的那些属性时,可以仅单独使用某一个属性,浏览器会在这些元素的外层包裹缺失的来保证伪table元素框嵌套结构的完整性,这些框跟常提到的行框一样都是不可见的,网上有的文章里也把这种做法叫做匿名表格。下面的这个代码中,tb-cell元素的外层没有加display: table-row和display: table的元素:

.tb-cell { display: table-cell; padding: 10px; border: 1px solid #ccc; } <div class="tb-cell">这是第1个display: table-cell;的元素。</div> <div class="tb-cell">这是第2个display: table-cell;的元素。</div>

1
2
3
4
5
6
7
8
.tb-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}
 
<div class="tb-cell">这是第1个display: table-cell;的元素。</div>
<div class="tb-cell">这是第2个display: table-cell;的元素。</div>

这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

1
这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

但是看到的效果是(蓝色背景是它们父层的一个包裹元素: width: 800px;margin-left: auto;margin-right: auto):

图片 5

因为浏览器自动在这两个元素的外层,加了跟能够跟tr和table起相同作用的框,来包含这两个元素形成的框,所以这两个元素看起来就跟实际的表格效果一样。假如浏览器没有做这个处理,这两个元素之间是不可能没有间隙的,中间会有一个因为换行符显示出来的空格。这种自动添加的框都是行内框,不是块级框。

接下来看看如何通过这些伪table的属性来完成上文的分栏布局以及本文要求的等高分栏布局,玩法有很多:(本文相关源码下载)

玩法一:模拟直接用表格布局(对应源码中table_layout1.html)

这种方法的思路是布局时完全按照表格的嵌套层次来处理,把display: table, display: table-row, display: table-cell都用上,相当于就是利用完整的table来做,比如说要实现上文的布局三(3栏布局,2个侧边栏分别固定在左边和右边,中间是主体内容栏),就可以这么干:

<div class="layout"> <div class="layout__row"> <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div> </div>

1
2
3
4
5
6
7
<div class="layout">
    <div class="layout__row">
        <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>
        <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
        <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>
    </div>
</div>

<style type="text/css"> .layout { display: table; width: 100%; } .layout__row { display: table-row; } .layout__col { text-align: center; display: table-cell; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__row {
        display: table-row;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

效果还是那个效果,而且天生支持等高布局:

图片 6

这个布局原理跟使用table是完全一样的,所以使用起来非常容易(以上提供的是针对上文布局三的实现,其它四个布局的实现不会再一一介绍了,源码里面也不会提供,因为相对比较简单)。

这种伪table布局有什么特点呢:

1)相比直接用表格元素,这种做法不需要考虑语义,表格元素是有语义的,主要是用来显示网页上列表型的数据内容,虽然可以完成布局,但是布局结构都是没有语义的,所以直接用表格不合适,而这种伪table布局的特点就是:它没有语义,但是可以像表格那样布局;

2)html的层次结构相比直接用table元素也要简单一些,我们这里只用到了3层,直接用table元素的话可能还有tbody这一层;

3)相比上文提到的那些布局方法,如圣杯布局和双飞翼布局,这个做法在css方面相对简单,在html方面也只多了一层嵌套;

4)缺点是分栏之间的间隔不能用margin和padding来做,如果用margin,这个属性在display: table-cell的元素上根本不会生效;如果用padding,那像demo里面各栏的背景色就都会连到一块,做不出间隔的效果,如果在layout__col里面再嵌套一层,在这一层设置背景色的话,又会增加html的层次,也不是很好。我这里是投了个巧,用border处理了一下。

玩法二:去掉display: table-row(对应源码中的table_layout2.html)

前面说过,浏览器会用匿名表格的方式,添加缺失的框,所以玩法一中的代码,把layout-row完全去掉,一点都不影响布局效果:

div class="layout"> aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定aside> div class="layout__col layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div> aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定aside> div>

1
2
3
4
5
div class="layout">
    aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定aside>
    div class="layout__col layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div>
    aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定aside>
div>

style type="text/css"> .layout { display: table; width: 100%; } .layout__col { text-align: center; display: table-cell; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef; } style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
style>

玩法三:去掉display: table(对应源码中的table_layout3.html)

根据玩法二,可以试想一下是否能再把display: table这一个属性给去掉,反正浏览器还会再添加框来包裹:

<div class="layout"> <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout__col { text-align: center; display: table-cell; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

效果是:

图片 7

这个并没有达到我们的效果,因为我需要主体内容栏能够自适应宽度。产生这个效果的原因是什么,就是因为没有加显示display: table这一层,浏览器自动加了一个框,不过这个框是行内框,导致主体内容栏显示的宽度就跟内容的宽度一致了。为了解决这个问题,可以这么干,html结构不变,css稍加改动:

.layout__main { width: 3000px; background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; }

1
2
3
4
5
6
7
8
9
10
.layout__main {
    width: 3000px;
    background-color: #4DBCB0;
}
 
.layout__aside {
    width: 200px;
    min-width: 200px;
    background-color: #daf1ef;
}

关键的代码就是红色新增的那两行,首先给主体内容栏设置一个很长的宽度,而且只能用具体的长度设置,不能用百分比,然后给侧边栏设置一个最小宽度,免得主体内容栏把侧边栏的宽度给挤掉了。这个原理就是因为display: table-cell的作用,导致layout__main跟layout__aside表现出跟td元素一样的特性,td默认的宽度就是可自动调整的,即使宽度设置的很大,也不会撑破table的宽度,这里虽然那个自动添加的框看不到,但是这个框的最大宽度也就是浏览器的宽度,layout__main不会打破这个宽度的,所以可以放心使用。

玩法四:去掉layout这一层包裹元素(对应源码:table_layout4.html)

如果网站比较简单,去掉layout这一层包裹元素也是可以的:

<header>顶部</header> <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside> <footer>底部</footer>

1
2
3
4
5
<header>顶部</header>
<aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>
<div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>
<footer>底部</footer>

<style type="text/css"> .layout__col { text-align: center; display: table-cell; line-height: 50px; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { width: 3000px; background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
        line-height: 50px;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        width: 3000px;
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

以上四种做法都能实现我们想要的分栏等高布局,兼容性方面,不考虑IE8及以下,其它浏览器几乎没有问题。

由于匿名表格的作用,导致采用伪table布局的方法变得非常简洁,上文之所以没提到这个做法,是因为完全不知道有匿名表格这回事,我也是写这篇文章才学习到的,学完之后,发现又找到了一个做分栏布局的好办法,希望前面的这些介绍能帮助你掌握好这个用法。实际上伪table的这些属性,尤其是table-cell,用途非常多,本文没有办法一一介绍,但是能提供一个思路,将来工作中也许有很多其它布局场景,我们都可以想想用table-cell来处理。

GCanvas 组成

图片 8

如上图所示 GCanvas 由三层组成 JavaScript 层、插件层、核心渲染库。

  • JavaScript 层
    JavaScript 提供对外统一的 API,支持 Canvas 2D 和 WebGL 的功能接口。接口支持情况请参考 API 覆盖。
  • 插件层
    插件层核心包含三部分。
    • Bridge 桥接
      JavaScript 到 Native 的桥接,比较主流的方式 JSBridge 和 JSBinding。JSBridge 实现方式,如 Cordva、WebviewJavascriptBridge 等。 还可以用 JSBinding 方式来实现,如 V8、JavascriptCore 等。实际的应用场景中这两种桥接方式都有支持。
    • 通用插件
      通用插件包含了通用插件接口与实现、GCanvas 的管理、渲染命令队列管理、纹理缓存等。支持不同类型桥接方式下的扩展。
    • 系统适配
      系统适配涉及 Android 和 iOS 对 OpenGL ES 实现的差异,网络图片下载,字体渲染等方面。
  • 核心渲染库
    核心渲染库包括对外统一的接口,以及 Contex2D 和 WebGL 模块,底层则是对 OpenGL ES API 等分装。

折行还是不折行?

这有关个人偏好,对我个人来说,分两种情况。

当我自己在编辑器写代码时,我倾向于让代码自动折行而不出现水平滚动条。而当我在文章中阅读代码时,我喜欢代码不折行。我知道这很奇怪。在 CodePen 里,我们将折不折行提供成一个选项让用户自己选择,因为大家本来就是萝卜青菜各有所爱。

图片 9

在展示代码的时候,你需要选择究竟是否折行。如果你选择折行,幸运地,你可以使用为<pre>标签提供的独一无二的样式来保留空白同时折行,如同下面这样:

CSS

pre { white-space: pre-wrap; }

1
2
3
pre {
  white-space: pre-wrap;
}

如果你不想折行,你就不用像上面那样做,不过你得考虑如果一行太长了怎么办。太长的行可能会撑开固定宽度的容器或者超出容器范围。要避免这个,我建议你加上横向滚动条:

CSS

pre { overflow-x: auto; }

1
2
3
pre {
  overflow-x: auto;
}

图片 10

你也可能要考虑 max-height 指定最大高度,以及 overflow:auto 允许所有的滚动条,来避免代码块过高。

3. 方法三:使用绝对定位

上文没有介绍的另外一种分栏布局方法就是这里要介绍的绝对定位。之所以没介绍这个方法,是因为上文介绍的都是分栏自适应布局的方法,而绝对定位的做法,不能完全做到我们想要的分栏自适应布局,分栏自适应有两个原则:第一是主体内容栏宽度自适应,这点绝对定位是可以做到的;第二点是所有栏的高度都能动态变化,并且不能导致父容器高度塌陷,不能在各栏内部出现滚动或溢出的情况,这点绝对定位不容易做到适用所有场景。而本文又把这种布局方法拿出来介绍,是因为绝对定位做等高布局很容易,所以用绝对定位做等高分栏布局是一种可行的办法,只是这种方法适用的场景有一些限制,需要根据实际情况考虑是否要采用。

做法一:所有栏都采用绝对定位(对应源码中absolute_layout1.html)

<header>顶部</header> <div class="layout"> <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__main">内容栏宽度自适应</div> <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div> <footer>底部</footer>

1
2
3
4
5
6
7
<header>顶部</header>
<div class="layout">
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>
<footer>底部</footer>

<style type="text/css"> .layout { height: 300px; position: relative; } .layout__aside, .layout__main { position: absolute; top: 0; bottom: 0; } .layout__main { left: 210px; right: 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout {
        height: 300px;
        position: relative;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 11

这种布局方法的特点是:

1)主体内容栏是自适应的;

2)所有栏完全等高,效果跟flex布局和伪table布局的效果一样;

从这两点来看,这种绝对定位的方法还是比较好用的,不过它有一个非常大的使用限制,就是父元素的高度没有办法通过它的内部元素给撑起来,要用的话,必须想办法让父元素有高度,适合做父元素高度可知或者全屏布局。比如以下这个代码就是全屏布局的一个例子(对应源码中absolute_layout2.html):

header>顶部header> div class="layout"> aside class="layout__aside layout__aside--left">左侧边栏宽度固定aside> div class="layout__main">内容栏宽度自适应div> aside class="layout__aside layout__aside--right">右侧边栏宽度固定aside> div> footer>底部footer>

1
2
3
4
5
6
7
header>顶部header>
div class="layout">
    aside class="layout__aside layout__aside--left">左侧边栏宽度固定aside>
    div class="layout__main">内容栏宽度自适应div>
    aside class="layout__aside layout__aside--right">右侧边栏宽度固定aside>
div>
footer>底部footer>

<style type="text/css"> html,body { margin: 0; height: 100%; } footer { position: absolute; bottom: 0; width: 100%; } .layout { width: 100%; position: absolute; top: 50px; bottom: 50px; } .layout__aside, .layout__main { position: absolute; top: 0; bottom: 0; } .layout__main { left: 210px; right: 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
    html,body {
        margin: 0;
        height: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .layout {
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 12

做法二:侧边栏绝对定位,主体内容栏保持流式布局(对应源码中absolute_layout3.html)

<div class="layout"> <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout { position: relative; } .layout__aside { position: absolute; top: 0; bottom: 0; } .layout__main { margin: 0 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .layout {
        position: relative;
    }
    .layout__aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 13

这个方法的特点是:

1)主体内容栏是宽度自适应的;

2)所有栏也是完全等高的;

上面的代码中,layout__main通过magin来给侧边栏留出空间,其实也可以在layout元素上添加padding来处理,作用是一样的。这个方法相比前一个方法好一点的是,父元素的高度可以通过主体内容栏给撑起来,不过由此也带来了一个新问题,就是内容栏高度不够的时候,侧边栏就会出现溢出或者滚动,解决这个新问题的办法有2个:第一,如果侧边栏的内容都是已知的,并且没有折叠展开这种会改变侧边栏内容高度的功能,那么可以给layout设置一个min-height来处理;第二,如果侧边栏的内容是动态的,除了给layout加min-height之外,还得在每次改变侧边栏内容的时候,主动去调整主体内容栏的高度,如果主体内容栏的高度小于侧边栏的高度,就要更新主体内容栏的高度。不过如果你的内容栏的内容很多,侧边栏内容较少的话,就不用考虑这个新问题了。

绝对定位的做法就是这样,第一种限制较高;第二种稍微强一些,在一些场景下,可能还得借助JS来处理,所以综合起来不算是一个非常好的方式。只有你的布局需求恰好满足它的条件时,可能才会考虑使用它,就像上文中我提出的项目一的需求,就一定要用绝对定位的布局来做。

GCanvas 流程

图片 14

上图是 JavaScript 层渲染核心库的概要流程,关键的两个流程是初始化和渲染。

  • 初始化
    初始化,JavaSript 层获取配置判断运行环境,通过桥接层,插件层完成视图和 GCanvas 的创建。进一步完成对 OpenGL 环境的初始化。
  • 渲染
    渲染,JavaScript 层将所有的API调用托管,并且转换成自定义的命令格式(命令类型 + 参数的组合)。渲染触发则由 JavaScript 定时器触发或者手动触发的方式,将这些命令下发到渲染核心库执行。

以 Weex 为例, 绘制图形和图片的测试代码如下。

JavaScript

<template> <div ref="test"> <gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas> </div> </template> <script> var GCanvas=require('weex-gcanvas'); var Image=require('weex-gcanvas/gcanvasimage'); module.exports = { mounted: function () { //1、初始化 GCanvas var ref = this.$refs.canvas_holder; var gcanvas = GCanvas.start(ref); var ctx = gcanvas.getContext('2d'); //2、执行渲染操作 //rect ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100); //rect ctx.fillStyle = 'black'; ctx.fillRect(100, 100, 100, 100); ctx.fillRect(25, 210, 700, 5); //circle ctx.arc(450, 200, 100, 0, Math.PI * 2, true); ctx.fill(); //drawImage var image = new Image(); image.onload = function(){ ctx.drawImage(image, 100, 330); ctx.drawImage(image, 100+300, 330, 225, 75); } image.src = ''; } }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
<div ref="test">
<gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas>
</div>
</template>
<script>
var GCanvas=require('weex-gcanvas');
var Image=require('weex-gcanvas/gcanvasimage');
module.exports = {
mounted: function () {
  
  //1、初始化 GCanvas
var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref);
var ctx = gcanvas.getContext('2d');
//2、执行渲染操作
//rect
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
 
//rect
ctx.fillStyle = 'black';
ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5);
 
//circle
ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
ctx.fill();
 
//drawImage
var image = new Image();
image.onload = function(){
ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75);
}
image.src = 'https://www.khronos.org/assets/uploads/ceimg/made/assets/uploads/apis/OpenGL-ES_100px_May16_225_75.png';
}
};
</script>

通过 Weex Playground 运行结果如下

图片 15

具体分析下整个流程。结合插件层和核心渲染库来分析。

  • 插件层流程
    以 iOS 为例分析,Android 的过程是类似的。
    • GLKView 视图创建,并且与 GCanvas 对象建立绑定关系;
    • GCVCommon,资源加载与纹理绑定;
    • GCanvasPlugin,设置位置信息、设备比率、下发渲染命令;
  • 渲染库流程

图片 16

渲染命令的解析,最终通过调用 OpenGL ES 的方法或组合方法来实现 Context2D 和 WebGL 的效果,生成帧缓存,提交给 GPU 渲染,最后在绑定的 GLKView 视图上显示。

  • Context2D,需要实现诸如 GPath、GTexture、GTransform、GTriangulate 等来实现 Canvas 的渲染效果;
  • WebGL 相对简单,WebGL1.0 的 API 基本都能与从 OpenGL ES2.0 找到与之相对应的 API;

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:渲染引擎介绍,等高分栏布局小结

上一篇:又不知道怎么命名class了 下一篇:前端资源预加载并展示进度条,时要避免的几个
猜你喜欢
热门排行
精彩图文