CSS Reset
每個瀏覽器都會有預設樣式，也就是預設CSS，所以我們要按照自己的CSS做排版，就要先做CSS Reset
置入HTML中的語法如下:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!--↑normalizeCSS及Reset CSS，確保個瀏覽器呈現一致狀態-->
注意要放置在自己寫的CSS載入語法上方
CSS Reset語法
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
網頁置中CSS中的語法
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
容器元素
區塊元素→display:block
會盡可能地佔滿整個版面
會另起一行來進行呈現
如: h1、p、ul、li
行內元素→display:inline
比較常用在區塊元素段落裡面
沒辦法設定寬高
如: a、span
display 說明
block會填滿畫面，例如:
display: block
display: inline 只能動左右，例如:margin-left、margin-right
display: inline-block可以上下左右動，例如:margin-left、margin-right、margin-top、margin-bottom
div標籤→區塊元素容器
後代選擇器:
div class + HTML標籤
div class + div class
CSS padding及margin的概念
margin是用來調整裡面元素(Box1)及外面元素(Box2)的距離→向外推
padding是用來調整裡面的東西(例如:文字)，與外面框線的距離→向內推
Box Model盒模型
若使用padding的寬度、高度都會被算進Box中
若再用border也是一樣，都會影響到Box的寬、高
margin只影響兩個Box的距離