HTML&CSS|使用css變更html標籤特性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 3

1

自我挑戰組

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

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

11th鐵人賽

2019-09-04 09:38:25

8932 瀏覽

分享至

本文提要

CSS RESET﹑display﹑div﹑span﹑margin﹑padding﹑box-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;
- 區塊元素:會斷行，從上到下依序疊下
行內元素 display:inline;
- a連結為最常見的行內元素，預設display:inline
- 在p標籤內寫一個a連結，它不會像區塊元素從上到下排下來或是占滿整個版型，它會和p標籤的文字段落排在一起。
- a連結雖預設為行內元素(inline)，但也可使用display:block;變成區塊元素。例如當按鈕使用時
可閱讀此篇關於display的文章→ 關於display屬性文章

HTML標籤|div、span

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

div: 區塊元素(block)
區塊元素會斷行，從上到下排列
span: 行內元素(inline)
與div區塊的用法有點類似，但瀏覽器會將 span 標籤包起來的元素視為一行亦為行內元素(inline)
div與span併用
如下圖所示，div內的標題二，當中的二，如果想使用不同變化，可加入span。

css屬性| margin、padding

margin
推『外』邊界
padding
在div『內』增加裡面的留白

註: margin與padding的示意圖原出處為六角學院

Box Model 區塊模型

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

使用margin
margin是推外邊界，所以不會影響box的大小
使用padding與border
加上padding與border皆會改變box的大小

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

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

常用HTML與CSS筆記- 表單類

HTML&CSS|版型與文字置中用法

系列文

網頁排版個人學習筆記共 30 篇

目錄

RSS系列文訂閱系列文

45 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