H5+CSS小結

H5常用標籤:h1,h2,h3,h4,h5,h6,div,p,ul,li,ol,dl,dt,dd,img,a,span,b,strong,i,em,sub,sup,pre,input

其中h1,h2,h3,h4,h5,h6,div,p,ul,li,ol,dl,dt,dd都屬於塊(block)級標籤,塊級標籤可以設置寬高，以及內外邊距，但是獨佔一行；img,a,span,b,strong,i,em,sub,sup,pre屬於行內(inline)標籤，行內標籤設置左右內外邊距對其他元素有影響，設置上下內外邊距對其他元素沒有影響；兩個行內元素之間會有空隙，因爲標籤之間換行造成，可以設置字體爲零；或是變成塊級元素消除，b,strong,i,em,sub,sup,del,font(一般很少用),pre在我看來應該是樣式標籤，因爲他們直接改變頁面上文字內容的樣式。

input標籤屬於行內塊（inline-block）級標籤，行內塊級元素兼顧塊級元素和行內元素特性，不會獨佔一行，但是可以設置上下左右內外邊距對其他元素有影響。

關於h5的具體樣式可以參考w3c網站：http://www.w3school.com.cn/html5/index.asp;http://www.w3school.com.cn/tags/index.asp;

樣式選擇器：再給指定標籤賦樣式時，可以通過標籤選擇器、class.類選擇器,及#id選擇器選擇指定標籤，還有組合樣式選擇器：空格是後代選擇器，+號是緊鄰兄弟選擇器，>是子代選擇器，~是普通兄弟選擇器；

具體選擇器請參考w3c:http://www.w3school.com.cn/cssref/css_selectors.asp;

img標籤屬於行內標籤，同時也是屬於替換標籤，替換標籤就是隨着外部引入內容的改變而發生顯示變化，替換元素有自己的默認寬高同時可以自定義寬高。同屬於替換標籤的還有video視頻標籤（自己百度mp4素材網：https://so.vjshi.com/229.html?auction_id=28-bd&renqun_youhua=398998），audio音頻標籤，input輸入標籤,button按鈕標籤。

img標籤一般需要設置四個屬性，也叫img標籤四要素，src,width,height,.alt。

src是外部圖片引入的路徑，可以是絕對路徑，絕對路徑就是從根路徑出發;也可以是相對路徑，相對路徑其實就是相對img標籤自身所在文件的路徑，./(點反斜槓)是當前文件位置，../是上一級文件位置，/下一級文件路徑。

width是設置引入圖片的寬度，圖片一般有自己的默認大小，就是默認寬高，一般設置寬度之後瀏覽器會自動按比例縮放高度。高度同理。不過要是高度和寬度同時設置之後，就會按設置值顯示。

alt是可替代文本提示，就是當外部引入圖片不能正常引入時，替換成文本提示，同時也是搜索引擎查找圖片的關鍵字（seo）。img應該還有另外一個屬性，就是title,當鼠標移動到圖片上時提示給用戶文本提示。具體可以參見：http://www.w3school.com.cn/tags/tag_img.asp

vedio標籤樣例：<video src='路徑' controls autoplay loop ></video> src視頻引入路徑，controls控制組件屬性，autoplay自動播放屬性，loop循環播放屬性,這個是H5標籤。具體可以參見：http://www.w3school.com.cn/tags/tag_video.asp

audio標籤樣例：<audio src='音頻路徑' controls autoplay ></audio> src音頻引入路徑，controls控制組件屬性，具體可以參見：http://www.w3school.com.cn/tags/tag_audio.asp；

a標籤是超鏈接標籤，通過href屬性可以做超鏈接基本功能之外，a標籤還有其他許多用處，用於下載文件或圖片，用於執行js代碼，用於頁面錨點跳轉，用於發送郵件，用於打電話，若是a標籤什麼也不做的話，可以設置href='#'

