目錄

• HTML概念、文本標簽、圖片標簽、超鏈接標簽
• • 3.1 表格
  • • 3.1.1 創建表格
    • 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樣式規則
  • 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 行內元素（內聯元素）
    • 4.9.3 行內塊元素
  • 4.10 開發者工具（chrome）
  • 5.1 盒子邊框（border）
  • 5.2 內邊距（padding）
  • 5.3 外邊距（margin）
  • • 5.3.1 外邊距實現盒子居中
    • 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 靜態定位
    • 6.5.2 固定定位
    • 6.5.3 相對定位
    • 6.5.4 絕對定位

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

3.1 表格

表格現在還是較為常用的一種標簽，但不是用來布局，常見處理、顯示表格式數據。

3.1.1 創建表格

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

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

3.1.2 表格屬性

3.1.3 合并單元格

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

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

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

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

3.2 表單

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

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

3.2.1 表單域

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

常用屬性：

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

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

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

3.2.2 input 控件

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

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

3.2.3 label標簽

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

3.2.4 textarea控件(文本域)

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

3.2.5 select下拉菜單

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

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

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

CSS

4.1 CSS介紹

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

4.2 CSS是什么

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

4.3 CSS的引入方式

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

語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
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元素離哪個樣式近，就受那個樣式表的控制。如果離得近的樣式表定義的規則少，那么較遠的樣式表的定義的樣式會補充。

4.4 CSS注釋

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

4.5 CSS樣式規則

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

在上面的樣式規則中:

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

屬性和屬性值以“鍵值對”的形式出現。

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

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

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

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

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

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

4.6 CSS基礎選擇器

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

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

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

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

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

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

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

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

4.7 CSS常用樣式屬性

4.7.1 CSS字體樣式屬性

字體樣式屬性 說明

font-family	設置字體樣式,設置值“字形名稱” 例：font-family：”宋體”;
font-size	設置字體大小,設置值“數值+（%，pt，px，em，ex）”例：font-size：14px;
font-weight	定義字體的粗細，設置值“bold（粗體）、lighter（細體）、dolder(超粗體)、normal（默認字體），100~900（100的整數倍）”例：font-weight:bold; /* 數字 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屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：
p{ font-family:“微軟雅黑”;}
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。
注意：
1.各種字體之間必須使用英文狀態下的逗號隔開。
2.中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3.如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font‐family: “Times New Roman”;。
4.盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。
在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。
方案一：你可以使用英文來替代。 比如 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	設置背景出現的初始位置，分別表示橫向和縱向的位置坐標。例：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.如果只指定了一個值，該值將用于橫坐標?？v坐標將默認為50%。第二個值將用于縱坐標。
3.如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

4.7.3 CSS段落樣式屬性

段落樣式屬性 說明

text-align	設置文字水平對齊，設置值“left、center、right、justify”。
例：text-align:center;
text-indent	設置首行縮進，設置值“數值+（%，px，pt）”。例：text-indent: 15px;
letter-spacing	設置字符間距，設置值“normal（自動調整）、數值+（pt，px，em）”。例：letter-spacing：5px;
word-spacing	設置義英文單詞之間的間距。例：word-spacing：10px;
line-height	設置行高，設置值“數值+（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（數字）、lower-roman（小寫羅馬數字）、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樣式。

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

4.8.3 后代選擇器

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

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

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 個子元素的每個元素，不論元素的類型，從最后一個子元素 開始計數。
:first-of-type	匹配同類型中的第一個同級兄弟元素
:last-of-type	匹配同類型中的最后一個同級兄弟元素
:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素

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

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

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

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

4.9 標簽顯示模式

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

4.9.1 塊級元素

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

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

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

寬度默認是容器的100%

可以容納內聯元素和其他塊元素。

4.9.2 行內元素（內聯元素）

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

行內元素的特點：

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

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

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

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

4.9.3 行內塊元素

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

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

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

4.10 開發者工具（chrome）

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

小技巧：

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

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

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

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

5.1 盒子邊框（border）

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

5.2 內邊距（padding）

內邊距屬性 說明

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

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

5.3 外邊距（margin）

margin-top 設置上外邊距

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

5.3.1 外邊距實現盒子居中

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

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

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

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

5.3.3 外邊距合并

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

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

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

布局：

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

6.1 布局流程

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

確定頁面的版心（可視區）。

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

制作HTML頁面，CSS文件。

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

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

6.2 標準流

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

6.3 浮動

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

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

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

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

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

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

6.4 清除浮動

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

6.4.1 清除浮動的方法

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

1.額外標簽法

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

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

2.父級添加overflow屬性方法

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

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

使用方法：

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

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

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

優點：代碼更簡潔
缺點：由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站：小米、騰訊等。

6.5 定位

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

6.5.1 靜態定位

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

6.5.2 固定定位

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

6.5.3 相對定位

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

6.5.4 絕對定位

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

總結

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

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