目錄

• HTML概念、文本標簽、圖片標簽、超鏈接標簽
• • 3.1 表格
  • • 3.1.1 創(chuàng)建表格
    • 3.1.2 表格屬性
    • 3.1.3 合并單元格
  • 3.2 表單
  • • 3.2.1 表單域
    • 3.2.2 input 控件
    • 3.2.3 label標簽
    • 3.2.4 textarea控件(文本域)
    • 3.2.5 select下拉菜單
• CSS
• • 4.1 CSS介紹
  • 4.2 CSS是什么
  • 4.3 CSS的引入方式
  • 4.4 CSS注釋
  • 4.5 CSS樣式規(guī)則
  • 4.6 CSS基礎選擇器
  • 4.7 CSS常用樣式屬性
  • • 4.7.1 CSS字體樣式屬性
    • 4.7.2 CSS背景樣式屬性
    • 4.7.3 CSS段落樣式屬性
    • 4.7.4 CSS文本樣式屬性
    • 4.7.5 CSS列表樣式屬性
    • 4.7.6 CSS表格樣式屬性
  • 4.8 CSS復合選擇器
  • • 4.8.1 交集選擇器
    • 4.8.2 并集選擇器
    • 4.8.3 后代選擇器
    • 4.8.4 子元素選擇器
    • 4.8.5 偽類選擇器
    • • 1.鏈接偽類選擇器
      • 2.結構(位置)偽類選擇器（CSS3)
      • 3.目標偽類選擇器(CSS3)
  • 4.9 標簽顯示模式
  • • 4.9.1 塊級元素
    • 4.9.2 行內元素（內聯(lián)元素）
    • 4.9.3 行內塊元素
  • 4.10 開發(fā)者工具（chrome）
  • 5.1 盒子邊框（border）
  • 5.2 內邊距（padding）
  • 5.3 外邊距（margin）
  • • 5.3.1 外邊距實現(xiàn)盒子居中
    • 5.3.2 清除元素的默認內外邊距
    • 5.3.3 外邊距合并
• 布局：
• • 6.1 布局流程
  • 6.2 標準流
  • 6.3 浮動
  • 6.4 清除浮動
  • • 6.4.1 清除浮動的方法
    • • 1.額外標簽法
      • 2.父級添加overflow屬性方法
      • 3.使用after偽元素清除浮動
      • 4.使用before和after雙偽元素清除浮動
  • 6.5 定位
  • • 6.5.1 靜態(tài)定位
    • 6.5.2 固定定位
    • 6.5.3 相對定位
    • 6.5.4 絕對定位

HTML概念、文本標簽、圖片標簽、超鏈接標簽

3.1 表格

表格現(xiàn)在還是較為常用的一種標簽，但不是用來布局，常見處理、顯示表格式數(shù)據(jù)。

3.1.1 創(chuàng)建表格

在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關的標簽。創(chuàng)建表格的基本語法格式如下：

table: 用于定義一個表格。
tr: 用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。
td：用于定義表格中的單元格，必須嵌套在標簽中，一對 中包含幾對，就表示該行中有多少列（或多少個單元格）。

3.1.2 表格屬性

3.1.3 合并單元格

跨行合并：rowspan屬性
跨列合并：colspan屬性

合并單元格的思想：
將多個內容合并的時候，就會有多余的東西，把它刪除。 例如 把 3個 td 合并成一個，那就多余了2個，需要刪除。
公式： 刪除的個數(shù) = 合并的個數(shù) - 1
3.1.3 表頭標簽
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡 單，只需用表頭標簽替代相應的單元格標簽即可。

: 定義表格內的表頭單元格。 th 元素內部的文本通常會呈現(xiàn)為居中的粗體文本，而 td 元素內的文本通常是左對齊的普通文本。 ### 3.1.4 表格標題 caption 元素定義表格標題 <table><caption> 表格格式 </caption></table>

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

3.2 表單

在我們網(wǎng)頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時也需要表單。
在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。

表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：
相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務器。

3.2.1 表單域

在HTML中，form標簽被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下：

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。

method
用于設置表單數(shù)據(jù)的提交方式，其取值為get或post。

name
用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。
注意： 每個表單都應該有自己表單域。

