CSS中的黄金分割率

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【CSS中的黄金分割率】，下面是详细的分享！

CSS中的黄金分割率

　　这是一位叫做 Christos Chiotis 的希腊 Web 设计师发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 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% 的比例分割。

　　

以上所分享的是关于CSS中的黄金分割率，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：黄金分割比例是多少

　　答：黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比，即把一根线段分为长短不等的a、b两段，使其中长线段的比（即a+b）等于短线段b对长线段a的比，列式即为a：（a+b）=b：a，其比值为0.6180339……这种比例在造型上比较悦目，因此，0.61... >>详细

　　相关问题：黄金分割比例有什么作用

　　答：（一）黄金分割律 这是公元前六世纪古希腊数学家毕达哥拉斯所发现，后来古希腊美学家柏拉图将此称为黄金分割。这其实是一个数字的比例关系，即把一条线分为两部分，此时长段与短段之比恰恰等于整条线与长段之比，其数值比为1.618 : 1或1 : 0.618... >>详细

　　相关问题：请解释什么是经济增长的黄金分割率

　　答：2006年诺贝尔经济学奖获得者、美国哥伦比亚大学教授埃德蒙·费尔普斯（EdmundS．Phelps）的主要贡献是修正了菲利普斯曲线，探索了宏观经济学的微观基础，并发展了新古典经济增长理论。他沿着罗伯特·索洛创立的新古典增长模型思路，从社会经济福利... >>详细