css+html知識總結
HTML
一、概述
1、什麽是 HTML：超文本標記語言，使用一對尖括號括起來，實現特殊的效果定義，用於編寫網頁（後綴為.html、.htm的文件）
2、編輯：文本編輯工具，都可以編寫 HTML頁面
記事本、editplus、ultraedit、DW、webstorm、apanta...
運行：瀏覽器
IE、firefox、chrome、opera、safari
3、HTML是一種解釋性的語言：代碼錯誤，試圖解釋，造成不可預料的奇怪效果
編譯性的語言：後臺代碼
解釋性的語言：不檢查錯誤 -----使用瀏覽器調試找錯誤
二、基礎語法
1、雙標記：有開始也有結束標記，比如111<h1>aaa</h1>222
2、單標記：只有開始標記
<br> 或者 <br />
-----標記可以嵌套，形成復雜的頁面，註意嵌套的順序
-----不區分大小寫，嚴格區分中英文字符
3、屬性：定義在開始標記裏，用空格隔開，屬性名=“屬性值”，多個屬性，之間依然用空格隔開
4、html頁面的標準格式
<!DOCTYPE .....>---文檔類型聲明
<html>-----整個頁面
<head></head>---頁面的整體定義
<body></body>---頁面內容
</html>
5、文檔類型聲明:HTML語言擁有眾多版本
傳統型：<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
嚴格型、框架型、H5類型：<!DOCTYPE html>
6、head裏：文檔頭，用於包含那些為頁面進行整體定義的內容
title：頁面的標題
meta：元數據，定義頁面的編碼格式、緩存、搜索關鍵字等...
<meta http-equiv="refresh" content="5" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="CSS3,JavaScript"/> ---增加頁面被搜搜到的概率
7、添加註釋：為代碼添加一些描述性的說明信息，提高代碼的可閱讀性、可維護度
<!-- 註釋的內容 --> 註釋的內容將不再參與頁面的顯示
三、文本
1、能夠在頁面上顯示的文本內容：普通文本、標記文本
2、普通文本：直接書寫直接顯示
空格折疊的現象：將編輯時候的多個空格和多個換行，合成一個空格展示
特殊字符：有特定意義的字符、鍵盤無法錄入的------使用“字符實體”替代
< 表示 < less than > 表示 > greater than
3、<h1>---標題文本（大字體、加粗、獨占一行，行間距）,常用於頁面上的突出顯示的文本。<h2>---<h6>也是標題
4、<p></p>---段落，被它所包含的文本，自成一個段落，且擁有行間距
5、<br />--換行，相當於回車符
6、<b></b>--加粗顯示；<i></i>--斜體顯示；<u></u>--下劃線顯示
7、<div></div>---內容獨占一行，不會帶來其他效果，常用於頁面內容的分組，實現特定的樣式定義
8、<span></span>---常用於標出一行中的某些文本，定義特定的樣式
9、塊級標記：（block）內容會獨占一行，比如h1、p、div
行內標記：（inline）可以和其他行內標記位於同一行，比如b、i、u、span
塊元素：可以嵌套塊元素和行內元素
行內元素：不可嵌套塊元素
10、其他名詞：P標記、P元素、P標簽
四、圖像和鏈接
1、圖像 <img src="url" width="" height=""/>
2、關於地址
對於web程序而言，不能使用d:\images\a.jpg這種路徑－－》資源文件，服務器端發來，位於緩存區域。應該使用相對路徑或者絕對路徑
３、相對路徑:相對於當前網頁文件而言
<img src="a.jpg" /> <img src="images/b.jpg" /> <img src="../images/c.jpg" />
4、絕對路徑(全路徑)
<img src="http://www.jd.com/a.jpg" />
5、鏈接
<a href="http://www.tmooc.cn" target="_blank">點擊的內容</a>
錨點鏈接 name="name" href="#name" target="_blank"
五、表格
1、用於顯示網格數據、頁面的簡單布局
2、表格的相關標記：tr:table row--表行；td:table defination---單元格
3、常用屬性
Caption：表格標題 border：邊框
width和height：設置給table，行和列的尺寸，自適應；也可設置給td
align：水平方向上的對齊 left/center/right
valign：垂直方向上的對齊 top/middle/bottom
4、不規則表格
---通過設置td的colspan或者rowspan屬性：跨列或者跨行
六、列表
1、有序列表 <ol><li></li></ol>
2、無序列表 <ul><li></li></ul>
七、表單
1、定義一個表單，如果沒有form，無法使用submit提交
2、 input type=text 普通文本框；password 密碼框；radio 單選框；checkbox 多選框；button 普通按鈕；submit 提交按鈕；reset 重置按鈕；file 文件域
( name 組名、value 選項值、checked 默認選中項。
一組單選框組名必須相同。並且只能定義其中一項默認選中。)
3、select 選擇菜單，option 定義菜單項，如果option不定義value，則將option中間的文本字段作為value提交。
默認為單行的下拉菜單。用size屬性可定義行數。用multiple定義可多選
4、textarea 文本域 多行文本框 rows 行數 cols 列數。<textarea>初始值</textarea>
5、label文本標簽 可以用for屬性與某個表單元素綁定。for的值為其他元素的 id 屬性的值。
6、form name method提交方式get/post action提交路徑
<!--method="get/post" get將信息附加在地址欄傳遞；post將信息打包發送。
get特點簡明一目了然，保密性差，能容納的字符數有限；post保密性強，適合傳輸大量的信息；action="login.php"->
7、其它標簽：iframe width寬 height高 src文件路徑 frameborder 0/1 框架邊框
scrolling是否顯示滾動條yes/no name為框架命名。可以在鏈接中用target指向該目標。
寫在一對iframe標簽中間的內容為替代內容，如果瀏覽器不支持框架，就會看到這些內容。
八、其他
details 摘要與細節；summary 定義摘要
meter 度量衡，可以顯示比例。value 當前值； min 最小值；max 最大值
time 定義一個時間；datetime 定義具體時間
mark 高亮顯示內容
CSS
一、css概述
1、html 控制樣式的弊端
1、相同的樣式效果，通過不同的屬性或標記來完成的<body text=""></body>
2、程序 可維護性、可重用性 不高
2、通過 CSS 解決上述問題
可以讓 各個元素 都使用統一的 樣式聲明 從而提高程序的可重用性和可為維護性
3、什麽是CSS
CSS ：Cascading Style Sheet ,層疊樣式表、級聯樣式表，簡稱為 樣式表
作用：為html元素去定義樣式。
1) 能夠實現 內容與表現相分離
2) 提高代碼的可重用性和可維護性
重用性：可以讓多個元素 使用相同的樣式
維護性：一個元素的樣式改變，其他元素也可以跟著變
4、HTML 與 CSS 之間的關系：一個完整的頁面 = HTML + CSS
1）HTML 主要負責顯示內容（搭建網頁的結構）
2）CSS 主要負責構建HTML樣式的定義
HTML屬性與CSS樣式的使用原則：
1）W3C建議盡量使用CSS樣式 取代 HTML 屬性
2）HTML中的專有屬性，無法通過css取代的只能選擇html屬性(rowspan、colspan)
5、CSS樣式表的使用
1、使用方式：
1）內聯方式，也稱為 ：內聯樣式 、行內樣式。將樣式屬性定義在HTML元素中。
特點：只能控制某一個元素的顯示效果
語法:<標記 style="樣式屬性:值;樣式屬性:值;"></標記>
常用屬性： color : 文本顏色，取值 表示顏色的英文單詞 style="color:red;"
2）內部樣式表：將“樣式規則”放在<style>的元素內。
特點：將所有的樣式內容放在<head></head>中的<style></style>元素內。
<style></style>中添加若幹"樣式規則"。
樣式規則：對一套樣式的完整描述,主要包含兩部分
1、規範頁面中哪些標記允許使用定義好的樣式 - 選擇器
2、樣式內容 - 若幹樣式聲明
樣式規則語法：
選擇器{
//樣式聲明
樣式屬性:值;
樣式屬性:值;
...........
}
選擇器：通過 標記 的名稱來表示選擇器，相當於定義該標記的樣式
div{
color:red;
font-size:48px;
}
特點：
1、能夠實現 內容與表現相分離
2、提升了 樣式的可重用性和可維護性
3、只能在一個頁面中做通用樣式定義
3）外部樣式表
將樣式規則 保存在獨立的 css樣式文件中，由頁面對樣式文件進行引用
特點：
1、實現 內容與表現相分離
2、將可重用性 和 可維護性 體現的 最完美(所有的頁面都能用)
3、可以在整個網站乃至於互聯網中做通用的樣式定義
步驟：
1、創建一個樣式表文件，純文本文件，以.css結尾。該文件中只能包含樣式規則。
2、在html頁面中對樣式表文件進行引用在 <head></head>中增加以下代碼：
<link rel="stylesheet" type="text/css" href="鏈接的css文件地址" />
2、CSS語法規範
1、基本語法： 樣式聲明：屬性:值; 樣式規則：選擇器 和 樣式聲明
2、CSS樣式表特征
1、繼承性：大部分的CSS樣式屬性，是可以被繼承的。
繼承：子級不用單獨定義樣式，可以直接使用父級的東西
2、層疊性：為一個元素定義多個樣式的時候，樣式不沖突時，多個樣式表中的樣式可以層疊(合並)為一個
3、優先級：樣式沖突時，按照不同樣式規則的優先級來應用樣式
優先級：
1、瀏覽器缺省（默認）設置 (User Agent Style) ,級別最低；
2、內部樣式表 或 外部樣式表,級別處於中間位置；就近原則（誰靠下，以誰為主）。
3、內聯樣式 ,級別 最高
(提示錯誤：
Unknown property name : 樣式屬性名稱寫錯了；Invalid property value : 樣式屬性值寫錯了)
4、!important規則------------> 謹慎使用！
可以通過 !important 顯示調整樣式優先級，!important優先級最高
語法： 樣式屬性:屬性值 !important;
3、選擇器 作用：規範了頁面中的哪些元素能夠使用定義好的樣式。
1.通用選擇器 作用：匹配頁面中的任何一個元素 語法：*{樣式規則}
2.元素選擇器 作用:匹配頁面中的指定的元素； 語法:元素名稱作為選擇器 body、p等。
3.類選擇器
作用：定義公共的樣式，由任意一個標簽進行引用
語法：.className{ : ; } 例：.red_back{} .red-back{}
引用：在標簽中，通過class屬性 對類選擇器名稱進行引用
註意：在一個元素中，可以同時對多個類選擇器進行引用。多個類選擇器之間用空格隔開。
4.類選擇器-分類選擇器
作用：將類選擇器和元素選擇器結合起來使用，從而實現對某種元素不同樣式的細分控制
語法：元素選擇器.className { } 例：div.red_back{}
5.id選擇器
作用：通過元素的id值，來聲明定義元素的相關樣式屬性 語法：#idValue{}
6.群組選擇器
作用：選擇器聲明，是以 , 隔開的選擇器列表
語法： selector1,selector2,selector3,selector4...{ } 例：div,p,.redback{color:red;}
7.後代、子代選擇器
只存在一級的父子關系：可以稱之為子代或者後代
多於一級的嵌套關系：只能稱之為後代 後代語法：selector1 selector2{}
例：div span{} /*匹配出所有div元素中的span元素*/ #content .redBack{}
子代作用：只能匹配出父子關系的子級元素
目的：不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個具體的子元素時使用。 語法：selector1>selector2{}
8.偽類選擇器
作用：匹配元素的不同狀態 語法： :作為開始的
分類：
1）鏈接偽類 作用：只匹配超鏈接的狀態
:link：適用於尚未訪問的超鏈接 :visited：適用於訪問過後的超鏈接
2）動態偽類
:hover：適用於鼠標懸停在html元素上的狀態
:active：適用於html元素被激活時
:focus：適用於html元素獲取焦點時的狀態
3）目標偽類
4）元素狀態偽類
5）結構偽類
6）否定偽類
4、單位
顏色單位： #rrggbb : 每一位取值 0-9 A-F 例：#012345 :
#rgb : 縮寫 #336699 --》 #369 #aabbcc --> #abc #aabcdd --> 無縮寫
5、尺寸屬性
尺寸：主要設置的是元素的寬度和高度；取值單位：像素 或 百分比
1pt=1/72英；1in=2.45cm。
寬度屬性：
Width--->max-width:限定元素寬度最大值；min-width:限定元素寬度最小值
註意：width 與 max-width、min-width 相沖突
高度屬性：
Height---> min-height；max-height
註意：
1、頁面中，行內元素 絕對不能修改寬和高
2、塊級元素、html元素本身就具備width和height屬性的元素 允許修改寬和高
塊級元素:div,p,h1,h2, ... ；本身具備width 和 height : table,input,img ...
6、溢出處理
使用尺寸屬性控制元素的大小時，如果內容所需控件大小元素本身的控件，會導致內容溢出
屬性: overflow -----> overflow-x : 橫向溢出處理； overflow-y : 縱向溢出處理
作用：當內容溢出元素時，如何處理
取值： 1)visible : 默認值，溢出可見；2)hidden : 溢出隱藏；3)scroll :
滾動，在元素內部顯示滾動條，內容溢出，滾動條可用，內容不溢出，滾動條不可用；4) auto :
自動，內容溢出則顯示滾動條，內容不溢出，不顯示滾動條
7、邊框屬性
1、簡寫方式： border:width style color; (四個方向)
width:邊框寬度；style:邊框樣式,實線(solid),虛線(dotted),虛線(dashed)；color:邊框顏色,還可以取 transparent
2、單邊定義： border-left/right/top/bottom :width style color;
border-方向:width style color;
3、單屬性定義： border-color : color; 四個邊框的顏色
4、單邊框 單屬性定義： border-方向-屬性:值;
方向：top / bottom / left /right； 屬性：color / width / style
5、邊框的組成：
邊框是由四個三角形(元素寬度和高度都為0) 或 梯形組成(元素寬度和高度不為0)
6、邊框倒角：邊框倒圓角，將直角轉換成圓角的操作
屬性:border-radius；取值：具體數值 或 百分比數字
取值數量：
1個值 ：表示的是四個角圓角半徑
4個值 ：從左上角開始 ， 順時針方向的 四個角的圓角半徑
單獨定義:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
7、邊框陰影： 屬性：box-shadow ； 取值：多個屬性值所組成的列表
h-shadow：陰影的水平位置（水平位置偏移量），取值為正 向右偏移；取值為負 向左偏移。
v-shadow：陰影的垂直位置（垂直位置偏移量），取值為正 向下偏移；取值為負 向上偏移。
了解：1)blur：可選屬性，陰影的模糊距離；2)spfread：可選，陰影尺寸
3)color：可選，陰影顏色；4)insert：可選，將外部陰影改為內部陰影
例：box-shadow:h-shadow v-shadow blir color;0px 0px 1px red;
8、輪廓： 屬性：outline 取值：width style color
單屬性：outline-width、 outline-style、 outline-color； 常用模式：outline:0px;
*******************************************************************************
二、框模型
1、框：框就是個容器，目的為了承裝其他的東西；
html中所有的元素都可以稱之為元素框
2、框模型(Box Model) : 也稱為盒子模型、方框屬性。
定義了元素框 處理元素內容尺寸、內邊距、邊框 和 外邊距的方式
外邊距：cellspacing ； 內邊距：cellpadding
註意：當框模型(內邊距，外邊距，邊框)介入到元素後，元素的內容區域尺寸是不變的，但是會增加元素框的總尺寸
元素實際總寬度 = 左右外邊距 + 左右邊框 + 左右內邊距 + width;
元素實際總高度 = 上下外邊距 + 上下邊框 + 上下內邊距 + height;
3、外邊距
1、什麽是外邊距：
圍繞在元素邊框周圍的一些空白區域，這些區域是透明的，默認情況下，是不允許被其他元素所占據的。也可以表示為當前元素與其他元素之間的距離
2、語法：margin:value; (四個方向的外邊距)
單邊設置：
margin-top : 上外邊距 ； margin-right:右外邊距
margin-bottom:下外邊距 ； margin-left:左外邊距
3、取值：
單位: 1) px：具體像素值 margin:10px；2)%：父容器的寬和高的占比；3)auto : 自動，只對左右外邊距有效,設置元素水平居中對齊；4)負值 : 目的 是為了向著相反的方向移動元素
margin-left:取負值，為了向左移動元素；margin-top :取負值，為了向上移動元素
取值為 auto ：由瀏覽器自己計算外邊距。左右方向取值為 auto 時，會呈現出元素水平居中對齊顯示方式（僅僅局限於塊級元素，而且必須要設置寬度屬性）
取值數量：
margin:value; 四個方向外邊距
margin:v1 v2(auto); 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左(從上開始 順時針方向)
4、默認的外邊距
html元素裏，有些元素默認具備外邊距的。
例： h1~h6；p；ul；body； dl、dd
如果程序中，不想使用默認的外邊距，可以通過css重寫的方式設置為 0
5、外邊距問題
1、(垂直)外邊距合並：
當兩個垂直外邊距相遇時，它們將形成一個外邊距，稱為外邊距合並；
合並後的外邊距的高度值為兩個元素中外邊距較大者的值。
2、外邊距溢出：
父子元素中，如果設置 子元素 的上下外邊距時，默認情況會被作用到父元素的外邊距上。
解決方式：
1、可以為父元素增加邊框，主要是上邊框，解決子元素的上邊距溢出問題。
2、增加父元素的 padding-top、最好將父元素的高度相應的減少一部分數值。
4、內邊距
1、什麽是內邊距：
內容區域與邊框之間的空間距離， 註意：內邊距會將元素邊框撐大。
2、屬性：padding : value;
單方向： padding-top: padding-bottom: padding-right: padding-left:
3、取值：
單位： px 、%
數量：
padding:value ; 上下左右
padding:v1 v2 ; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
特殊使用場合：想擴大行內元素的寬度和高度的話，可以通過內邊距來實現。
三、背景
1、背景顏色
屬性：background-color
取值：可設置為合法的顏色單位值 或 transparent
註意：默認情況下，背景(顏色、圖像)是從邊框位置處就開始填充
2、背景圖片
屬性：background-image
取值：url("圖像URL")
background-image:url("xxxx/xxx.jpg");
background-image:url(‘xxxx/xxx.jpg‘);
background-image:url(xxxx/xxx.jpg);
3、背景平鋪（重復）
屬性：background-repeat
取值：repeat : 即水平方向又垂直方向平鋪(默認值)
no-repeat : 沒有平鋪
repeat-x : 僅水平方向平鋪
repeat-y : 僅垂直方向平鋪
4、背景圖片尺寸
屬性：background-size
取值：value1 value2 : 寬度 高度
value1% value2% : 當前元素的寬和高的占比
cover : 覆蓋，將背景圖像擴展至足夠大，直到背景圖已經覆蓋了元素的所有區域。有可能導致背景圖不能完整的顯示在元素中
contain: 包含，將背景圖擴大，直到背景圖已經碰都某一個邊緣位置（右、下）,背景圖能夠完完整整的顯示在元素中，不一定能覆蓋到所有的區域
5、背景圖片固定
默認情況，背景圖片會隨著滾動條而發生滾動，可以通過背景圖片固定的方式解決此問題，讓背景圖保持在網頁的可視化窗口的某個固定為止處不隨著滾動條發生位置變化。
註意：盡量將背景圖片加給body元素 屬性：background-attachment
取值：scroll ：背景會隨滾動條發生滾動（默認值）；
fixed : 固定，背景不會隨著內容而發生滾動。
6、背景定位
改變 背景圖片 在元素中的位置
屬性：background-position
取值：x y : x水平偏移位置,值為正 向右移動，值為負，向左移動
y垂直偏移位置,值為正 向下移動，值為負，向上移動
x% y% : 左上角 : 0% 0%； 右下角 : 100% 100%； 居中顯示 : 50% 50%
關鍵字： x : left,center,right ； y : top,center,bottom
CSS Sprite : 將多個背景圖合並到一張裏面去，根據需求情況，通過 背景定位 對背景圖片進行偏移，從而找到要顯示的圖像
目的：減少對服務器的請求次數
操作步驟：
1.根據想要看的圖像，在頁面創建一個與它一模一樣大小的元素
2.通過background-position對大圖進行位置的移動，正好將想要看到的小圖放到創建好的元素中
7、背景屬性
將以上幾個屬性全部綜合到一起,通過一個屬性描述所有的值
屬性:background
取值：color url() repeat attachment position;
常用值：background:url() repeat position;
常用方式：background:url(Images/user.png) no-repeat -120px -240px;
四、漸變
1、漸變語法：
漸變：指的是兩種或多種顏色之間的平滑過渡
屬性：background-image
取值：
linear-gradient() -- 線性漸變 repeating-linear-gradient() -- 重復線性漸變
radial-gradient() -- 徑向漸變 repeating-radial-gradient() -- 重復徑向漸變
例：background-image:linear-gradient(); -- 顯示線性漸變顏色
*2、線性漸變
屬性：background-image
取值:linear-gradient(angle,color-point1,color-point2,...)
angle:指定漸變的方向(角度)
to top : 向上 --> 0deg to right : 向右 --> 90deg
to bottom : 向下 --> 180deg to left : 向左 --> 270deg
color-point :表示顏色的數值 和 位置 例：red 0% 、red 10px；
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
3、徑向漸變
屬性：background-image
取值: radial-gradient();
radial-gradient([size at position],color-point1,color-point2,....);
size at postion :可以省略不寫
size : 標識的圓的半徑 以 px 為單位
position : 圓心的位置：top,left,right,bottom,center、具體數值、百分比
4、重復漸變
repeating-linear-gradient(angle,color-point); repeating-radial-gradient();
color-point: 位置取具體的數值或者不到100%的數字
5、瀏覽器兼容性
對於不支持的瀏覽器版本，需要添加不同的瀏覽器前綴來解決漸變的問題
Firefox ： -moz- ； chrome和Safari ： -webkit- ； opera ： -o-
例：#d1{background-image:-moz-linear-gradient(to top,red 0%,green 50%,blue 100%);}
五、文本格式化
1、字體屬性
1、指定字體(非重要)
font-family:value1,value2,value3....; 例：font-family:"微軟雅黑","宋體","Arial";
2、字體大小(重要)
font-size: 16px; 取值：px或pt作為單位的值
3、字體加粗(非重要)
相當於 : <b></b> font-weight:normal/bold/無單位數字(400-900);
無單位數字：400 - normal 900 - bold
4、字體樣式(非重要)
相當於 ：<i></i> 功能：斜體 顯示文字 font-style : normal / italic;
5、小型大寫字母(非重要) font-variant:normal/small-caps;
6、字體屬性 font:font-style font-variant font-weight font-size font-family;
常用設置方式：
font:12px "微軟雅黑","Arial"; font:12px/24px(行高) "microsoft yahei";
2、文本屬性
1、文本顏色 (重要) color:value;
2、文本水平排列方式(重要) 相當於：html 屬性中的 align
text-align:left / right / center/justify（兩邊對齊）
功能：能夠控制當前元素內所有的文本、行內元素、行內塊、水平對齊方式。
3、文字線條修飾 屬性：text-decoration
取值：none 無線條(重要)、underline 下劃線(重要)、overline 上劃線(非重點)
line-through 刪除線(非重點) --> <s></s>
4、行高(重要)：一行文本所占據的高度是多少
如果行高大於文本大小的話，那麽這行文字將呈現出垂直居中的顯示方式
屬性：line-height 取值：以 px 為單位的值
5、首行文本縮進(非重要) 屬性：text-indent 取值：以 px 為單位的值
6、文本陰影(非重要) text-shadow:h-shadow v-shadow blur color;
h-shadow:水平投射距離、v-shadow:垂直投射距離、blur:模糊距離、color:顏色
六、表格屬性
1、表格常用屬性(重點)：1、內邊距 : padding；2、尺寸屬性 ：width,height；3、文本屬性 : font-* ,
text-*；4、背景屬性 : background-*；5、邊框 : border /*只給表格設置邊框，單元格沒有*/ table{
border:1px solid red; }； /*單元格邊框，與表格無關*/ td {border:1px solid red;
}；6、vertical-align(垂直對齊方式 td的)，功能：控制單元格內容的垂直對齊方式； 取值：top / middle /
bottom
2、表格特有屬性
註意：該組屬性只能在 table 中使用
1、邊框合並(重要) 屬性：border-collapse 功能：合並兩個相鄰的邊框
取值：separate : 默認值，分離邊框 collapse : 邊框合並
2、邊框邊距(非重點) 相當於td的外邊距， 兩個邊框間的上下和左右的距離。
註意：只有在 border-collapse:separate;即邊框分離時才有效；該屬性加在table中。
屬性：border-spacing
取值： 取一個值：每兩個單元格之間的垂直和水平間距是一致的。
取兩個值：第一個值，指定的是水平間距，第二個值，指定的是垂直間距。兩個值用 空格隔開
3、顯示規則(非重點)：如何布局、顯示、解析一個table，定義加載表格的算法。
屬性：table-layout
取值： auto : 列寬度由單元格的內容來決定，默認值。自動表格布局
fixed: 列寬度由設置的值（即表格寬和列寬一起）來決定。固定表格布局
自動表格布局：單元格的大小會適應內容的大小；加載時較慢；適用於不確定每列大小時使用
固定表格布局：，列寬度取決於設置好的相關屬性值；與內容無關，會加速顯示表格，每次加載表格時不用計算。
比較：1）固定表格布局雖然速度較快，但是不夠靈活，不能體現出表格的特點。
2）自動表格布局，雖然算法較慢，但是能反映傳統表格的特點。
七、浮動定位
1、定位：元素在網頁中該出現的位置，元素框對於其正常位置應該出現的位置。
2、定位屬性：更改當前元素的定位方式。
屬性：position 取值：static / relative / absolute / fixed
3、偏移屬性 top ：+- bottom ：+- left ：+- right ：+-
top和bottom同時出現的話 以top為主；left和right同時出現的話以left為主。
該組屬性能夠幫助我們完成元素的位置移動
4、堆疊順序 屬性：z-index 取值：無單位的數字
5、分類：
1、普通流定位。流：排列元素的一種方式；
又稱為 文檔流定位 ，是頁面默認排列元素的一種方式。
頁面中的塊級元素：元素是從上到下的方式排列（每個元素獨占一行）
頁面中的行內元素：元素是從左到右的方式排列（可以通過左右外邊距調整位置或距離，上下外邊距不行）
弊端：塊級元素無法在一行內顯示多個，布局不好做。
*2、浮動定位 解決問題：讓多個塊級元素能夠在一行內顯示
1、什麽是浮動定位
1)將元素排除在文檔流之外，即元素脫離文檔流。不受默認排列方式(從上到下或從左到右)的控制
2)元素將不再占用頁面的空間，有可能會壓住其他的元素
3)元素會停靠在包含框的左邊或右邊，或者停靠在已經浮動的元素的左邊或右邊。
4)元素無論怎麽浮動，最終還是在包含框之內
2、浮動屬性（沒有繼承性） 屬性：float 取值：none / left / right;
註意：
1、塊級元素浮動後 ，寬度會變成自適應
2、行內元素 浮動起來後，除具備以上特點外，它將變成塊級元素
3、浮動元素的外邊緣不會超過其父元素的邊緣
4、已經浮動的元素不會相互重疊
5、浮動元素只能向佐或向右，不能上下浮動
6、當包含框的寬度不能承裝下所有的浮動元素時，那麽最後一個浮動元素會自動換行。
3、清除浮動 屬性：clear 取值：left / right / both / none
功能：清除當前元素的左邊(上邊) 或 右邊 已浮動元素對它所帶來的影響
4、float 與 overflow
浮動元素對父層元素所帶來的影響
如果一個元素中，包含了浮動元素的話，那麽該元素得到的高度會被浮動元素所影響，如果該元素中都是浮動元素，那麽該元素高度為0。
行內元素浮動的話，將會變成塊級元素，即允許設置寬和高。
原因：浮動元素 會對 父元素的高度帶來影響，父元素的高度，最終以沒有浮動元素的高度為準。
解決方案：
1、手動設置元素的高度。 弊端：自適應高度時無法使用
2、通過 overflow 屬性改變：
overflow:hidden;放在包含浮動元素的父元素中，它會撐起當前元素的高度，變得自適應。
弊端：（能夠隱藏超出範圍的元素）如果父層容器中包含允許溢出的元素的話，則不能使用。
3、在父元素內最後位置處，追加一個（子元素 div）空的塊級元素，增加clear:both;屬性即可。
3、相對定位：元素框會相對於它原來的位置偏移某個距離。
要參考元素本身的位置然後去實現新的位置移動。
1、屬性和值 position:relative; 配合偏移屬性一起使用改變當前元素的位置
通過 top / left / bottom / right 屬性值實現位置的微調
2、註意： 1、相對定位不會改變元素的形狀；2、元素原本所占的控件仍然會保留
3、使用場合
1、元素本身要進行位置的微調時，優先選擇相對定位
2、配合絕對定位一起使用(彈出菜單)
3、要實現堆疊順序的調整
4、絕對定位
1、絕對定位的元素會脫離文檔流，不占據頁面空間，即允許壓住頁面的其他的元素。
2、絕對定位的初始化位置：
1)相對於最近的已定位的祖先元素 來實現位置的初始化；2)如果元素沒有已定位的祖先元素，那麽就相對於最初的包含塊body實現位置的初始化
已定位：position屬性為relative/absolute/fixed當中的任何一種。
3、屬性和值 position:absolute; 通過top / left /bottom / right實現位置的初始化定位。
4、使用場合：1、想實現元素堆疊的效果時使用(一個元素壓住另外一個元素)；2、彈出菜單；
5、堆疊順序（重點）：控制元素的顯示順序。已經定位的元素（尤其是絕對定位）是允許出現堆疊效果的。
默認的堆疊順序：1、按元素出現的順序，後來者居上(同級別)
2、子元素永遠都會壓在父元素的上面(父子級,不可變)
修改堆疊順序: 屬性：z-index 取值：無單位的數字，數字大者靠上
註意：無法修改父子級元素的堆疊順序。
5、固定定位
1、什麽是固定定位：將元素固定在頁面的某個位置處不動，會將元素脫離文檔流，不占頁面空間。
2、屬性 和 值 position:fixed; 通過 left / bottom / right / top 實現位置調整
6、靜態定位(了解) position:static; 默認定位方式。
八、顯示
1.顯示方式（行內元素、塊級元素、行內塊。。）
1.什麽是顯示方式，即元素默認的顯示方式
塊級（block）：div、p、h1-h6、dl...
行內（inline）：span、a、s、b、s、i、u、sub、sup
行內塊（inline-block）：img、input...
表格（table）：table
功能：可以通過 display 屬性修改元素框的默認顯示方式
屬性：display
取值：none : 讓生成的元素沒有框，讓元素脫離文檔流，在頁面上不顯示元素(隱藏)，並且不占據頁面空間，（隱藏元素，並且不占據頁面空間）。
block : 讓元素表現的像塊級元素一樣
使用場合：1.將行內元素 改變成塊級元素，修改寬和高。2.將塊級元素隱藏後，再顯示出來
inline : 讓元素表現的像行內元素一樣
使用場合：將行內元素隱藏後，再顯示出來。註意：不要將塊級元素改成行內元素。
inline-block : 行內塊。按行內元素顯示，具備塊級元素的特點。本身是行內元素：一行內能夠顯示多個。具備塊級元素特點：允許改寬和高。
使用場合：1.將行內元素更改為行內塊，以便修改寬和高
table : 讓元素 顯示的和 table 一樣
總結：display 常用方式：1、隱藏元素以及顯示元素，可以通過 display:none的方式隱藏，如果需要顯示的話，按照自己默認的方式顯示出來即可。比如：div : display:block;
2、如果程序中，想修改行內元素的尺寸時使用：float:left / right; display:block / inline-block;
2、顯示效果
1、可見性(非重點) 屬性：visibility
特點：元素可以隱藏，但是空間會保留，不允許被其他元素占據
取值： visible : 默認值，元素可見的
hidden : 元素不可見，依然占據頁面空間
collapse : 用在表格元素上，刪除一行或一列時，不影響表格整體布局
2、透明度(非重點) 屬性：opacity
取值：0.0 - 1.0之間的小數(能取0{完全透明} 也可以取1)；值越小，越看不清。
3、垂直對齊方式 屬性：vertical-align
使用場合： 1、在td中使用 ：設置內容的垂直對齊方式
2、在 img中使用 : 控制圖像兩端的文本相對於圖像的垂直對齊方式
取值： top:頂部 middle:居中 bottom:底部
baseline : 默認值，基線對齊，默認會將文本放在元素的基線上
註意：通過修改圖像的vertical-align 為非 baseline的值，取消默認底部的3px空白距離（不同瀏覽器底部默認空白距離不同）。
3、光標(非重點) 屬性：cursor
取值：default ：默認值 <- ； pointer : 小手(重點) ；crosshair : +
text : I ； wait : 等待 ； help : ？幫助
九、列表
功能：靈活控制或修改列表項的顯示標識
1、列表項標誌（list-style-type）：修改列表項前面的標識 。 屬性：list-style-type
取值：none ：無標記（重點）；disc : 實心圓；circle : 空心圓；square :實心方塊
lower-roman：小寫羅馬 ；decimal : 數字； ... ...
2、列表項圖像 屬性：list-style-image 取值：url(圖像路徑);
功能：使用自定義圖像，作為列表項的顯示標識
3、列表項位置 屬性:list-style-position
取值：outside：列表項標識位於文本之外，默認值； inside：列表項標識更改在文本範圍之內
4、列表屬性 屬性：list-style 取值：type url() position;
功能：將以上三個屬性值綜合到一起。常用寫法：list-style:none; (重點)。
css+html知識總結