CSS中的黃金分割率

2021-08-14 12:10:10 字數 839 閱讀 5856

這是一位叫 christos chiotis 的希臘 web 設計師發表在 cssglobe 的一篇文章,講述了**分割率在 css 中的應用。**分割率是乙個應用廣泛的數學常數,大約為 1.6180339887。**分割率用在 web 設計中,可以為設計帶來更多視覺上的和諧。

在乙個簡單的兩欄式頁面布局中,使用兩個容器,第乙個容器用來顯示主要內容,第二個容器顯示側條。比如,頁面寬度為 960px,使用**分割率,主內容容器的寬度應該為 960 / 1.62 = 593px,而側條的寬度為 960-593=367px。

作者建議,在 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中的黃金分割率

這是一位叫做 christos chiotis 的希臘 web 設計師發表在 cssglobe 的一篇文章,講述了 分割率在 css 中的應用。分割率是乙個應用廣泛的數學常數,大約為 1.6180339887。分割率用在 web 設計中,可以為設計帶來更多視覺上的和諧。在乙個簡單的兩欄式頁面布局中,...

黃金分割查詢

在二分查詢中,我們是取mid等於left和right的中間值,即用等分的方法進行查詢。那為什麼一定要等分吶?能不能進行 分割 也就是mid left 0.618 right left 當然mid要取整數。如果這樣查詢,時間複雜性是多少?也許你還可以程式設計做個試驗,比較一下二分法和 分割 法的執行效...

數學 黃金分割比

今天讀了一本科普讀物,數學美,其中將到了 分割比,普遍的人都認為用 分割比建築的東西是最美得,為什麼全世界的人,都很喜歡這種比例關係呢,我認為在人類的dna中存在乙個基因,這個基因就是,用來存放 分割比的資訊,那這個基因又是怎麼來的呢,我認為在人類還沒進化 的時候,更高階的智慧型生物來到過地球,他們...