3.2.2 input 控件

標簽為單標簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，標簽還可以定義很多其他的屬性，其常用屬性如下表所示：

注意：使用type=“file”時，需要在form中添加enctype=“multipart/form-data”

3.2.3 label標簽

label 標簽為 input 元素定義標注（標簽）。
作用： 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。
如何綁定元素呢？for 屬性規(guī)定 label 與哪個表單元素綁定。

3.2.4 textarea控件(文本域)

如果需要輸入大量的信息，就需要用到標簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：

3.2.5 select下拉菜單

使用select控件定義下拉菜單的基本語法格式如下：

注意：在option 中定義selected =" selected "時，當前項即為默認選中項。

select標簽添加multiple="multiple"支持多選
超鏈接：也是可以實現(xiàn)跳轉的

CSS

4.1 CSS介紹

從HTML被發(fā)明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控 制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變 的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。
CSS的出現(xiàn)，拯救了混亂的HTML，當讓更加拯救了我們web開發(fā)者。 讓我們的網(wǎng)頁更加豐富多彩。
CSS的最大貢獻就是：讓HTML從樣式中解脫苦海， 實現(xiàn)了HTML 專注去做結構呈現(xiàn)。而樣式交給CSS后，你完全可以放心的早點洗洗睡了！
而且……CSS 做的很出色，如果JavaScript是網(wǎng)頁的魔法師，那么CSS它是我們網(wǎng)頁的美容師。

4.2 CSS是什么

CSS，即“Cascading Style Sheet（層疊樣式表）”，是用來控制網(wǎng)頁的外觀的一門技術。
CSS通常稱為CSS樣式表或層疊樣式表（級聯(lián)樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊 方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器 設置不同的樣式。
CSS在線文檔：http://caibaojian.com/css3/rules/index.htm

4.3 CSS的引入方式

CSS可以寫到那個位置？在HTML中引入CSS共有3種方式：1. 內聯(lián)（行內）樣式表；2. 內部樣式表；3. 外部樣式表；
1）內聯(lián)（行內）樣式表
行內樣式是通過標簽的style屬性來設置元素的樣式，其基本語法格式如下：

語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設置行內式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
2）內部樣式表
內部樣式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義，其基本語法格式如下：

語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
3）外部樣式表
外部樣式表語法中，link標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。

注意：
1.link 是個單標簽
2.link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：

href定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。

type	定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。
rel	定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

注意：樣式表的“最近原則”，意思是：HTML元素離哪個樣式近，就受那個樣式表的控制。如果離得近的樣式表定義的規(guī)則少，那么較遠的樣式表的定義的樣式會補充。

4.4 CSS注釋

CSS規(guī)則是使用 /* 需要注釋的內容 / 進行注釋的，即在需要注釋的內容前使用 “/” 標記開始注釋，在內容的結尾使用 “*/”結束。

4.5 CSS樣式規(guī)則

使用HTML時，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對網(wǎng)頁進行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下：

在上面的樣式規(guī)則中:

選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。

屬性和屬性值以“鍵值對”的形式出現(xiàn)。

屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。

屬性和屬性值之間用英文“:”連接。

多個“鍵值對”之間用英文“;”進行區(qū)分。

“選擇器”嚴格區(qū)分大小寫，“屬性”和“屬性值”不區(qū)分大小寫。

在CSS代碼中空格是不被解析的，花括號以及分號前后的空格可有可無。因此，可以使用空格鍵、Tab鍵、回車鍵等對樣式進行排版。

屬性的值和單位之間是不允許出現(xiàn)空格的，否則瀏覽器解析時會出錯。

4.6 CSS基礎選擇器

要想將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素。在CSS中，執(zhí)行這一任務的樣式規(guī)則部分被稱為選擇器（選擇符）。

CSS選擇器參考網(wǎng)址：https://www.runoob.com/cssref/css-selectors.html
標簽選擇器：當需要對頁面內某類標簽的內容進行修飾時，則采用標簽選擇器。

標簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標簽統(tǒng)一樣式，同時這也是他的缺點，不能設計差異化樣式。
類選擇器：使用“.”（英文點號）進行標識，后面緊跟類名，在使用時候，以HTML標簽的class屬性來標記。

