iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

網頁排版個人學習筆記系列 第 3

HTML&CSS|使用css變更html標籤特性

本文提要

CSS RESETdisplaydivspanmarginpaddingbox-sizing查詢語法與瀏覽器的兼容器工具


CSS Reset跨瀏覽器的樣式重置

各家瀏覽器都會有自己的預設css,為了想要打造我們理想中的網站,就需要移除它們的預設樣式。

|作法|
<head></head>插入下方則一的CSS Reset版本即可

  • Eric Meyer 版本
    • 所有樣式都強制歸零。
  • normalize.css 版本
    • 最大的特色就是保留常用的預設,例如標籤樣式等。
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css">
</head>

css屬性| dispaly

  • 區塊元素 display:block;

    • 區塊元素:會斷行,從上到下依序疊下
      https://ithelp.ithome.com.tw/upload/images/20190903/20119743bZIdLGU3M0.png
  • 行內元素 display:inline;

    • a連結為最常見的行內元素,預設display:inline
    • 在p標籤內寫一個a連結,它不會像區塊元素從上到下排下來或是占滿整個版型,它會和p標籤的文字段落排在一起。
      https://ithelp.ithome.com.tw/upload/images/20190903/20119743mL8CsFh5PA.png
    • a連結雖預設為行內元素(inline),但也可使用display:block;變成區塊元素。例如當按鈕使用時
      https://ithelp.ithome.com.tw/upload/images/20190903/20119743nUPYfSZ2Kg.png
  • 可閱讀此篇關於display的文章→ 關於display屬性文章

HTML標籤|div、span

divspan、無任何語意,用來做網頁排版用。另外該用h1、p的時候就用專屬的標籤,不要濫用div與span。

  • div: 區塊元素(block)
    區塊元素會斷行,從上到下排列
    div: 區塊元素(block)示意圖

  • span: 行內元素(inline)
    與div區塊的用法有點類似,但瀏覽器會將 span 標籤包起來的元素視為一行亦為行內元素(inline)
    span: 行內元素(inline)示意圖

  • divspan併用
    如下圖所示,div內的標題二,當中的二,如果想使用不同變化,可加入span。
    div與span併用示意圖

css屬性| margin、padding

  • margin
    推『外』邊界
    margin示意圖

  • padding
    在div『內』增加裡面的留白
    padding示意圖
    註: margin與padding的示意圖原出處為六角學院

Box Model 區塊模型

下方示範把margin、padding、border帶入後box的寬度會呈現的變化

  • 使用margin
    margin是推外邊界,所以不會影響box的大小

  • 使用padding與border
    加上padding與border皆會改變box的大小
    boxModel未加padding示意圖
    boxModel加padding和border示意圖

解決padding與border推擠造成box model大小改變

  • 使用box-sizing: border-box; 就不會增加元素本真的寬度。
  • 在使用較新語法時可以到Can I use查看與瀏覽器的兼容性
  • 使用box-sizing與未使用box-sizing 範例
    可搭配開發人員工具做查看

上一篇
常用HTML與CSS筆記- 表單類
下一篇
HTML&CSS|版型與文字置中用法
系列文
網頁排版個人學習筆記30

尚未有邦友留言

立即登入留言