a標籤基本屬性有href,rel,target,download,href超鏈接屬性，rel是引入文件相對於當前文件之間的關係，rev是當前文件相對於引入文件之間的關係，target屬性是打開文件窗口目標屬性，可以是_self,_target;

超鏈接：<a href='https://www.tmall.com/' target='_target'>a鏈接到天貓</a>

下載文件或圖片樣例：

一般與圖片標籤一起使用。

執行js代碼樣例：

一般與圖片標籤一起使用。

頁面錨點跳轉：

這個網站會設計一個浮動div,設置成相對窗口絕對定位，滾動之後直接返回頂部。

電話(一般用於移動端)：<a href='tel:12345678901'>12345678901</a>

郵件：<a href='mailto:[email protected]'>[email protected]</a>

background屬性：

對於div標籤或是一些塊級標籤等可能需要給背景加上顏色，背景圖片等

background-color:是背景顏色，可以直接使用英文設置顏色，例如：red,green,blue,yellow,gren等等；也可以使用16進製表示，例如：#fff，#000，#f00,#aa1100，#abcdef等等;也可以使用rgb表示，例如：rgb(255,125,125),rgb(0,0,125)或是帶透明度的rgba(255,255,255,0.1) ，rgb的值在255和0之間，透明度a在1到0之間;

與background-color：相關的一個屬性就是background-clip，這個屬性就是定義背景樣式的覆蓋的盒子模型的範圍，其值有三個：content-box,就是內容區，就是盒子模型由高寬決定的區域，padding-box:就是包括盒子模型內邊距區域，border-box：就是整個盒子模型了，就是包括盒子模型邊框的區域。背景顏色默認是在padding-box中進行繪製的。

background-image:是背景圖片，值爲url('圖片路徑')，這個路徑同樣可以爲絕對路徑和相對路徑；與背景圖片相關的屬性有很多.

其中第一個就是background-repeat,默認值是repeat，當背景圖片的大小小於整個盒子模型範圍，背景圖片會重複之後覆蓋整個盒子模型的背景，一般會都設置成no-repeat,然後通過調整背景圖片的background-size屬性，background-position屬性，一般background-position和background-size在複合屬性background中一起使用，中間用反斜槓隔開，background-position/background-size。

background-position的值一般爲兩個，一個表示上下，一個表示左右，backgroud-position也是一個複合屬性，background-position-x，其值可以是left,center,right,或百分比，例如10%，也可以是像素值，例如50px.background-position-y，其值可以是top,center,bottom,也可以是百分比0%到100%，也可以是像素值。

background-size的值可以單值，也可以是雙值，單值可以是contain或cover,contain就是盒子模型包含背景圖片，只要背景圖片的寬或高有一點觸及盒子模型的邊界了就是包含了，cover是覆蓋，就是整個背景圖片要覆蓋盒子模型，不斷擴展，直到整張背景圖片覆蓋盒子模型的背景，不管背景圖片是否會超出盒子背景。background-size的值同樣可以是百分比0%到100%，相對於盒子模型，也可以是像素值。百分比和像素值均爲雙值，一個表示寬(x軸)，一個表示高(y軸)。若是%或是像素值設置成單個，高度就會按比例伸縮。

與背景圖片相關的另一個屬性就是background-origin：定義的背景圖片的默認覆蓋起始位置，同樣也有三個值，一個是content-box、padding-box、border-box，默認的背景圖片起始區域是padding-box;

background-attchment:是背景圖片的附着方式，一個可以是scroll，一個可以是fixed.sroll背景圖片就會隨着瀏覽器窗口滾動，可能會消失在相應的div裏面，fixed就是固定在了相應的區域中。

background的複合寫法就是：background-color background-image background-repeat background-position/background-size;例如:background:#ccc url('圖片路徑') no-repeat center center /50% 50%;一般可以使用精靈圖做背景圖片節約內存大小。

具體詳情可以參考：http://www.w3school.com.cn/cssref/pr_background.asp

