HTML是一種超文本標記語言
一、選擇器
類選擇器：.class
id選擇器：#id
通配選擇器：*（選擇所有元素）
元素選擇器：element（選擇某個元素的所有元素）
交集/并集選擇器：
elementelement ：
? ? p.important? ? ? 選擇class屬性包含impotant的所有<p>元素，注意：不能是兩個元素
element,element ：
? ? ? ? div,p? ? ? ? ? ? 選擇所有的<div>元素和<p>元素
后代/兄弟元素選擇器
? ? ? ? ? ? element element ：
? ? ? ? div p? ? ? ? ? ? 選擇<div>元素內的所有<p>元素
element>element ：
? ? ? ? div>p? ? ? ? ? 選擇所有父級是<div>元素的<p>元素
element+element ：
? ? ? ? div+p? ? ? ? ? 選擇所有緊接著<div>元素之后的<p>元素
element1~element2 ：
? ? ? ? ? p~ul? ? ? ? ? ? 選擇p元素之后的每一個ul元素
偽類選擇器
? ? ? ? ? ? ? ? :hover? ? ? ? ? ? ? ? ? ? a:hover? ? ? ? ? ? ? ? ? ? 選擇鼠標在鏈接上面時
? ? ? ? ? ? ? ? :first-child? ? ? ? ? ? ? p:first-child? ? ? ? ? ? ? ? 指定只有當<p>元素是其父級的第一個子級的樣式
? ? ? ? ? ? ? ? :nth-child(n)? ? ? ? ? ? p:nth-child(2)? ? ? ? ? ? 選擇每個p元素是其父級的第二個子元素
? ? ? ? ? ? ? ? :last-child? ? ? ? ? ? ? ? p:last-child? ? ? ? ? ? ? 選擇每個p元素是其父級的最后一個子級
? ? ? ? ? ? ? ? :not(selector)? ? ? ? ? :not(p)? ? ? ? ? ? ? ? ? ? ? 選擇每個并非p元素的元素
? ? ? ? ? ? ? ? :empty ? ? ? ? ? ? ? p:empty ? ? ? ? ? ? ? ? 選擇每個沒有任何子級的p元素（包括文本節點）
偽元素選擇器
? ? ? ? ? ? ? ? :before? ? ? ? ? ? ? p:before ? ? ? ? ? ? 在每個<p>元素之前插入內容（一般不用，淘汰了）
? ? ? ? ? ? ? ? :after ? ? ? ? ? p:after ? ? ? ? ? ? 在每個<p>元素之后插入內容（一般不用，淘汰了）
? ? ? ? ? ? ? ? ::before ? ? ? ? ? p::before ? ? 在每個<p>元素之前插入內容
? ? ? ? ? ? ? ? ::after ? ? ? ? ? p::after ? ? ? ? ? ? 在每個<p>元素之后插入內容
? ? ? ? ? ? ? ? ::selection? ? ? ? ? p::selection ? ? ? 選擇被用戶選取的元素部分
屬性選擇器
[attribute]? ? ? ? ? ? ? ? ? [target] ? ? ? ? ? ? ? 選擇所有帶有target屬性元素
[attribute=value] ? ? ? ? [target=-blank] ? ? ? ? 選擇所有使用target="-blank"的元素
自定義滾動條
滾動條組成部分：
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或向左向右移動）
::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，由于通過點擊微調小方塊的位置。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分
::-webkit-scrollbar-corner 邊角，即垂直滾動條和水平滾動條相交的地方
::-webkit-resizer 兩個滾動條的交匯處上用于拖動調整元素大小的小控件
用:hover實現鼠標在一個元素時另一個元素發生變化
二、盒子模型
（1）塊級盒子（默認樣式為塊級的元素）
? 常見的塊級元素：div、p、h1~h6、ul、ol、li、table、hr
? ? ? 被定義成塊級的盒子會有以下情況：
盒子會在內聯的方向上擴展并占據父容器在該方向上的所有可用空間，在絕大數情況下這意味著盒子會和父級容器一樣寬
每個盒子都會換行
可以定義width 和 height
內邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當前盒子周圍“推開”
（2）內聯盒子（默認樣式為行級的元素）
常見的行內元素：span、img、a、lable、input、textarea、select、button
被定義成行級的盒子會有以下情況：
盒子不會產生換行（在瀏覽器中可以與其它行內元素共占一行，只有當多個元素的總寬度大于瀏覽器的寬度時，才會換行顯示）。
width 和 height 屬性將不起作用。
垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處于 inline 狀態的盒子推開。
水平方向的內邊距、外邊距以及邊框會被應用而且也會把其他處于 inline 狀態的盒子推開。
? ? (3)? ? padding和margin（可以隨便找一個網頁，打開檢查元素即可看到）
padding -> 內邊距(內容與邊框之間) margin -> 外邊距(標簽與標簽之間)
*注意：兩個挨著的margin瀏覽器最后會取其中的最大值；
1.margin:用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的
2 .padding: 用于控制內容與邊框之間的距離；?
3 .border(邊框):圍繞在內邊距和內容外的邊框。
4 .content(內容):盒子的內容，顯示文本和圖像。
(4)標準盒模型（向外擴展）
加入padding或者border，內容不變，盒子向外擴展
box-sizing=content-box;
盒子的大小=padding+border+width/height
(5)替代盒模型(向內伸縮)
box-sizing=border-box;
加入padding和border，盒子大小不變，內容被壓縮
content=width/height-(padding+border)
? (6)盒模型實例
? (7) margin和padding拓展? ? ? ? ? overflow:hidden可以用來解決margin塌陷問題
a.body的margin問題
邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下,
body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框.
解決辦法：margin:0;
b.margin collapse（邊界塌陷問題）
外邊距的重疊只產生在普通流文檔的上下外邊距之間
兄弟div: 上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值
父子div: 如果父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然后按此div 進行margin
? ? ? ? (8)元素的高度和寬度
? ? ? ? ? ? ? 1.元素不設寬度
? ? ? ? ? ? ? ? ? ? a.當元素為文檔流,元素元素不設寬度時，若元素為文檔流中元素，則此元素繼承其父元素寬度。
? ? ? ? ? ? ? ? ? ? b.當元素為脫離文檔流元素,在元素不設寬度的情況下，若子元素為脫離文檔流元素，則此元素寬度等于其內容寬度。
? ? ? ? ? ? ? ? 2.元素不設高度
? ? ? ? ? ? ? ? ? ? 若元素沒有內容，則高度為0；若元素有內容，元素高度為內容高度。
三、定位
定位（position）
static
HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
特點
靜態定位的元素不會受到 top, bottom, left, right影響。
relative
相對定位元素的定位是相對其正常位置。移動相對定位元素，但它原本所占的空間（初始文檔流位置）不會改變。
fixed
元素的位置相對于瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
absolute
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于 <html>
overflow
該屬性可以控制內容溢出元素框時在對應的元素區間內添加滾動條。
值 ? ? ? ? ? ? 描述
visible ? ? 默認值。內容不會被修剪，會呈現在元素框之外。? ? ? ? ? ? ? ? ? ? ? ? overflow:visible
hidden ? ? 內容會被修剪，并且其余內容是不可見的。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden
scroll ? ? 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。? ? overflow:scroll
auto ? ? ? ? ? ? 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。? ? overflow:auto
inherit ? ? 規定應該從父元素繼承 overflow 屬性的值。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow:inherit
四、浮動、對齊
浮動
? ? float:left or right
? ? ? 特點：
? ? ? 元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為? ? 止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
清除浮動
語法
.text_line {clear:both;}
特點：
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
居中對齊
1.水平居中
文字
text-align: center
通用
1.子元素 display: block; margin: auto
2.子元素position: relative; left: 50%; margin-left: -子元素寬度/2px;
3. 子元素 position: relative; left: 50%; transform: translate(-50%,0);
4.父元素 display: flex; justify-content: center;<常用，好用>
2.垂直居中
1.父元素 position: relative; 子元素 position: absolute; top: 0; bottom: 0; margin: auto 0
2.父元素 overflow:hidden;子元素 top: 50%; margin-top: -高度/2px;（注意margin塌陷，給父級添加overflow:hidden）?
3. 子元素position: relative;top: 50%;transform: translate(0,-50%);<常用>
4. 父元素 display: flex; 子元素 align-self: center;
5. line-height 屬性
補充：
利用彈性盒子的居中：
水平居中：
display:flex;
justify-content:center;
垂直居中
display:flex;
align-items:center;
注意:
text-align:具有穿透性?
fit-content:自適應元素的寬度
應用auto的時候必須給元素加一個固定的高度或寬度
涉及到top、buttom、left、right的時候需要給元素加一個相對定位，當有margin-top的時候? ? ? ? ? 要注意margin塌陷
五、
各種效果
盒子的相關設置
邊框的三個屬性
border-radius
box-shadow
border-image
圓角（利用border-radius)
四個值:?第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
三個值:?第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
兩個值:?第一個值為左上角與右下角，第二個值為右上角與左下角
一個值：?四個圓角值相同
border-radius: 5px;（效果賦予四個角）
border-radius: 5px 10px;（第一個值是左上右下角，第二個值是右上左下角）
border-radius: 5px 10px 15px 20px;（從左上角順時針到左下角4個值）
border-radius: 50%;圓角值從左上順時針到左下。
box-shadow: 10px 10px 5px grey;
從左到右的幾個數值分別是：
陰影的水平偏移? ? 陰影的垂直偏移? ? 模糊程度? ? 陰影尺寸 顏色? ? ? 是否為內陰影（是否加insect）
? ? ? ? border-image：
就是盒子的四個邊用圖片進行填充，
round圖片通過重復來形成邊框
stretch圖片通過拉伸來形成邊框
漸變（可自行用下面代碼嘗試）
background-image: linear-gradient(#e66465, #9198e5);
background-image: linear-gradient(red, blue, yellow);
background-image: linear-gradient(to right, red , yellow);
background-image: linear-gradient(45deg, red, yellow);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(circle, red, yellow, green);
角度從正上順時針增加。百分數指顏色鍵的位置。
文字效果
1.文字陰影
text-shadow: 5px 10px 15px #FF0000;
text-shadow: 5px 5px 15px #FF0000, 5px 5px 30px #FF0000;
從左到右的幾個數值分別是：
陰影的水平偏移? 陰影的垂直偏移? 模糊程度? 顏色
補充:邊框陰影
box-shadow:
2.矩形陰影
3.文字overflow屬性
text-overflow: ellipsis：? div 容器內的文本無法完全顯示時，可以看到加上此代碼它被裁剪了。
顯示省略符號來代表被修剪的文本。
text-overflow: clip;? ? ? ? ? 默認值 修剪文本。
使用 ellipsis 的前提：
white-space: nowrap;
overflow: hidden;
css設置文字顯示兩行,溢出部分用省略號代替
div{
? ? overflow:hidden;
? ? display:-webkit-box; //將對象作為彈性伸縮盒子模型顯示;
? ? text-overflow:ellipsis;//溢出部分用省略號代替
? ? -webkit-line-clamp:2; //設置文本顯示兩行
? ? -webkit-box-orient:vertical;? //從上到下排列子元素;
? ? white-space:normal;
}
換行
4.word-wrap: break-word;
使用該屬性，文本在區域中會盡力（換行）顯示出完整單詞，如果單詞長度大于區域寬度則分裂單詞，以防止單詞顯示到區域外面。
5.單詞拆分換行
word-break: keep-all;
word-break: break-all;
keep-all 是保護所有單詞不被拆分。
break-all 是換行時拆分所有單詞。
過渡!!!!!
transition: 2s;
transition: width 2s;
transition: width 2s, height 2s, transform 2s;
transition: width 2s linear 2s;
從左到右幾個數值分別為：
效果（可選，不寫指全部） 過渡時間 過渡的時間曲線（可選） 過渡的開始時間（可選）
動畫!!!!!!
CSS3 可以創建動畫，它可以取代許多網頁動畫圖像、Flash 動畫和 JavaScript 實現的效果。
CSS3的動畫屬性
下面列出了 @keyframes 規則和所有動畫屬性：
屬性 描述 CSS
@keyframes ? ? ? ? ? ? ? 規定動畫名字。
animation ? ? ? ? ? ? ? 所有動畫屬性的簡寫屬性。
animation-name ? ? ? 規定 @keyframes 動畫的名稱。
animation-duration ? ? ? 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
學了js后用的
animation-fill-mode ? ? ? ? ? ? ? ? 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-fill-mode它能夠控制元素在動畫執行前與動畫完成后的樣式。一個帶有延遲(animation-delay)，并且按正常方向（animation-direction）執行的動畫（正常方向是指normal也就是指動畫從0%運行到100%的動畫）。動畫按執行時間來劃分，它分為三個過程，或者說一次動畫過程可以將元素劃分為三個狀態：動畫等待、動畫進行和動畫結束。默認情況之下，只有在動畫進行狀態，才會應用@keyframes所聲明的動畫；而在動畫等待和動畫結束狀態，對元素樣式并不會產生任何的影響。
animation-fill-mode屬性可以接受none、forwards、backwards或者both四個值中的一個值。接下來分別來解釋每個值對其影響。
原文:?https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html???w3cplus.com
animation-delay ? ? ? ? ? ? ? 規定動畫何時開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1。
animation-direction ? ? ? ? ? ? 規定動畫是否在下一周期逆向地播放。默認是 "normal"。
屬性值
值描述測試
normal默認值。動畫按正常播放。
reverse動畫反向播放。
alternate動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。
alternate-reverse動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。
initial設置該屬性為它的默認值。
inherit從父元素繼承該屬性。
animation-play-state ? ? 規定動畫是否正在運行或暫停。默認是 "running"。
樣例：
@keyframes hengtiao {
? ? 0% {
? ? ? ? top: -3px;
? ? }
? ? 50% {
? ? ? ? top: 76px;
? ? }
? ? 100% {
? ? ? ? top: -3px;
? ? }
}
@-webkit-keyframes hengtiao {
? ? 0% {
? ? ? ? top: -8px;
? ? }
? ? 50% {
? ? ? ? top: 105px;
? ? }
? ? 100% {
? ? ? ? top: -8px;
? ? }
}
transform(translate)詳解
? ? ? translate()
translateX()
translateY()
translateZ()
translate3d()
translateX
向X軸平移，填正數往右平移，填負數，往左平移
translateY
向Y軸平移，填正數往下平移，填負數，往上平移
translateZ
向Z軸平移，這個可能有點難理解，想像一個場景，你現在和電腦屏幕的距離，這就是Z軸的距離，電腦屏幕離你越近，那么translateZ() 里面的值 越大，? 電腦屏幕離你越遠，?translateZ() 的值就越小。 所以說，Z 增加，那么這個電腦屏幕，離你就越近，
下面要用到旋轉，rotate，不懂的話，請點擊→css3系列之transform 詳解rotate
首先Z 軸是朝向我們的，所以 看不出效果，但是，我們把它轉個身，讓Z軸 面對 右邊，就可以了。
translate()? 和? ?translate3d()
translate 是同時設置? translateX? 和 translateY， 所以里面可以填兩個參數， 第一個值 X? 第二個 Y
translate3d?是同時設置? translateX? ，translateY 和?translateZ?所以里面可以填三個參數
只不過有點不同的是， translate 如果第二個參數不填的話，默認是0， 不過translate3d的話，人家就不同意你不填了，你三個參數，必須都給我填。
補充
1.給字體設置樣式
給字體加粗用? font-weight：bold;
改變字體大小：? font-size:? ? 0px;
用font-size:
可能的值
值描述
xx-small
x-small
small
medium
large
x-large
xx-large
把字體的尺寸設置為不同的尺寸，從 xx-small 到 xx-large。
默認值：medium。
smaller把 font-size 設置為比父元素更小的尺寸。
larger把 font-size 設置為比父元素更大的尺寸。
length把 font-size 設置為一個固定的值。
%把 font-size 設置為基于父元素的一個百分比值。
inherit規定應該從父元素繼承字體尺寸。
字體間距用法:
word-spacing: 1cm;
word-spacing: 10pt;
word-spacing: 10px;
word-spacing: none;
line-height:10px;可以給li標簽設置行間距
改變div里面文字橫豎方向的方法
語法：writing-mode:lr-tb或writing-mode:tb-rl
參數：
1、lr-tb：從左向右，從上往下
2、tb-rl：從上往下，從右向左
2.制作鼠標懸停浮動效果時可以用
:hover用來制作鼠標懸停效果
:hover的
z-index:指定一個元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
z-index是針對網頁顯示中的一個特殊屬性。因為顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關系。
z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。
opacity:透明度
如何讓一個原來隱藏的元素在鼠標放上去的時候會出現？
1.要設置塊的堆疊順序，首先它需要有寬高
position: absolute;
? z-index: 1;
2.可以用到透明效果，
.navcontent{
? background-color: rgb(180, 174, 174);
? opacity:0.1%;
? filter:alpha(opacity=10);
}（圖片是透明的）
.navcontent:hover{
? opacity:1.0;
? filter:alpha(opacity=100);
}（鼠標放上去后不透明）
3.行級元素與塊級元素的相互轉化
display:inline將塊級元素設為行級元素
同樣，也可以用display:block將行級元素設為塊級元素
一些功能可以看CSS選擇器
4.一些常用的快捷鍵，不要忘了
F11可以對Vscode進行全屏
Alt+Shift往下復制
5.取消Body與HTML之間的默認邊距margin：0；
6.在CSS樣式中引入圖片
? background-image: url();
7.讓電腦圖片自適應瀏覽器
? background-size: cover;
8.如何讓三個Div元素居于同一行
利用flex彈性布局：display：flex；阮一峰的筆記：非常Nice，非常好用！！！
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
當用flex彈性布局的時候,如果想對其中的某個元素進行位置偏移,可以用margin-left等等
9.HTML如何去掉網頁超鏈接下劃線
? 在超鏈接里面加個樣式style="text-decoration:none;"
? ? 引入超鏈接的顏色是可以直接改的
給鏈接或者文本加下劃線：
text-decoration:
none:默認。定義標準的文本。
underline：定義文本下的一條線。
overline：定義文本上的一條線。
line-through：定義穿過文本下的一條線。
blink：定義閃爍的文本。
inherit：規定應該從父元素繼承text-decoration屬性的值。
10.CSS里面有一個多列屬性可以看看
? ? 還有一個column屬性
column-count 屬性設置列的具體個數? ? ? ? ? ? ? ? ? ? 好用
? ? column-width屬性控制列的寬度
column-gap，主要用來設置列之間的間隔，
column-rule-width，主要用來設置列之間的豎線分隔的寬度
column-rule-style，主要用來設置列之間的豎線分隔的樣式，dotted是虛線
column-rule-color，主要用來設置列之間的豎線分隔線的顏色，
column-rule-style:對于樣式而言有以下的值：
值描述
none定義沒有規則。
hidden定義隱藏規則。
dotted定義點狀規則。
dashed定義虛線規則。
solid定義實線規則。
double定義雙線規則。
groove定義 3D grooved 規則。該效果取決于寬度和顏色值。
ridge定義 3D ridged 規則。該效果取決于寬度和顏色值。
inset定義 3D inset 規則。該效果取決于寬度和顏色值。
outset定義 3D outset 規則。該效果取決于寬度和顏色值。
11.表單
? <form></form>標簽，還需要用到<input>
列表：
無序列表（會用圓點進行標識）：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
當想要去掉前面的小圓點的時候,可以給ul加一個屬性ul{list-style-type:none}
可以使li標簽橫向排列的方法：
1、給ul設置display:flex,justify-content:center、或者其他的
2.給Ul設置display:inline-block，float:left
3、利用float和margin
有序列表（會用數字進行標識）：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
標簽描述
<ol>定義有序列表
<ul>定義無序列表
<li>定義列表項
<dl>定義列表
<dt>自定義列表項目
<dd>定義自定列表項的描述
Display的值：
none此元素不會被顯示。
block此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
inline-block行內塊元素。（CSS2.1 新增的值）
list-item此元素會作為列表顯示。
run-in此元素會根據上下文作為塊級元素或內聯元素顯示。
compactCSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。
markerCSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。
table此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
inline-table此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。
table-row-group此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column此元素會作為一個單元格列顯示（類似 <col>）
table-cell此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption此元素會作為一個表格標題顯示（類似 <caption>）
inherit規定應該從父元素繼承 display 屬性的值。
在制作下拉框的時候，會出現，下拉框的內容會遮擋住其底部的網頁鏈接，導致鼠標放在鏈接上的時候沒有效果，要解決這一問題可以：因為在制作下拉框的聯動效應的時候需要用到偽類，直接在偽類里面加上z-index就可以解決這個問題了,
? ? ? 另外，隱藏的內容和鼠標懸停的位置（讓其展現出的）需要時同級
鼠標光標設置：cursor
屬性值
值描述
url需使用的自定義光標的 URL。
注釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。
default默認光標（通常是一個箭頭）
auto默認。瀏覽器設置的光標。
crosshair光標呈現為十字線。
pointer光標呈現為指示鏈接的指針（一只手）
move此光標指示某對象可被移動。
e-resize此光標指示矩形框的邊緣可被向右（東）移動。
ne-resize此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
nw-resize此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
n-resize此光標指示矩形框的邊緣可被向上（北）移動。
se-resize此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
sw-resize此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
s-resize此光標指示矩形框的邊緣可被向下移動（南）。
w-resize此光標指示矩形框的邊緣可被向左移動（西）。
text此光標指示文本。
wait此光標指示程序正忙（通常是一只表或沙漏）。
help此光標指示可用的幫助（通常是一個問號或一個氣球）。
給div塊加邊框或者給圖片加邊框
邊框虛線樣式：dashed
邊框實現樣式：solid
border:1px dashed #000
代表設置對象邊框寬度為1px黑色虛線邊框
border:1px solid #000
代表設置對象邊框寬度為1px黑色實線邊框
去除<input><button>標簽點擊后出現的默認邊框效果，outline:none;
實現鼠標點擊后，input邊框變色的方法? ? ? .class：focus{ 1px? solid green}
