• [织梦吧]仅有域名:www.tbea-hb.com,织梦DedeCMS学习渠道.

当时方位: > 网页制造 > DIV&CSS >

CSS 中的黄金切割率

来历: www.tbea-hb.com 修改:织梦吧 时刻:2018-09-19点击:

这是一位叫 的希腊 Web 规划师宣布在 的一篇文章,叙述了黄金切割率在 CSS 中的运用。黄金切割率是一个运用广泛的数学常数,大约为 1.6180339887。黄金切割率用在 Web 规划中,可认为规划带来更多视觉上的调和。

在一个简略的两栏式页面布局中,运用两个容器,第一个容器用来显现主要内容,第二个容器显现侧条。比方,页面宽度为 960 px,运用黄金切割率,主内容容器的宽度应该为 960 / 1.62 = 593 px,而侧条的宽度为 960-593=367 px。

作者主张,在 Web 排版与布局中能够运用以下根本 CSS 设置

  • line-height = font-size * 1.62
  • paragraph margin = paragraph line-height * 1.62 / 2
  • header’s margin-top = headers line-height * 1.62

不过对中文而言,至少 font-size 和 line-height 之间运用黄金切割率是不适合的,假设中文字体运用 12px 的话,最佳行高是 22px,假如字体运用 14px 的话,行高应该运用 24px - 译者。

另一个比如,在表单中,输入框的宽度应该是标签文字的宽度乘以 1.62。而关于显现在 Web 上矩形来说,它的宽度应该是高度乘以 1.62。

这样一来,Web 规划师一同需求很好的核算才能,至少要在旁边放一台核算器,为了节省时刻,作者主张在规划中随时记住一个 62/38 准则,在任何需求切割的当地,都运用 62% 和 38% 作份额。
关于需求切割成三份的场合,能够先按 62%,38%准则分红两份,再将那份大的按 62% 和 38% 的份额切割。

 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流渠道
  • 仅有网址 www.tbea-hb.com 网站地图
  • 联络咱们 1978130638@qq.com ,