類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。
注意：

長名稱或詞組可以使用中橫線來為選擇器命名。不建議使用“_”下劃線來命名CSS選擇器。

不要純數(shù)字、中文等命名， 盡量使用英文字母來表示。
ID選擇器：使用“#”進行標識，后面緊跟id名，在使用時以HTML標簽的id屬性來標記。大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。

id選擇器和類選擇器區(qū)別
W3C標準規(guī)定，在同一個頁面內，不允許有相同名字的id對象出現(xiàn)，但是允許相同名字的class。
類選擇器（class）好比人的名字，是可以多次重復使用的， 比如 張偉 王偉 李偉 李娜
id選擇器好比人的身份證號碼， 全中國是唯一的， 不得重復。 只能使用一次。
id選擇器和類選擇器最大的不同在于使用次數(shù)上。

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

4.7 CSS常用樣式屬性

4.7.1 CSS字體樣式屬性

字體樣式屬性 說明

font-family	設置字體樣式,設置值“字形名稱” 例：font-family：”宋體”;
font-size	設置字體大小,設置值“數(shù)值+（%，pt，px，em，ex）”例：font-size：14px;
font-weight	定義字體的粗細，設置值“bold（粗體）、lighter（細體）、dolder(超粗體)、normal（默認字體），100~900（100的整數(shù)倍）”例：font-weight:bold; /* 數(shù)字 400 等價于 normal，700 等價于 bold。 */
font-style	定義字體風格，設置值“italic（斜體樣式字體）、oblique（傾斜體樣式字體）、normal（正常字體）”例：font-style:italic;
Font-variant	將文本轉換為小型的大寫字母例：font-variant:small-caps;
font	在一個聲明中設置字體的所有樣式屬性。font: font-style font-variant font-weight font-size/line-height font-family;例：font:bold 12px 宋體;

font-family屬性用于設置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：
p{ font-family:“微軟雅黑”;}
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。
注意：
1.各種字體之間必須使用英文狀態(tài)下的逗號隔開。
2.中文字體需要加英文狀態(tài)下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3.如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如font‐family: “Times New Roman”;。
4.盡量使用系統(tǒng)默認字體，保證在任何用戶的瀏覽器中都能正確顯示。
在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產(chǎn)生亂碼的錯誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。
方案一：你可以使用英文來替代。 比如 font-family:“Microsoft Yahei”。
方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示設置字體為“微軟雅黑”。

為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體。
font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：

font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：
注意：
1.使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
2.其中不需要設置的屬性可以省略（取默認值），但必須保留font‐size和font‐family屬性，否則font屬性將不起作用。

4.7.2 CSS背景樣式屬性

背景樣式屬性 說明

background-color	設置背景顏色，取值：英文單詞、十六進制、rgb()、rgba()。例：background-color：#fff;
background-image	設置背景圖片例：background-image：url（images/bg.png）;
background-repeat	設置背景的平鋪方式,設置值“repeat（橫縱向都平鋪）、repeat-x（橫向平鋪）、repeat-y（縱向平鋪）、no-repeat（不重復平鋪）”，默認為repeat。例：background-repeat: no-repeat;
background-position	設置背景出現(xiàn)的初始位置，分別表示橫向和縱向的位置坐標。例：background-position:20px -100px;
background-attachment	設置背景固定還是滾動，設置值“scroll（背景圖片隨著頁面的滾動而滾動）、fixed(背景圖片不會隨著頁面的滾動而滾動)例：background-attachment:scroll;
background	在一個聲明中設置所有的背景屬性例：background：#ccc url（images/bg.png）repeat-x 20px -100px;

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color連用。 如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
小技巧： 我們提倡 背景圖片后面的地址，url不要加引號。
background-position屬性注意：
1.position 后面是x坐標和y坐標。 可以使用方位名詞（top left right bottom）或者精確單位。
2.如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。
3.如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

4.7.3 CSS段落樣式屬性

段落樣式屬性 說明

