iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

轉生成感性腦初學網頁的文組大小姐系列 第 24

DAY24:HTML學習筆記-CSS-盒子模型

今日進度

HTML5‧CSS3 最強圖解實戰講座的Lesson8

學習筆記

今日新知

  • 盒子模型Box Model
    • 用在版型設計
    • #id名{
      width:960px;
      margin:40px 80px;
      padding:40px 80px;
      border:#f6bb9e 1px solid;
      backgroud-color:#fff;
      }
    • width是區塊寬度
    • 網頁總寬度:960+80+80+1+1=1122px
    • 計算width:總寬度-兩邊的padding-兩邊的border

心得

加入盒子模型網頁感覺變得超有質感/images/emoticon/emoticon42.gif

初學者學習日誌,文章內容若有打錯歡迎直接糾正我,謝謝大家><


上一篇
DAY23:HTML學習筆記-CSS-簡寫
下一篇
DAY25:HTML學習筆記-CSS-float
系列文
轉生成感性腦初學網頁的文組大小姐30

1 則留言

0
龍貓
iT邦新手 5 級 ‧ 2020-09-25 18:31:39

小心被margin反擊....
如果這個網頁所處的瀏覽器視窗寬度只有1122px,margin會在左邊佔據80px的寬度。
所以水平捲軸就會出現了。

緋尼藍 iT邦新手 5 級 ‧ 2020-09-25 22:45:43 檢舉

喔喔喔~~好的 謝謝

我要留言

立即登入留言