字體文本樣式

字體樣式由font決定：一般最常用的就是font-size設置字體大小，字體的大小單位有px,%,em,rem。一般也都是用px像素值，谷歌瀏覽器默認字體大小爲16px,%取的是父標籤字體設置大小的%，em是父類字體大小的倍數，rem是html根標籤字體大小的倍數，可以是0.5em或是0.6rem.

font-weight是決定字體粗細的，默認值爲normal,可以設置成bold,bolder。也可以是100-700，100到500是沒有變化的，600及之後就是字體變粗了。

font-variant是設置字體變樣的，默認值爲normal,可以是small-caps.

font-family是設置特定字體的，有微軟雅黑Mircrosoft Yahei,Simsun,宋體,serif等等，可以寫中文字體樣式，可以自行百度(font-family 字體大全）尋找字體.

font-style是字體樣式，默認同樣是normal，可以設置成斜體italic.

line-height:是一個跟字體有關的屬性就是行高，一行字體行高一般設置成字體大小的倍數，在複合樣式中font-size/line-height一起使用例如font:16px/1.5，就是1.5倍字體行高。

一般color是用來設置字體顏色的。

font的複合樣式寫法爲font：font-style font-variant font-weight font-size/line-height font-family;

具體可以參考W3C:http://www.w3school.com.cn/jsref/prop_style_font.asp

文本最常用的樣式設置就是text-align是設置文本對齊方式的，可以是left,center,right,justify，左中右自適應，自適應一般就是兩頭對齊.text-indent是文字段落首行縮進的大小，可以是em,px,%，一般設置成2em就是兩個字體大小,%是相對於父級窗口大小。text-transform是文本樣式變形：可以是小寫：lowercase，大寫：uppercase,首字母大寫：capitalize.text-decoration是文本的修飾,可以是下劃線：underline,中橫線：line-through及上劃線：overline，默認值是none,a標籤的text-decoration默認值是underline,一般樣式初始化a標籤的text-decoration爲none;white-space是設置文本換行及空白的樣式：可以是正常的換行normal,也可以是不換行nowrap。當一個單體太長導致不能正常換行可以使用word-break：break-all打斷所有字母。letter-spacing是每個單詞中每個字母的間距，word-spacing是單詞與單詞之間的距離，均爲px設置。text-overflow是文本超出盒子範圍的處理方式一般設置爲ellipse;

單行文本超出省略樣式的一般設置：

overflow:hidden;white-space:nowrap;text-overflow:ellipse;

具體可以參考W3C：http://www.w3school.com.cn/jsref/dom_obj_style.asp

關於字符實體可以參考其他人的CSDN：https://blog.csdn.net/u013778905/article/details/53177042，w3c上的不是很全：http://www.w3school.com.cn/tags/html_ref_symbols.html。

vertical-align:

對於vertical-align屬性，首先要認清英文中的書寫的六條線，分別是top（行高頂端線）、text-top（文本頂端線）、middle（文本中線）、baseline（文本基線）、text-bottom（文本底端線）、bottom（行高底端線），其中middle(文本中線)就是文本中x的中心線，baseline(文本基線)就是x的底端線。如上圖。

vertical-align就是行內元素水平對齊方式，對於塊級元素不起作用，塊級元素的display設置（見上圖）爲inline或inline-block,vertical-align屬性纔會生效。vertial-align屬性可以是top（行高頂端線）、text-top（文本頂端線）、middle（文本中線）、baseline（文本基線）、text-bottom（文本底端線）、bottom（行高底端線）。也可以是%或是px,其中px是相對於基線上下移動，%是相對父元素設置的行高上下移動。

img標籤默認底端存在幽靈空白，其實就是因爲行高存在，與行內文本默認對齊方式是baseline造成的，可以在父元素（一般爲塊級元素）中明確設置行高line-height,設置font-size:0px;對於子元素行內元素或是行內塊級元素設置vertiacal-align爲非基線對齊方式。如下圖。

具體詳情可以參考W3c：http://www.w3school.com.cn/css/pr_pos_vertical-align.asp。

border-radius:圓角屬性

這個屬性是用於設置邊框圓角弧度的。可以設置成圓角，也可以設置成橢圓角。完整的設置如下：

x1 x2 x3 x4/y1 y2 y3 y4 其中x1 y1決定的左上角圓角的值。x1決定的是X軸方向的橢圓半徑的值，y1決定了y軸方向橢圓半徑的值。(x2,y2) (x3,y3) (x4,y4)同理，依次決定右上角，右下角，左下角的值。

也可以只設置X軸的值 x1 x2 x3 x4的值，這樣y軸方向的值默認與x軸方向的對應的相等。

也可以只設置一個值x 這樣四個角半徑都一樣了。

要是要畫一個圓形，可以將元素長寬設置成一樣，最後設置border-radius:50%就好了，%是元素相對於寬高的大小。可以是px單位。

參考文檔：http://www.w3school.com.cn/cssref/pr_border-radius.asp

float:浮動

理解浮動就必須先理解文檔流，文檔流就跟平時的文章寫作是一樣。就是從左往右，從上往下。塊級元素一般是獨佔一行，寫了一個就佔了一行，行內元素及行內塊級元素就是不會獨佔一行就真正的符合文檔流的規則，從上往下，從左往右，一行寫不下了再換下一行。

浮動就是不再遵循普通文檔流了，其實浮動之後，文檔流就不再是平面的了，而是立體，這也是爲什麼叫層疊樣式。這就可以把普通頁面當作一個水面，一層油浮在上面就是浮動了，水面一個面，油在水面上又是一個面。一般的東西在水面上，浮動之後就到油麪上來了，一浮動之後就把水面上的東西給蓋住了（也可能不蓋住），原先的東西在水面上還是普通文檔流從左到右，從上到下排列。浮動之後，空出來的位置就會被其他普通文檔流給佔了。

浮動之後元素會緊緊挨着前一個浮動元素或是網頁的邊框。若是一個塊級元素內有四個浮動元素，一個比一個的元素的高度低，但最後一個浮動元素的長度大到超過了本行行長，他會下來緊緊挨着第二個浮動元素，不會去挨着第一個浮動元素。當第四個浮動元素長度再變長，超過父元素長度就會繼續往前挨着前面的第一個浮動元素。浮動的所有元素還是按照從左往右，從上往下的順序排列的。

浮動對元素的影響：對父級元素造成高度塌陷(父級元素不主動設定高度的話)，浮動元素本身支持width/height/margin/padding 不支持margin:auto，默默將display設置成inline-block。

生成BFC（Block Formatting Context）環境(參考文檔：https://www.zhangxinxu.com/wordpress/tag/bfc/，https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/)，BFC（塊級格式化上下文）是一種佈局環境，display:inline-block屬性，float:left或float:right,position:absolute或position:fixed,overflow:hidden,根標籤（html標籤）。BFC環境中不會出現margin上下合併，會計算浮動元素高度（可以用來清浮動），一般給父級塊級元素設置設置成BFC環境.

脫離普通文檔流。

清除浮動:清除浮動元素可以在浮動元素後添加一個去除浮動的塊級元素,此元素需設置css樣式爲

.clearBoth{

clear:both;

}

這種添加去除浮動元素一般不常用,一般用僞元素去除浮動如下,將此樣式設置給父元素:

.clearfix:after{

content:'';

display:block;

clear:both;

}

content:屬性可以設置文字內容.僞元素默認display值爲inline,同樣可以設置寬高.

position:定位

position的值有四個，默認值爲static,其他三個就是relative、absolute、fixed .明確設置定位之後就涉及到top、left、bottom、right這四個屬性。在設置position之後就，z-index屬性纔會生效。

relative是相對定位，相對什麼定位，就是相對元素本身起始位置定位。設置top或left之後就就是偏離元素原本位置設置的值。一般top和bottom屬性不會同時出現設置，left和right屬性同理。relative不會使元素脫離文檔流，無論怎麼移動，初始的位置還是佔據的，其他元素不會侵佔position值設置爲relative元素原本的位置，如下圖，粉紅色的已經設置爲relative移動之後蓋在了藍色盒子上，至於爲什麼會蓋在上面（https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/），藍色盒子依舊還是在原來位置沒有移動去侵佔粉色盒子的位置。

absolute是絕對定位，默認是瀏覽器窗口爲其參考物。但是當父元素中或祖父元素中有明確設置position的值爲relative或absolute 或fixed的，就以最近設置position的值爲relative或absolute 或fixed的父元素或祖父元素爲參考物。即使是行內元素設置爲absolute之後也支持width/height/padding/margin，不支持margin:auto,和float元素類似不在普通文檔流中,但是定位爲absolute的元素的飄不會像float元素一樣飄到同一行，這個應該絕對定位之後，display的值跟float的display值不一樣。

fixed是固定定位，以瀏覽器窗口爲參考物。

讓盒子內元素水平垂直居中：

.box-one {

position:relative;

width:800px;

height:450px;

background-color:#000；

}

.box-one .box-two{

position:absolute;

width:300px;

height:40px;

left:0px;

right:0px;

top:0px;

bottom:0px;

margin:auto;

background-color:yellow;

}

z-index屬性決定了定位元素的層級高低，這個值只在position爲relative/absolute/fixed有效，默認值爲auto;

高級選擇器：

一開始就講了基本選擇器，一般的基本選擇器也就是標籤，類選擇器及id選擇器，及一些簡單的組合選擇器，例如空格是後代選擇器，>是子代選擇器，+號是緊跟兄弟選擇器，~是普通兄弟選擇器，逗號表示的和意思，就是並列的多選擇一種選擇器。

高級選擇器其實也就是對選擇的分類的有一個更清晰的認識，例如屬性選擇器、僞類選擇器、僞元素選擇器。

動態僞類選擇器：就是對各種的元素動作添加類樣式，有專門用於a標籤的:link,:visited,例如：a:link{}是給沒有點擊訪問過超鏈接標籤添加鏈接樣式（至於是否可以給其他標籤添加鏈接僞類樣式有待測試），a:visited{}是給已經點擊過的超鏈接標籤添加樣式（同理有待測試），：hover是給鼠標懸停在上的標籤添加樣式，:active是鼠標點擊時的元素添加樣式。具體詳見w3c（http://www.w3school.com.cn/cssref/css_selectors.ASP）

對於子代選擇器：還可以通過：:nth-child(n)或:nth-of-type(n),這兩個都是從上往下選擇，:nth-last-child(n)和nth-last-of-type(n)是從下往上選擇，n的取值可以是任意正整數,起始值爲1並非0，也可以是odd/even,或是任意表達式例如3n+1.最後一個子元素的選擇是last-child,同類最後一個子元素選擇可last-of-child;:nth-child(n)與nth-of-type(n)應該是有區別的，具體有待測試。同理詳見w3c（http://www.w3school.com.cn/cssref/css_selectors.ASP）一般需要與空格後代選擇器或>子代選擇器配合使用：nth-child和:nth-of-type前面可以沒有標籤但是需要空格或是>指明是後代還是子代。

空標籤選擇器:empty，當元素內沒有內容時選中標籤添加樣式。

反向選擇器:not(),就是除了這個之外的其他元素。

僞元素選擇器有：first-letter、:first-line、:before、:after、::selection,僞元素怎麼說也算是個元素，before與after需要content激活，::selection就是被鼠標拖拽選中的元素。僞元素選擇器不同於僞類選擇器.

屬性選擇器：一般很少用。是中括號。

css屬性編寫順序，防止迴流，減少頁面加載時間：

1.佈局定位屬性： content/display/position/float/overflower/list-style

2.自身盒子屬性: width/height/padding/margin/background/border

3.文本字體屬性： color/font-size/text-decoration/vertical-align/...

4.其他/css新增屬性 cursor/border-radius/box-shadow/text-shadow/transiton/transform...,

其中transition是設置同一個屬性變化時間。

Transform變換：

四種變換類型：平移變換（translate）、旋轉變換（rotate）、縮放變換（scale)、傾斜變換(skew),四種類型變化可以同時進行。

transform-origin屬性決定的旋轉變換、縮放變換的起始位置：取值可以是left,top,center、bottom.right以及%或px.例如：transform-orgin:left top;

平移變換:transform:translate(x,y)或transform:translateX(x) translateY(y);x,y值的單位是px或%，%是相對於自身寬高。

旋轉變換：transform:rotate(角度) 讓元素旋轉角度取值單位deg(度數一圈360度)，rad(弧度一圈2π ) grad梯度(一圈 400grad)

trun 圈數（一圈 1turn ）角度值爲正順時針，角度值爲負逆時針轉。默認的旋轉點是盒子的中心點，即transform-origin默認值是center center；等價於transform-origin：50% 50%。

伸縮變換：transform:scale(x,y) x和y可以是負值。爲負就是方向相反縮放，例如：transform:scrale(-1,-2)就是左右顛倒，上下顛倒放大高度兩倍，可以一個值設置transform:scale(x)這樣就是x和y軸相同縮放倍數。

傾斜變換：skew:(x,y) ,x y可以是角度，也可以是弧度，與收縮變換類似。

transform-orgin與background-position的區別就是默認值不同，transform-orgin的默認值是盒子的中心的，即center center.background-position的默認值是left top;

其中平移變換（translate）、旋轉變換（rotate）、縮放變換（scale)、傾斜變換(skew)可以同時賦值給tranform屬性，也就是說tranfrom可以同時設置這個四個屬性值。

