html基礎重點總結

文章目錄

1.代碼的書寫順序

板塊（框架）→有效區→具體內容→樣式
(一般有效區的寬度設置爲1200px即可）

2.關於居中

div居中：margin: 0 auto;

3.關於定位

※ position屬性

※ 定位屬性

3.1 普通流

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列(豎直排列），框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱爲行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

3.2 浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
一但元素加了float語句，則要跟着寫clear語句（因爲浮動之後父級的高度就會丟失掉，加上clear就可以把父級丟失掉的高度找回來）、

代碼:
<div class="clear"></div>
樣式：
.clear{
	clear: both;
}

注意：詳細原理可以看 w3school 浮動知識點

3.3 相對定位

（1）如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。相對定位是“相對於”元素在文檔中的初始位置
注意：在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
（2）子元素相對於父元素定位，父級或者再高的層級當作參照物。

參照物樣式一般用相對定位：position: relative;
子元素樣式一般用絕對定位：position: absolute;

3.4 絕對定位

絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素）。
提示：因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序（0：默認；-1：低優先級；1：高優先級）。

4.隱藏頁面元素常用方法

opacity: 0; ——從視覺上隱藏元素，而元素本身依然佔據它自己的位置並對網頁的佈局起作用，它也將響應用戶交互。
visibility: hidden;——元素將會隱藏，也會佔據着自己的位置，並對網頁的佈局起作用，與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏。如果一個元素的 visibility 被設置爲 hidden，但是想要顯示它的子元素，只要給想要顯示的子元素添加visibility：visible;就可以了
diaplay: none;——不生成盒模型，也不會在頁面佔據任何位置,不但如此,就連它的子元素也會一同從盒子模型中消失。並且給他和它的子元素添加的任何動畫效果交互效果都會不起作用

5.css選擇器

5.1 元素選擇器

eg:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

5.2 選擇器分組

eg: 希望 h2 元素和段落都有灰色

h2, p {color:gray;}

5.3 類選擇器 (.)

(1)

<html>
<head>
<style type="text/css">
.important {color:red;}  //以·開頭
</style>
</head>

<body>
<h1 class="important">This heading is very important.</h1>
</body>
</html>

(2）結合元素選擇器
eg: class 屬性值爲 important 的所有段落
p.important {color:red;}

(3)多類選擇器

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;} //多類（中間不空格）
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
//多個類，中間空格
<p class="important warning">This paragraph is a very important warning.</p>
</body>
</html>

5.4 ID 選擇器 (#)

eg: 以#開頭

<html>
<head>
<style type="text/css">
#intro {font-weight:bold;}
</style>
</head>

<body>
<p id="intro">This is a paragraph of introduction.</p>
</body>
</html>

注意：ID選擇器只能在文檔中使用一次，並且不能結合使用，區分大小寫。

5.5 屬性選擇器([ ])

（1）簡單屬性選擇

eg1:只對有 href 屬性的錨（a 元素）應用樣式

<html>
<head>
<style type="text/css">
a[href]
{
color:red;
}
</style>
</head>

<body>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

※ 還可以根據多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。

eg2: 將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置爲紅色

代碼： <a title="W3School Home" href="http://w3school.com.cn">W3School</a>
css:  a[href][title] {color:red;}

(2) 根據具體屬性值選擇
除了選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素。

eg1: 將指向 Web 服務器上某個指定文檔的超鏈接變成紅色

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

eg2:

(3) 根據部分屬性值選擇
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）

eg: 選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點

<html>
<head>
<style type="text/css">
p[class~="important"]
{
color: red;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
<hr />
<h1>無法應用樣式：</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>

注意：如果忽略了波浪號，則說明需要完成完全值匹配。

（4）子串匹配屬性選擇器

eg: 如果希望對指向 W3School 的所有鏈接應用樣式，不必爲所有這些鏈接指定 class，再根據這個類編寫樣式，而只需編寫以下規則：

a[href*="w3school.com.cn"] {color: red;}

提示：任何屬性都可以使用這些選擇器。

(5) 特定屬性選擇類型

最後介紹特定屬性選擇器。例如：

*[lang|="en"] {color: red;}

上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇後兩個元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

❣ 屬性選擇器彙總

5.5 後代選擇器(空格分隔)

eg: 希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫(即用空格分隔）：

h1 em {color:red;}

5.6 子元素選擇器（>）

（1）選擇子元素

如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

eg: 如果您希望選擇只作爲 h1 元素子元素的 strong 元素，可以這樣寫：

h1 > strong {color:red;}

這個規則會把第一個 h1 下面的兩個 strong 元素變爲紅色，但是第二個 h1 中的 strong 不受影響：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

(2) 結合後代選擇器和子選擇器
eg:

table.company td > p

上面的選擇器會選擇作爲 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承，該 table 元素有一個包含 company 的 class 屬性。

5.7 相鄰兄弟選擇器 (+)

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器

eg: 如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。

5.8 僞類——用於向某些選擇器添加特殊的效果

(1) 錨僞類

提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，纔有效; a:active 必須被置於 a:hover 之後，纔有效。並且僞類名稱對大小寫不敏感。

（2） :first-child 僞類——選擇元素的第一個子元素
詳細例子看此鏈接