通過css來轉換塊級元素和内聯元素
區分這2種元素最好的方式就是看，該元素是否是獨占一行，獨占一樣的就是塊級元素，否則就是内聯元素。
<div>我是塊級元素</div>
<div>我是塊級元素</div>
<span>我是内聯元素</span><span>我是内聯元素</span>
将上面的代碼存為html檔案，就會看到`span`元素在一行，`div`元素就是獨占一行的。
<div>我是塊級元素</div>
<div>我是塊級元素</div>
<span>我是内聯元素</span><span>我是内聯元素</span>
<style>
div { display: inline; }
span { display: block; }
</style> 将上面的代碼存為html檔案，就會看到
div
元素在一行，
span
元素就是獨占一行的。
這個就是css的基本用法。
html檔案引入css的3種方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網頁标題</title>
<meta name="keywords" content="文檔關鍵詞">
<meta name="description" content="文檔描述">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="main.css" media="all"> <!-- 方式1：引入外部css檔案 -->
<!-- 方式2：css塊 -->
<style>
h1 { font-size: 16px; color: red; }
</style>
</head>
<body>
<div class="text">命中外部css的樣式</div>
<h1>totonoo</h1>
<!-- 方式3：直接寫在元素上 -->
<div style="color: green;">心中的大草原</div>
</body>
</html> 建main.css檔案
.text {
color: #ffcc00;
} css優先級
第一原則：預設<外部引入<内聯樣式<行内
第二原則：内聯樣式 > ID 選擇器 > （類選擇器 = 屬性選擇器 = 僞類選擇器） > （标簽選擇器 = 僞元素選擇器）
僞類元素：
!important 最高
首先僞類是用單冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
然後僞元素用雙冒号表示：如::first-letter, ::first-line, ::before, ::after
1.用于連結的幾個僞類元素
:link用這個可以設定未被通路的連結的樣式
:visited用這個設定已經被通路的連結的樣式
:hover 用于設定将滑鼠懸浮在連結上的樣式
:active用于設定滑鼠點選連結時到滑鼠松開時的樣式
:focus 用于設定用鍵盤将焦點放在連結上時的樣式（如用tab鍵或者上下鍵來移動頁面焦點時）
position:absolute 絕對定位
position:relative 相對定位
position:fixed 固定定位
子絕父相
使用CSS重置（reset）
css重置庫如normalize.css已經被使用很多年了，它們可以為你的網站樣式提供一個比較清晰的标準，來確定跨浏覽器之間的一緻性。
大多數項目并不需要這些庫包含的所有規則，可以通過一條簡單的規則來應用于布局中的所有元素，删除所有的margin、padding改變浏覽器預設的盒模型。
*{ box-sizing:border-box; margin:0; padding:0 } ![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)