最近,如何正確地理解和還原 UI 設計稿是一個令人頭大的事兒,前端開發有很多困擾。我們梳理了一下 BUG 列表,發現目前的 CSS 控制做成了一個首鼠兩端的尷尬事兒,捉肘見襟,不應該是這個樣子的。
OK,讓我們還是從基礎開始,再逐步深入;有一個正確的姿勢,很重要!
盒模型
padding 和 margin 是透明的
,
width & height
- padding 負責清理內容周邊;
- margin 負責清理邊框外圍;用于將本元素和其相鄰元素分隔開;
注意 margin collapsing(margin 折疊)問題; - 一個元素的 width 和 height 屬性,只是 Content 的寬高;整個元素的尺寸,還要加上 Padding、Border 和 Margin;
total box width = content area width + left padding + right padding + left border + right border + left margin + right margin
; - 當 內容區 有 background,color,image 時,會擴展到 padding,所以 padding 可以說是 content 的擴展;
- css tutorial in w3schools;
- MDN: Introduction to the CSS box model;
- Box model - W3C;
- The CSS layout model - W3C;
- Opening the Box Model;
渲染原理(rendering principles)
- The Cascade
- Inheritance
- Specificity
relative specificity of a given rule:
Inline style attributes,
ID selectors,
Class selectors,
Element selectors,
CSS Syntax
CSS Syntax
- Troubleshooting css rendering problems cascading style sheets inheritance specificity;
- CSS How To: Three Ways to Insert CSS & Cascading Order;
關于 line-height
-
<number> 指定 font-size 的倍數,是推薦用法;
Examples
2016 回顧
- 03月,前端構建 gulp;
- 06月,前端結構 v3;
- 11月,后端引入 Lavarel;
10月,后端 Yii2 引入 Advanced Project Template;
2017 展望
- 01月,前端 CSS;@sarry;
CSS 的邏輯性遠比之前所想高得多,頁面呈現遠非易事! - ?月,前端框架;