text-align	設置文字水平對齊，設置值“l(fā)eft、center、right、justify”。
例：text-align:center;
text-indent	設置首行縮進，設置值“數(shù)值+（%，px，pt）”。例：text-indent: 15px;
letter-spacing	設置字符間距，設置值“normal（自動調整）、數(shù)值+（pt，px，em）”。例：letter-spacing：5px;
word-spacing	設置義英文單詞之間的間距。例：word-spacing：10px;
line-height	設置行高，設置值“數(shù)值+（px，em，%），normal（自動調整）”。例：line-height：25px;
white-space	設置如何處理元素內的空白，常用取值為nowrap(不換行)。例：white-space：nowrap;

4.7.4 CSS文本樣式屬性

文字樣式屬性 說明

color	設置文本顏色，設置值“顏色名稱，十六進制，RGB碼”。例：color:#000;
vertical-align	設置垂直對齊，設置值“baseline（一般位置）、super（上標）、sub（下標）、top（頂端對齊）、middle（垂直居中）、bottom（底端對齊）”。例：vertical-align: middle;
text-decoration	設置文本修飾，設置值“underline（下劃線），overline（設置文本的上劃線），line-through（設置文本的刪除線），none（默認）”。例：text-decoration:underline;
text-trancform	轉換字母大小寫，設置值“none（不做改變），lowercase（全部小寫），uppercase（全部大寫），capitalize（首字母大寫，其余字母不變）”。例：text-trancform:lowercase;

color屬性用于定義文本的顏色，其取值方式有如下3種：

預定義的顏色值，如red，green，blue等。

十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。
文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下：

4.7.5 CSS列表樣式屬性

列表屬性 說明

list-style-image	將圖像設置為列表項標志例：list-style-image: url(‘/images/img.gif’);
list-style-position	設置列表中列表項標志的位置，設置值“inside，outside，inherit” 例：list-style-position: inside;
list-style-type	設置列表標志的類型,常用取值“none（無標記）、disc（實心圓）、circle（空心圓）、square（實心方塊）decimal（數(shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-latin（大寫字母）”等等例：list-style-type: none;
list-style	簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中。例：list-style: square inside url(‘/img.gif’);

4.7.6 CSS表格樣式屬性

表格屬性 說明

table-layout	設置或檢索表格的布局算法 。取值：auto：默認的自動算法。fixed：固定布局的算法。（內容可能被裁切）
border-collapse	設置或檢索表格的行和單元格的邊是合并在一起還是按照標準的HTML樣式分開。取值：separate：邊框獨立collapse：相鄰邊被合并
border-spacing	設置或檢索當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距例：border-spacing:10px 20px;
empty-cells	設置或檢索當表格的單元格無內容時，是否顯示該單元格的邊框。取值：hide：指定當表格的單元格無內容時，隱藏該單元格的邊框。show：指定當表格的單元格無內容時，顯示該單元格的邊框。

4.8 CSS復合選擇器

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽。

4.8.1 交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格。

記憶技巧： 交集選擇器 是 并且的意思。 既…又…的意思。
比如： p.one 選擇的是： 類名為 .one 的 段落標簽。用的相對來說比較少，不太建議使用。

4.8.2 并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

記憶技巧：并集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執(zhí)行后面樣式。
比如：.one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執(zhí)行顏色為紅色。通常用于集體聲明。

4.8.3 后代選擇器

后代選擇器也稱為包含選擇器，顧名思義，是一種具有包含關系的選擇。多個選擇器以空格分開，組合成包含關系，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發(fā)生嵌套時，內層標簽就成為外層標簽的后代。

記憶技巧：子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內的標簽。

4.8.4 子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一 個 > 進行連接，注意，符號左右兩側各保留一個空格。

白話： 這里的子指的是親兒子，不包含孫子、重孫子之類。

4.8.5 偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇第1個，第n個元素。

1.鏈接偽類選擇器

偽類名稱 說明

:link	未單擊訪問時超鏈接樣式
:visited	單擊訪問后超鏈接樣式
:hover	鼠標懸浮其上的超鏈接樣式
:active	鼠標單擊未釋放的超鏈接樣式
注意寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。

2.結構(位置)偽類選擇器（CSS3)

偽類名稱說明