配合transform-style:preserve-3d；及perspective:800px;可以製作一個3D立方體。

3D網頁基本構成：基本面（舞臺）+組成3D物體的面+視角（攝像頭）

transition:過渡

transition是設置元素屬性變化中間屬性過渡過程。transiton是個複合屬性。

transition-duration:是設置過渡的持續時間。

transiton-delay:設置過渡的延遲時間。

transition-property:指定元素的過渡屬性，當動作於元素後，有多個屬性發生變化，使用此屬性來指定過渡效果具體作用於哪個屬性上。例如當鼠標懸浮在元素上，顏色和寬度會發生變化，使用transition:width;就指定寬度這個屬性會有過渡時間及過渡延遲等過渡屬性。

transition-timing-function:是過渡時間效果屬性。其實就是一個cubic-bezier曲線圖(https://cubic-bezier.com/#1,.01,0,1),與路程時間線曲線相似。過渡時間效果屬性有幾個固定的：linear、ease-in(開始快)、ease-out（結束快）、ease-in-out,也可以是指定的貝塞爾曲線，例如：cubic-bezier(1,.01,0,1)，可以在https://cubic-bezier.com/#1,.01,0,1這個網站調試後取值。

transition是一個複合屬性：可以複合設置，複合屬性如下：transition-property transition-duration transition-delay transition-timing-function;這個屬性與background屬性相似，可以同時設置兩個，如下：
transition:width 3s 1s linear,background-color 6s 2s ease-in;

box-shadow:陰影

box-shadow:10px 10px 20px 0px black inset ；

其中第一值爲陰影的左右水平位移，第二個值爲上下水平位移，第三個值爲模糊半徑，第四個值爲陰影大小第五個值爲陰影顏色第六個值爲陰影方向，可以是inset也可以是outset,默認是往外擴。

與background屬性一致，同樣可以給一個元素設置好幾個陰影：box-shadow:0px 10px 20px 0px black inset,0px 10px 20px 0px yellow outset;

background-image:漸變

使用background-image屬性來修改背景漸變色；background-image的取值可以是：linear-gradient(deg,background-color1 percent,background-color2 percent,...),也可以是radial-gradient(position,background-color1 percent,background-color2 percent,...),這些背景漸變可以重複，所以可以取值爲repeating-linear-gradientdeg,background-color1 percent,background-color2 percent,...),也可以取值爲repeating-radial-gradient(position,background-color1 percent,background-color2 percent,...)。其中角度也可以是to top ,to right,to bottom,to left 分別對應0deg ,90deg,180deg,270deg,

