HTML(HyperText Markup Language)就是超文本標記語言。”超文本”就是表示頁面內可以包含非文字元素,如:圖片、鏈接、音樂等等。
它是一種建立網頁文件的語言,通過標記式的指令(Tag),將影像、聲音、圖片、文字等鏈接顯示出來。這種標記性語言是互聯網上網頁的主要語言。
HTML 網頁文件可以使用記事本、寫字板、HBuilder、Sublime 等編輯工具來編寫,以 .htm 或 .html 為文件後綴名保存。將 HTML 網頁文件用瀏覽器打開顯示,若測試沒有問題則可以放到服務器(Server)上,對外發佈信息。
基礎語法
標籤
HTML 標記是由”<“和”>”所括住的指令標記,用於向瀏覽器發送標記指令。
主要分為:單標記指令、雙標記指令(由”<起始標記>”+內容+”</結束標記>”構成)。
HTML語言使用標誌對的方法編寫文件,既簡單又方便。它通常使用”<標誌名>內容</標誌名>”來表示標誌的開始和結束,因此在HTML文檔中這樣的標誌對都必須是成對使用的。
為了便於理解,將HTML標記語言大致分為:基本標記、格式標記、文本標記、圖像標記、表格標記、鏈接標記、表單標記和幀標記等。
單標籤
單標籤,不設置屬性值。
如:
、
單標籤屬性
單標籤(也叫空元素),設置屬性值。如:
雙標籤
雙標籤,不設置屬性值。如:
…
雙標籤屬性
雙標籤,設置屬性值。如:
……
整體結構
HTML的內容都是由一對一對的標籤組成,標籤不能混亂,頁面有頁面的整體架構和規則,標籤和標籤之間有需要正確嵌套。
通常一個HTML網頁文件包含3個部分:標記頭區<HEAD>……</HEAD>、內容區<BODY>……</BODY>和網頁區<HTML>……</HTML>。
HTML文檔的基本結構
html
<html>標誌用於HTML文檔的最前邊,用來標識HTML文檔的開始。而</html>標誌放在HTML文檔的最後邊,用來標識HTML文檔的結束,兩個標誌必須一塊使用。
head
<head>和</head>構成HTML文檔的開頭部分。<head>和</head>標誌對之間的內容是不會在瀏覽器的框內顯示出來的,兩個標誌必須一塊使用。
在此標誌對之間可以使用<title></title>、<script></script>、<meta>、<link>等標籤。
<meta>:用來提供關於文檔的信息,起始屬性為:charset=”utf8″。表示告訴瀏覽器頁面採用的什麼編碼,一般來說我們就用 utf8。當然,文件保存的時候也是utf8,而瀏覽器也設置 utf8 即可正確顯示中文。
<link>:用來引入css文件
<script>:用來引入js文件或編寫js代碼。
title
<title>定義文檔的標題。瀏覽器會以特殊的方式來使用標題,並且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。同樣,當把文檔加入用戶的鏈接列表或者收藏夾或書籤列表時,標題將成為該文檔鏈接的默認名稱。
注意:<title>標籤位於<head>標籤內,是<head>標籤中唯一要求包含的東西。
body
一般情況下大部分瀏覽器上顯示的內容,都放在body中。但也不排除其他標籤可以不用body,比如frameset框架集標籤。
和是HTML文檔的主體部分,在此標誌對之間可包含
、、<p>…</p>、<h1>…</h1>、
等眾多的標誌。它們所定義的文本、圖像等將會在瀏覽器的框內顯示出來。
常用屬性
屬性
值
描述
bgcolor
xxxxxx:十六進制的數字,00-ff
colorname:Red、Green…
rgb(x,x,x):red、green、blue,x:0-255
規定文檔的背景顏色,以後可以用樣式取代它
text
rgb(x,x,x) #xxxxxx colorname
規定文檔中所有文本的顏色,以後可以用樣式取代它
DOCTYPE
Document Type HyperText Mark-up Language,文檔中超文本標記語言的類型,可告知瀏覽器怎麼解析該文檔。
由於使用的場景或者版本的更替間,HTML使用的標準不同,所以需要瀏覽器按照不同的標準來解析HTML文本內容,這就需要告知瀏覽器我當前的HTML頁面是按照那種方式進行編寫的。沒有該聲明,將是你HTML噩夢的開始。
常用標籤
HTML頁面是由標籤組成,不同的標籤瀏覽器對其進行不同樣式和內容的渲染 ,我們需要記憶常用的標籤即可。大致可分為如下幾類:標題、水平線、段落、換行、圖片、表格、超鏈接、列表、表單、下拉列表、div 和 span等。
標題和水平線
標題
<h1> – <h6> 標籤可定義標題,標題依次遞減,由於 h
元素擁有確切的語義,因此請慎重地選擇恰當的標籤層級來構建文檔的結構。請不要利用標題標籤來改變同一行中的字體大小。相反,我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
<h999>這樣的標籤不產生錯誤,但是不具有標題的效果。
h1標籤可以為搜索引擎獲取,便於頁面在被搜索的時候檢索到,但是一個頁面最好只有一個h1標籤,否則可能進入搜索引擎的黑名單。
水平線
標籤在 HTML 頁面中創建一條水平線(horizontal rule)可以在視覺上將文檔分隔成各個部分。在 HTML 中,
標籤沒有結束標籤。
常用屬性
屬性
值
描述
align
CenterLeftright
規定 hr 元素的對齊方式,以後可以用樣式取代它
size
pixels
規定 hr 元素的高度(厚度),後可以用樣式取代它
width
Pixels%
規定 hr 元素的寬度,後可以用樣式取代它
段落和換行
段落
<p>標籤定義段落。p 元素會自動在其前後創建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規定。
理解:語文課本中各個段落之間會有大的空隙。
常用屬性
屬性
值
描述
align
left、right、center、justify
規定段落中文本的對齊方式,以後可以用樣式取代它
換行
br標籤為換行符號,
標籤是空標籤(意味着它沒有結束標籤,因此這是錯誤的:
)。
注意:
標籤只是簡單地開始新的一行,而當瀏覽器遇到
標籤時,通常會在相鄰的段落之間插入一些垂直的間距。請使用
來輸入空行,而不是分割段落。
列表
無序列表
由
和標籤組成。 …… 好好學習 天天向上 常用屬性 屬性 值 描述 type disc circle square 規定列表的項目符號類型。可以使用樣式取代。 dise:實心圓(默認) circle:空心圓 square:方塊 有序列表 由<ol></ol>和<li></li>標籤組成。 …… 好好學習 天天向上 常用屬性 屬性 值 描述 type 1 a A i I 規定在列表中使用的標記類型。 1:用數字形式表示序號(默認) a:用小寫字母表示序號 A:用大寫字母表示序號 i:用小寫羅馬數字表示序號 I(大寫i):用大寫羅馬數字表示序號 div和span div <div>是一個塊級元素,通常與css配合使用,用於布局。 <div> 標籤可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。 <div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上,換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。 content 常用屬性 屬性 值 描述 align left、right、center 規定div元素中的內容的對齊方式,以後可以用樣式取代它 span <span>標籤被用來組合文檔中的行內元素 ,span 沒有固定的格式表現。當對它應用樣式時,它才會產生視覺上的變化 。 content 格式化標籤 font 規定文本的字體、字體尺寸、字體顏色 pre 定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體 文本標籤 ****(粗文本)、****(斜體文本)、****(下劃線文本)、 < del >(中劃線文本)、(下標文本)、(上標文本) a標籤 標籤定義超鏈接,用於從一張頁面鏈接到另一張頁面。 元素最重要的屬性是 href 屬性,它指示要鏈接的目標位置,同時沒有href屬性a標籤內的內容與普通文本沒有區別,也就失去了超鏈接的功能。 若是想要跳轉到當前頁面,那麼href的值為#。被鏈接頁面通常顯示在當前瀏覽器窗口中,除非您規定了另一個目標(target 屬性)。 百度 常用屬性 屬性 值 描述 href URL 連接所要跳轉的位置,可能是其他或當前頁面。 target blank _parent _self top Framename作為錨點的a標籤的name值 規定在何處打開鏈接文檔。 _blank:開啟新頁面顯示頁面; _self:當前頁面顯示跳轉到頁面,默認值。 _top:用於有frameset布局的頁面,想要覆蓋整個頁面顯示。 Framename:這裡framename與上邊的值不同,具體以為frame起了什麼樣的名字為準,該值指示要連接的頁面跳轉後將在相應名稱的框架中顯示。 錨點的實現 利用a標籤的name屬性: 一般標籤的id屬性:div id=””、a id=”” 等: 、 錨點定位 返回首部 圖片 img 元素向網頁中嵌入一幅圖像。 注意:從技術上講,<img> 標籤並不會在網頁中插入圖像,而是從網頁上鏈接圖像。<img> 標籤創建的是被引用圖像的佔位空間。 必須屬性 屬性 值 描述 alt text 規定圖像的替代文本,一般在圖片無法正常顯示佔位的文字。 src URL 規定顯示圖像的 URL。 常用屬性 屬性 值 描述 align top、bottom、middle、left、right 規定如何根據周圍的文本來排列圖像 border pixels 定義圖像周圍的邊框 height pixels、% 定義圖像的高度。 width pixels、% 定義圖像的寬度。 title 文本 當鼠標在圖片上時顯示的文字 表格 <table></table> 標籤定義 HTML表格。 <tr></tr>標籤定義表格的行。tr元素包含一個或多個th或td元素 <td></td>標籤定義 HTML 表格中的標準單元格。 <th></th>定義表格內的表頭單元格。th元素內部的文本通常會呈現為居中的粗體文本,而 td 元素內的文本通常是左對齊的普通文本。 簡單的HTML表格由table元素以及一個或多個tr、th、或td元素組成。 理解:table相當於一個表格的外框,tr為行,td為一個一個單元格,th為有標題作用的單元格,th中的內容同時有加粗的效果。 常用屬性 屬性值描述 align right、center、left 表格對齊方式 border px 規定表格邊框的寬度 width % 、px 規定表格的寬度 tr常用屬性 屬性 值 描述 align right、left、center 定義表格行的內容對齊方式。 bgcolor rgb(x,x,x)、#xxxxxx、colorname 規定表格行的背景顏色,以後可以用樣式取代它 valign top、middle、bottom 規定表格行中內容的垂直對齊方式,以後可以用樣式取代它 <td>的colspan和rowspan分別規定單元格橫跨的列數和行數 表單 form <form> 標籤用於為用戶輸入創建 HTML 表單。 表單能夠包含 input 元素,比如文本字段、複選框、單選框、提交按鈕等等。還可以包含 textarea等元素。 表單用於向服務器傳輸數據。form 元素是塊級元素,其前後會產生折行。 常用屬性 屬性 值 描述 action URL 規定當提交表單時向何處發送表單數據 method get、post 規定用於發送 form-data 的 HTTP 方法 name Form_name 規定表單的名稱 target blank _selfparent _top framename 規定在何處打開 action URL method:表單提交方式:get、post get:默認,主動的獲取方式,數據放在url上,數據的容量有限,安全性差,有緩存 post:數據放在請求實體中,數據量理論上沒有限制,相對安全,沒有緩存 input <input> 標籤用於搜集用戶信息。 根據不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、單選按鈕、按鈕等等。 常用屬性 屬性 值 描述 alt text 定義圖像輸入的替代文本。 checked checked 規定此 input 元素首次加載時應當被選中。 disabled disabled 當 input 元素加載時禁用此元素。 readonly readonly 規定輸入字段為只讀。 maxlength number 規定輸入字段中的字符的最大長度。 value value 規定 input 元素的值。 type button checkbox file hidden image password radio reset submit text 規定 input 元素的類型。按鈕複選框文件隱藏域圖像形按鈕密碼單選框重置按鈕提交按鈕文本 若上傳文件,請求方式為post,且表單添加一個屬性:enctype=”multipart/form-data” 注意: 1. 沒有name屬性的屬性是無法提交到後台的!!!! 2. Radio單選按鈕以name相同為一組。 3. Checkbox複選按鈕以name相同為一組。 textarea 該標籤定義多行的文本輸入控件。文本區中可容納無限數量的文本,可以通過 cols 和 rows 屬性來規定 textarea 的尺寸。cols規定文本區內的可見寬度。rows規定文本區內的可見行數。 content label <label> 標籤為input 元素定義標註(標記)。 label元素不會呈現任何的特殊效果。 label標籤的for屬性應當與相關元素的id屬性相同,此時點擊label標籤會自動為元素聚焦 用戶名: button 按鈕 常用屬性 屬性 值 描述 disabled disabled 禁用該按鈕。 type button、submit、reset 規定按鈕的類型。 value text 規定按鈕的初始值。 name button_name 規定按鈕的名稱。 select <select>用於定義下拉列表 紅色綠色藍色 select常用屬性 屬性 值 描述 disabled disabled 禁用該下拉框。 multiple multiple 規定可選擇多個選項。 name name 規定下拉列表的名稱。 size number 規定下拉列表中可見選項的數目。 option常用屬性 屬性 值 描述 disabled disabled 禁用該下拉框。 selected selected 規定選項(在首次顯示在列表中時)表現為選中狀態。 value text 定義送往服務器的選項值。 常用字符實體 在 HTML 中,某些字符是預留的。 在 HTML 中不能使用小於號(<)和大於號(>),這是因為瀏覽器會誤認為它們是標籤。 如果希望正確地顯示預留字符,我們必須在 HTML 源代碼中使用字符實體(character entities)。 實體名稱對大小寫敏感! 標籤的分類 HTML中標籤元素三種不同類型:塊狀元素,行內元素,行內塊狀元素。 塊級元素 元素都從新的一行開始,並且其後的元素也另起一行;元素的高度、寬度、行高以及頂和底邊距都可設置;元素寬度在不設置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。 行內元素 和其他元素都在一行上;元素的高度、寬度及頂部和底部邊距不可設置;元素的寬度就是它包含的文字或圖片的寬度,不可改變。 行內塊狀元素 和其他元素都在一行上;元素的高度、寬度、行高以及頂和底邊距都可設置。 CSS CSS(英文全稱:Cascading Style Sheets)層疊樣式表, 是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。 CSS目前最新版本為CSS3,是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言,CSS能夠對網頁中的對象的位置排版進行像素級的精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力,並能夠進行初步交互設計,是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力,簡化或者優化寫法,針對各類人群,有較強的易讀性。 CSS是用來美化網頁用的,沒有網頁則CSS毫無用處,所以CSS需要依賴HTML展示其功能 。 CSS的基本使用 CSS基本語法 CSS 樣式由選擇器和一條或多條以分號隔開的樣式聲明組成。每條聲明的樣式包含着一個 CSS屬性和屬性值。 選擇器名 { 屬性 : 屬性值; …… } div{background-color : red;} 注意: css聲明要以分號;結束,聲明以{}括起來 建議一行書寫一個屬性 若值為若干單詞,則要給值加引號,如 font-family: “agency fb”; 注釋 多行注釋: /* 這裡的內容就是注釋 */ CSS的使用 1. 行內式 行內樣式將樣式定義在具體html元素的style屬性中。以行內式寫的CSS耦合度高,只適用於當前元素,在設定某個元素的樣式時比較常用。 這是一段文本 在當前元素使用 style 屬性的聲明方式。 style 是行內樣式屬性; color 是顏色屬性;red 是顏色屬性值; font-size是字體大小屬性;50px 是字體大小屬性值 2. 嵌入式 嵌入式通過在html頁面內容開闢一段屬於css的代碼區域,通常做法為在< head>標籤中嵌套<style>標籤,在<style>中通過選擇器的方式調用指定的元素並設置相關 CSS。 p{color: blue;font-size:40px;} 3. 引入外聯樣式文件 在實際開發當中,很多時候都使用引入外聯樣式文件,這種形式可以使html頁面更加清晰,而且可以達到更好的重用效果。 style.css p{color: green;font-size:30px;} test.html rel:rel 屬性規定當前文檔與被鏈接文檔之間的關係。 stylesheet:文檔的外部樣式表。 很多時候,大量的 HTML 頁面使用了同一個CSS。那麼就可以將這些 CSS 樣式保存在一個單獨的.css 文件中,然後通過<link>元素去引入它。 注意:當有多重樣式時,記住前提規則,越精確越優先。 CSS選擇器 在 CSS 中,選擇器是一種模式,用於選擇需要添加樣式的元素。 CSS選擇器有很多,掌握常用的即可; 基本選擇器 通用選擇器 選擇所有 <font color=”red”>*</font> * { …… } * {color: orange;} 元素選擇器 選擇指定標籤 元素名稱 { …… } p{color: red;font-size:20px;} ID選擇器 選擇設置過指定id屬性值的元素 <font color=”red”>#</font> #id屬性值 { ……} #p1{font-weight: bold;} 類選擇器 選擇設置過指定class屬性值的元素 <font color=”red”>.</font> .class屬性值 { ……} .hidden{display: none;} 分組選擇器 當幾個元素樣式屬性一樣時,可以共同調用一個聲明,元素之間用逗號分隔 選擇器1,選擇器2,… { …… } h2,#pre1{color: orange;font-style: italic;} CSS樣式的優先級,是根據選擇器的精確度/權重來決定的,常見的權重如下,權重越大,優先級越高 元素選擇器:1 類選擇器:10 id選擇器:100 內聯樣式:1000 組合選擇器 CSS組合選擇器說明了兩個選擇器直接的關係。 CSS組合選擇符包括各種簡單選擇符的組合方式。 在 CSS 中包含了四種組合方式: 後代選取器(以空格分隔),子元素選擇器(以大於號分隔),相鄰兄弟選擇器(以加號分隔),普通兄弟選擇器(以波浪線分隔)。 後代選擇器(派生選擇器) 用於選擇指定標籤元素下的後輩元素,以空格分隔 選擇器1 選擇器2 { …… } .foodli{border:1pxsolid red;} 食物水果 香蕉 蘋果 梨蔬菜 白菜 油菜 捲心菜
子元素選擇器
用於選擇指定標籤元素的所有第一代子元素,以大於號分隔
選擇器1 + 選擇器2 {
……
}
#d+div{border:1pxsolid red;}
html代碼同上
相鄰兄弟選擇器
可選擇緊接在另一元素後的元素,且二者有相同父元素。以加號分隔
選擇器1 + 選擇器2 {
……
}
#d+div{border:1pxsolid red;}
相鄰兄弟選擇器1
- 開心麻花
- 賈玲
- 宋小寶
相鄰兄弟選擇器2
普通兄弟選擇器
選擇緊接在另一個元素後的所有元素,而且二者有相同的父元素,以波浪線分隔
選擇器1 ~ 選擇器2 {
……
}
li~li{background-color : yellow;}
普通兄弟選擇器1
- 開心麻花
- 賈玲
- 宋小寶
- 沈騰
- 王寧
CSS常用屬性設置
背景
CSS 背景屬性用於定義HTML元素的背景效果
background-color
設置元素的背景顏色
body{background-color:#ff0000;}
background-image
設置元素的背景圖像,默認情況下,背景圖像進行平鋪重複顯示,以覆蓋整個元素實體。
body{background-image:url(‘paper.gif’);}
background-repeat
設置是否及如何重複背景圖像
body{background-image:url(img/logo.jpg);background-repeat: no-repeat;}
文本
color
body{color:blue;}h1{color:#00ff00;}h2{color:rgb(255,0,0);}
text-align
設置文本對齊方式,center(居中),left(左對齊),right(右對齊)
body{text-align:center;}h1{text-align:right;}h2{text-align:right;}
text-decoration
規定添加到文本的修飾,屬性值:none、underline、overline、line-through
1)underline
對文本添加下劃線,與HTML的u元素相同。
2)overline
對文本添加上劃線。
3)line-through
對文本添加中劃線,與HTML中的s和 strike 元素相同。
4)none
關閉原本應用到元素上的所有裝飾。
h3{text-decoration:underline;}
text-indent
設置文本首行縮進
p.ident2{text-indent:2em;}
em一個相對值,例如頁面的文本大小為17px,則2em就為17px*2
字體
font-family
文本字體,該屬性設置文本的字體。
font-family屬性應該設置幾個字體名稱作為一種”後備”機制,如果瀏覽器不支持第一種字體,他將嘗試下一種字體,所以盡量將不常見的字體靠前,將最常見的字體放置在最後,作為替補。
注意:
1)只有當字體名中含有空格或#、$之類的符號時(如 New York),才需要在font-family聲明中加引號:
body{font-family:”arial black”;}
2)多個字體系列是用一個逗號分隔指明
/* 靠前的字體先生效 */p{font-family: 微軟雅黑,黑體,”agency fb”;}
font-size
文本大小
body{font-size:50px;/*字體大小50px*/}#span1{font-size:25px;/*字體大小25px*/}
font-style
字體風格,該屬性最常用於規定斜體文本。 屬性值:normal、italic、oblique
1)normal:文本正常顯示;
2)italic:文本斜體顯示;
3)oblique:文本傾斜顯示,oblique是將文字強制傾斜。
說明:一般情況下,字體有粗體、斜體、下劃線、刪除線等諸多屬性,但是不是所有字體都具有這些屬性,一些不常用字體可能只有正常體,若使用italic屬性則沒有效果,所以需要oblique屬性強制傾斜。
font-weight
字體加粗,該屬性設置文本的粗細。
bold:可以將文本設置為粗體。
100 ~ 900:為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別,那麼這些數字就直接映射到預定義的級別。
100 對應最細的字體變形;
900 對應最粗的字體變形;
400 等價於 normal;
700 等價於 bold。
對齊方式
text-align
規定元素中的文本的水平對齊方式。屬性值如下:
注意:
值 justify 可以使文本的兩端都對齊。在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上。然後,調整單詞和字母間的間隔,使各行的長度恰好相等。對最後一行不生效。
display屬性
display 屬性規定元素應該生成的框的類型。這個屬性用於定義建立布局時元素生成的顯示框類型。
浮動
float的屬性值有none、left、right。
1.只有橫向浮動,並沒有縱向浮動。2.會將元素的display屬性變更為block。3.浮動元素的後一個元素會圍繞着浮動元素(典型運用是文字圍繞圖片)4.浮動元素的前一個元素不會受到任何影響(如果你想讓兩個塊狀元素並排顯示,必須讓兩個塊狀元素都應用float)。
盒子模型
border、padding、margin三個屬性構成了盒子模型。
border
設置所有的邊框屬性。
1)可同時設置邊框的寬度、樣式、顏色
table,th,td{border:1pxsolid black; }table{width:100%;height:50px; }
2)使用border-width、border-style、border-color單獨設置
table,td{border-width:1px;border-style: dotted;border-color: green;}
3)border-style的屬性
4)border-collapse
設置是否將表格邊框摺疊為單一邊框。
屬性值:separate(默認,單元格邊框獨立)、collapse(單元格邊框合併)
table{border-collapse : collapse; }
padding
設置元素所有內邊距的寬度,或者設置各邊上內邊距的寬度。
如果在表的內容中控制文本到邊框的內邊距,使用td和th元素的填充屬性:
td{padding:15px;}
單獨設置各邊的內邊距:padding-top、padding-left、padding-bottom、padding-right
<font color=”red”>默認按照上右下左的順序設定</font>
td.test1{padding:1.5cm}td.test2{padding:0.5cm2.5cm}
這個表格單元的每個邊擁有相等的內邊距。
這個表格單元的上和下內邊距是0.5cm,左和右內邊距是 2.5cm。
注意:通過padding屬性設置元素內邊距時,會使元素變形。若不想影響格式效果,可以用margin屬性設置元素外邊距。
margin
設置一個元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。
p.margin{margin:2px4px3px4px;}
單獨設置各邊的外邊距:margin-top、margin-left、margin-bottom、margin-right
p.margin{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; } *{margin: auto auto;} *{margin:100pxauto;}
說明:
auto:自動,可以理解為居中的意思。瀏覽器自動計算外邊距。
margin: auto auto:第一個auto表示上下外邊距自動計算,第二個auto表示左右外邊距自動計算
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/229559.html