:first-child	選取屬于其父元素的首個子元素的指定選擇器
:last-child	選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n)	匹配屬于其父元素的第 N 個子元素，不論元素的類型
:nth-last-child(n)	選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素 開始計數(shù)。
:first-of-type	匹配同類型中的第一個同級兄弟元素
:last-of-type	匹配同類型中的最后一個同級兄弟元素
:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素

注意：n 可以是數(shù)字、關鍵詞或公式。

注意：
:nth-child(n)在父級里從一個元素開始查找，不分類型
:nth-of-type(n)在父級里先看類型，再看位置

3.目標偽類選擇器(CSS3)

:target目標偽類選擇器，選擇器可用于選取當前活動的目標元素。:target選擇器高亮顯示當前活動的HTML錨點。

4.9 標簽顯示模式

HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱塊元素和行內元素。

4.9.1 塊級元素

通常都會獨自占據(jù)一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結構的搭建。

塊級元素的特點：總是從新行開始

高度，行高、外邊距以及內邊距都可以控制。

寬度默認是容器的100%

可以容納內聯(lián)元素和其他塊元素。

4.9.2 行內元素（內聯(lián)元素）

不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、 高度、對齊等屬性，常用于控制頁面中文本的樣式。

行內元素的特點：

和相鄰行內元素在一行上。

高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。

默認寬度就是它本身內容的寬度。

行內元素只能容納文本或則其他行內元素。（a特殊）

4.9.3 行內塊元素

普遍的規(guī)則里總有那么幾個不一樣的，在行內元素中就有那么幾個特殊標簽，比如“//”,可以給他們設置寬高、對齊屬性，我們把這樣特殊的一類標簽稱為行內塊元素。行內塊元素綜合了塊元素和行內元素的不同特點。
行內塊元素的特點：

和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。

默認寬度就是它本身內容的寬度。
寬度、高度，行高、外邊距以及內邊距都可以控制。

4.10 開發(fā)者工具（chrome）

此工具是我們的必備工具，以后代碼出了問題，我們首先第一反應就是： “按F12”或者是 “shift+ctrl+I” 打開 開發(fā)者工具。

小技巧：

ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。

左邊是HTML元素結構 右邊是CSS樣式。
右邊CSS樣式可以改動數(shù)值和顏色查看更改后效果。

其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細節(jié)。要求這三部分，無論如何也要學的非常精通。
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
首先，我們來看一張圖，來體會下什么是盒子模型。

所有的文檔元素（標簽）都會生成一個矩形框，我們稱為元素框（element box），它描述了一個文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

5.1 盒子邊框（border）

邊框可以理解為就是那層皮。

5.2 內邊距（padding）

內邊距屬性 說明

padding-top	設置內容與上邊框之間的距離
padding-right	設置內容與右邊框之間的距離
padding-bottom	設置內容與下邊框之間的距離
padding-left	設置內容與左邊框之間的距離
padding	設置內容與邊框之間的距離，上 右 下 左。

注意： padding后面跟幾個數(shù)值表示的意思是不一樣的。

5.3 外邊距（margin）

margin-top 設置上外邊距

margin-right	設置右外邊距
margin-bottom	設置下外邊距
margin-left	設置左外邊距
margin	設置外邊距，上 右 下 左。

5.3.1 外邊距實現(xiàn)盒子居中

可以讓一個盒子實現(xiàn)水平居中，需要滿足一下兩個條件：
1.必須是塊級元素。
2.盒子必須指定了寬度（width）
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網(wǎng)頁布局，示例代碼如下：

5.3.2 清除元素的默認內外邊距

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，可使用如下代碼清除元素的默認內外邊距：

注意：行內元素是只有左右內外邊距的，是沒有上下內外邊距的。

5.3.3 外邊距合并

使用margin定義塊元素的垂直外邊距時，可能會出現(xiàn)外邊距的合并的情況。
1.相鄰塊元素垂直外邊距的合并
上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margintop，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

解決方案：避免就好了。
1.嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合 并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發(fā)生合并。

解決方案：
1.可以為父元素定義1像素的上邊框或上內邊距。
2.可以為父元素添加overflow:hidden。

布局：

看透網(wǎng)頁布局的本質： 把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。

6.1 布局流程

為了提高網(wǎng)頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：

確定頁面的版心（可視區(qū)）。