線性角度（默認是180deg）變化:

css樣式：

ul > li:first-child {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(red ,green );
   }
   ul > li:nth-child(2) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(0deg,red,green);
   }
   ul > li:nth-child(3) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(90deg,red,green);
   }
   ul > li:nth-child(4) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red,green);
   }
   ul > li:nth-child(5) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(270deg,red,green);
   }
   ul > li:nth-child(6) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(360deg,red,green);
   }
   ul > li:nth-child(7) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(45deg,red,green);
   }
   ul > li:nth-child(8) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(60deg,red,green);
   }

結構：

效果：

比例變化及重複線性比例變化：

css樣式：

   ul > li:first-child {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red ,green );
   }
   ul > li:nth-child(2) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red 30%,green);
       background-size:100px 100px;

   }
   ul > li:nth-child(3) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red 30%,green);
       background-size:100px 100px;
       background-repeat:no-repeat;
   }
   ul > li:nth-child(4) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red 30%,green 30% ,black);
   }
   ul > li:nth-child(5) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red 30%,green 50% ,black 100%);
   }
   ul > li:nth-child(6) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:linear-gradient(180deg,red 30%,green 50% ,black 100%);
   }
   ul > li:nth-child(5) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:repeating-linear-gradient(180deg,red 1%,transparent 2%,transparent 9%);
   }
   ul > li:nth-child(6) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image:repeating-linear-gradient(180deg,red 0%,red 1%,transparent 1%,transparent 9%),                   repeating-linear-gradient(90deg,red 0%,red 1%,transparent 1%,transparent 9%);

}

