頁面設計布局和盒模型(box model)

最近,如何正確地理解和還原 UI 設計稿是一個令人頭大的事兒,前端開發有很多困擾。我們梳理了一下 BUG 列表,發現目前的 CSS 控制做成了一個首鼠兩端的尷尬事兒,捉肘見襟,不應該是這個樣子的。

OK,讓我們還是從基礎開始,再逐步深入;有一個正確的姿勢,很重要!

盒模型
padding 和 margin 是透明的


width & height
渲染原理(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
關于 line-height
  • <number> 指定 font-size 的倍數,是推薦用法;


    Examples
2016 回顧
  • 03月,前端構建 gulp;
  • 06月,前端結構 v3;
  • 11月,后端引入 Lavarel;
    10月,后端 Yii2 引入 Advanced Project Template;
2017 展望
  • 01月,前端 CSS;@sarry
    CSS 的邏輯性遠比之前所想高得多,頁面呈現遠非易事!
  • ?月,前端框架;
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 不會用代碼框,所以看著有些亂套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個帥氣的名字閱讀 1,560評論 0 0
  • 遇到的一些問題及解決方法(歡迎大家補充和更正) 1、抓取不了Https的請求,證書安裝教程 請參考http://w...
    展寧閱讀 3,022評論 0 0
  • 姑娘,請不要輕易拒絕愛情 文/Josie喬 表姐出嫁那天,年過半百的舅媽眼含熱淚地說道:“終于嫁出去了。” 表姐今...
    Josie喬閱讀 16,700評論 113 380