分析頁面中的行模塊，以及每個行模塊中的列模塊。

制作HTML頁面，CSS文件。

CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個模塊。
“版心”是指網(wǎng)頁中主體內容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：標準流（普通流）、浮動布局和定位布局。

6.2 標準流

html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網(wǎng)頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。

6.3 浮動

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

1.浮動首先創(chuàng)建包含塊的概念（包裹）。就是說， 浮動的元素總是找離它最近的父級元素對齊。但是不會超出內邊距的范圍。

2.浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

上一個盒子浮動，A也浮動

上一個盒子不浮動，A浮動

1.由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
2.浮動脫離標準流，不占位置，會影響標準流。浮動只有左右浮動。
3.元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少。
4.浮動根據(jù)元素書寫的位置來顯示相應的浮動。
總結： 浮動 —> 浮漏特
浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏： 加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。 特：特別注意，這是特殊的使用，有很多的不好處，使用要謹慎。

6.4 清除浮動

為什么要清除浮動？
浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現(xiàn)，但是，你不能說浮動不好。
由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

6.4.1 清除浮動的方法

其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

1.額外標簽法

W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如

，或則其他標簽br等亦可。
優(yōu)點： 通俗易懂，書寫方便。
缺點： 添加許多無意義的標簽，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。

2.父級添加overflow屬性方法

可以通過觸發(fā)BFC（Block Formatting Context，塊格式化上下文）的方式，可以實現(xiàn)清除浮動效果。
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現(xiàn)。
優(yōu)點：代碼簡潔
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

3.使用after偽元素清除浮動

使用方法：

優(yōu)點： 符合閉合浮動思想，結構語義化正確。
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等。

注意： content:“.” 里面盡量跟一個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。

4.使用before和after雙偽元素清除浮動

優(yōu)點：代碼更簡潔
缺點：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站：小米、騰訊等。

6.5 定位

浮動比較靈活，但是不容易控制。而定位的出現(xiàn)，使得用戶精準定位頁面中的任意元素成為可能，使得網(wǎng)頁布局變得更加隨心所欲。
CSS定位使你可以將一個元素精確地放在頁面上你指定的地方。聯(lián)合使用定位和浮動，能夠創(chuàng)建多種高級而精確地布局。
定位的方法有很多種，它們分別是固定定位（fixed）、相對定位（relative）、絕對定位（absolute）、靜態(tài)定位（static）和粘貼定位（sticky）。

6.5.1 靜態(tài)定位

如果沒有指定元素的position屬性值，也就是默認情況下，元素是靜態(tài)定位。只要是支持position屬性的html對象都是默認為static。static是position屬性的默認值，它表示塊保留在原本應該在的位置，不會重新定位。
說白了，平常我們根本就用不到“position:static”，不過呢，如果有時候我們使用javascript來控制元素定位的時候，如果想要使得其他定位方式的元素變成靜態(tài)定位，就要使用“position:static;”來實現(xiàn)。

6.5.2 固定定位

固定定位是最直觀而最容易理解的定位方式，元素的位置相對于瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
使用場景：
一般在網(wǎng)頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等。
“position: fixed;”搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基于瀏覽器窗口計算的，否則初始位置就是元素的默認位置。

6.5.3 相對定位

采用相對定位的元素，其位置是相對于它的原始位置計算而來的。相對定位是通過將元素從原來的位置向上、向下、向左或者向右移動來定位的。采用相對定位的元素會獲得相應的空間。
注意：
設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置
設置相對定位的盒子仍在標準文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響
設置相對定位的盒子原來的位置會被保留下來
使用場景：
相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創(chuàng)造定位父級而又不設置偏移量。

6.5.4 絕對定位

絕對定位是相對于它的定位父級的位置來定位，如果沒有設置定位父級，則相對瀏覽器窗口來定位。
注意：
元素位置發(fā)生偏移后，原來的位置不會被保留。
層級提高，可以把標準文檔流中的元素及浮動元素蓋在下邊。
設置絕對定位的元素脫離文檔流。
使用場景：
一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數(shù)字氣泡、特別花邊等場景。

總結

以上是生活随笔為你收集整理的HTML CSS 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。