ul > li:nth-child(7) {
       display:inline-block;
       height:200px;
       width:200px;
       border-radius:50%;
       background-image:repeating-linear-gradient(180deg,red 0%,red 1%,transparent 1%,transparent 9%),                   repeating-linear-gradient(90deg,red 0%,red 1%,transparent 1%,transparent 9%);

   }

結構：

效果：

圓形重複：

css樣式：

   ul > li:first-child {
       display:inline-block;
       height:200px;
       width:200px;
       background-image: radial-gradient(circle at center center,red ,green );
   }
   ul > li:nth-child(2) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image: radial-gradient(circle at center center,red 0%,red 5%,green 3%);
   }
   ul > li:nth-child(3) {
       display:inline-block;
       height:200px;
       width:200px;
       background-image: radial-gradient(circle at top center,red 0%,red 5%,green 3%);
   }
   ul > li:nth-child(4) {
       display:inline-block;
       height:200px;
       width:300px;
       background-image: radial-gradient(circle at 20% 20%,red 0%,red 5%,green 3%);
   }
   ul > li:nth-child(5) {
       display:inline-block;
       height:200px;
       width:300px;
       background-image: radial-gradient(ellipse at 20% 20%,red 0%,red 5%,green 3%);
   }
   ul > li:nth-child(6) {
       display:inline-block;
       height:200px;
       width:200px;
       border-radius:50%;
       background-image: repeating-radial-gradient(circle at center center,black 0%,black 1%,transparent 1%,transparent 10%);
   }

