<p style="color:red">这里文字是红色。</p>
<style type="text/css">span{color:red;}</style>
html學習中的幾個重點總結
關於html的重點總結
區塊元素、行內元素、行內區塊狀元素
HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種
使用display屬性能夠將三者任意轉換
塊狀元素自動換行
轉換方法
(1)display:inline;轉換為行內元素
(2)display:block;轉換為區塊狀元素
(3)display:inline-block;轉換為行內塊狀元素比較
1.行內元素
行內元素最常使用的就是span，其他的只在特定功能下使用，修飾字體<b>和<i>標籤，還有<sub>和<sup>這兩個標籤可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。
行內元素特徵：(1)設定寬高無效
(2)對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐會大空間
(3)不會自動進行換行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内元素</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<sspan>不会自动换行</span>
<span>行内元素</span>
</body>
</html>2.塊狀元素
# 塊狀元素代表性的就是p，其他如p、nav、aside、
# 塊狀元素代表性的就是p，其他如p、nav、aside、##header、 footer、section、article、ul-li、address等等，都可以用p來實現。不過為了可以方便程式設計師解讀程式碼，一般都會使用特定的語意化標籤，使得程式碼可讀性強，且方便查錯。 塊狀元素特徵：(1)能夠辨識寬高 (2)margin和padding的上下左右均對其有效##
## (4)多個塊狀元素標籤寫在一起，預設排列方式為從上至下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块状元素</title>
<style type="text/css">
p {
width: 120px;
height: 120px;
margin: 50px 50px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>自动换行</i>
<p>块状元素</p>
<p>块状元素</p>
</body>
</html># #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内块状元素</title>
<style type="text/css">
p {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
}
</style>
</head>
<body>
<p>行内块状元素</p>
<p>行内块状元素</p>
</body>
</html>- 相對路徑：指由這個檔案所在的路徑引起的跟其它檔案（或資料夾）的路徑關係
- 每一個.向外跳一層
- 樣式的三種寫法
<p style="color:red">这里文字是红色。</p>
登入後複製
2.內嵌樣式:嵌入式css樣式，就是可以把css樣式程式碼寫在標籤之間<p style="color:red">这里文字是红色。</p>
<style type="text/css">span{color:red;}</style>登入後複製
3.外部樣式表:外部式css樣式(也可稱為外聯式)就是把css程式碼寫一個單獨的外部檔案中，這個css樣式檔以「.css」為副檔名<style type="text/css">span{color:red;}</style><link href="style.css" rel="stylesheet" type="text/css" />
登入後複製注意：
css樣式檔名必須符合命名規則，如main.css<link href="style.css" rel="stylesheet" type="text/css" />
- #rel=”stylesheet” type=”text/css” 是固定寫入法不可修改
- css檔案也可以在
- 中用import引入，但是這種方法不可以用js運算
#絕對定位、相對定位和固定定位
2.可以使用position屬性把一個元素放置到網頁中的任何位置。
可選值：
– static：預設值，元素沒有開啟定位
– relative：開啟相對定位
– absolute：開啟絕對定位
– fixed：開啟固定定位
3.相對定位
—-相對定位不會改變元素原來的特性。塊元素還是塊元素，內聯還是內聯
—-相對定位會使元素的層級提升，使元素可以覆蓋文字流中的元素。
4.絕對定位
①絕對定位指使元素相對於html元素或離他最近的祖先定位元素進行定位。
②當將position屬性設為absolute時，則開啟了元素的絕對定位。
③當開啟了絕對定位以後，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④絕對定位的特點：
—-絕對定位會使元素完全脫離文字流。
—-絕對定位的塊元素的寬度會被其內容撐開。
—-絕對定位會使行內元素變成區塊元素。
—-絕對定位是相對於離它最近的開啟了定位的祖先元素。如果所有的祖先都沒有開啟定位，則會相對於瀏覽器視窗進行定位。
—-一般使用絕對定位時會同時為其父元素指定一個相對定位，以確保元素可以相對於父元素進行定位。
—-絕對定位會使元素的層級提升。
5.固定定位
①固定定位的元素會被鎖定在螢幕的某個位置上，當訪客捲動網頁時，固定元素會在螢幕上保持不動
②當將position屬性設為fixed時，則開啟了元素的固定定位。
③當開啟了固定定位以後，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④固定定位也是絕對定位，固定定位的其他特性和絕對定位類似。
不同：
(1)固定定位永遠相對與瀏覽器定位。
(2)會固定在瀏覽器視窗某個位置，不會隨捲軸滾動。
(3)IE6不支援固定定位。
以上是html學習中的幾個重點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