結構：

效果如下：

table:表格

table標籤應該是最早用到的標籤

最完整簡單的table表標籤應該如下

table>caption+(thead>tr>th)+(tbody>tr>td)+(tfoot>tr>td)即

一般表格用到屬性有：邊框大小：border-size:1px;邊框合併border-collapse:collapse;表格行合併及表格列合併：colspan及rowspan;border:1px solid red;

css樣式屬性繼承：

有些css屬性會默認被子孫元素繼承;

默認繼承的css屬性有：color,

font:small-caps italic bold 50px/100px 'microsoft YaHei';

text-align

text-indent;

text-transform:capitalize;(英文首字母大寫)

letter-spacing:

word-spacing;

文字屬性一般都能被繼承

a標籤不能繼承父級的color值；

其他默認不能繼承屬性需要繼承的話可以使用inherit繼承,如下：

background-color:inherit;

iframe:內聯框架

內聯框架三要素：src,name,frameborder.其中src是網址的路徑或是自己項目中或同一頁面的元素，name是給相應框架取名，用於a標籤的引用，framborder是框架邊框的大小，當值爲0時沒有邊框，當值大於0時有邊框，且邊框大小不會隨着frameborder這個屬性設置而改變。iframe內聯框架元素可以通過css樣式設置寬高。

一般通過a標籤與frame標籤聯用，在指定內聯框架中打開相應資源。例如：<a href='資源路徑' target='myframe'></a> <iframe src='資源路徑' name="myframe" frameborder="0"></iframe>，其中myframe就是iframe內聯框架的名稱。

form:表單元素

<form name ="" action="" method=""></form>,其中name是表單的名字，action表單數據提交的地址，method是表單提交數據的方式,表單域的一般展現形式是block。詳情可以參考：https://www.w3school.com.cn/tags/tag_form.asp

表單域中一般都是input輸入域，input輸入域中通過type屬性區分輸入類型。一般最常用的是文本輸入框即type值爲text,也可以是密碼輸入框password,可以爲單選輸入框radio,也可以是多選輸入框checkbox,也可以是提交submit或重置reset按鈕,或是文件上傳按鈕type="file"。詳情可以參考https://www.w3school.com.cn/html5/tag_input.asp，input標籤中的placeholder屬性可以在輸入框中沒有輸入時進行輸入提示,當輸入元素被focus時，會有默認的outline屬性被瀏覽器默認賦值。其中label標籤作爲input標籤單選和多選標籤的備註，需要將for屬性的值設置爲input標籤的id值.。

textarea標籤可以通過在css中設置resize屬性來控制是否可以拉伸，resize的值可以是both（水平或垂直都可以拉伸），none(水平或垂直都不可以拉伸)，vertical(垂直可以拉伸)，horizontal(水平可以拉伸),詳情可以參考https://www.w3school.com.cn/tags/tag_textarea.asp

fieldset標籤就是將幾個字段組合成一個字段集元素，一般與legend標籤連用,legend標籤用於說明這個字段集。

css樣式：

  textarea{
       resize:vertical;
   }

   input:checked{
       box-shadow:0px 0px 3px 0px blue inset,3px 3px 3px 0px red inset;
   }
   input:checked+label{
       border-radius:5px;
       background-color:yellow;
       box-shadow:0px 0px 3px 0px blue inset,3px 3px 3px 0px red inset;
   }
   input:focus{
       background-color:#ccffff;
   }

結構：

background屬性：

對於div標籤或是一些塊級標籤等可能需要給背景加上顏色，背景圖片等

字體文本樣式

border-radius:圓角屬性

float:浮動

position:定位

高級選擇器：

css屬性編寫順序，防止迴流，減少頁面加載時間：

Transform變換：

transition:過渡

box-shadow:陰影

background-image:漸變

table:表格

css樣式屬性繼承：

iframe:內聯框架

form:表單元素

H5+CSS小結

namenode沒有起來datanode沒有起來

mysql客戶端navicate註釋sql語句

Java基礎知識夯實day10:EL表達式

杭州富陽科目三：考試筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結