最后一篇總結(jié)啦，才發(fā)現(xiàn)分享到微信的鏈接會(huì)掛条获，不知道為啥茅姜，顯示有誘導(dǎo)信息啥的，誘導(dǎo)什么月匣？學(xué)習(xí)嗎？[Doge]

總之還是要有始有終～確定js的總結(jié)不會(huì)再使用這個(gè)平臺(tái)啦奋姿，GitHub見锄开，嘻嘻～

這篇總結(jié)內(nèi)容包括背景、表格和表單称诗、定位以及響應(yīng)式設(shè)計(jì)萍悴。

1.背景

背景相關(guān)的樣式用的比較多，在css3前添加陰影效果可以用背景相關(guān)屬性加上定位顯示出來(lái)寓免，圓角就只能是一開始切圖設(shè)計(jì)稿為圓角癣诱，作為圖片或者背景圖片顯示，基于此新增添的陰影和圓角功能也總結(jié)在背景相關(guān)屬性中袜香。

background-color

background-image

background-repeat

background-position

background-attachment

background-clip

background-origin

background-size:設(shè)置背景圖片大小

background （簡(jiǎn)寫屬性）

（1）background-color? 用以設(shè)置背景顏色撕予，寫rgb值和十六進(jìn)制值都可以。

（2）background-image?來(lái)設(shè)置背景圖和背景漸變色蜈首，可選值：

1）background-image：url(xx.jpg) 使用相對(duì)路徑引入圖片

-如果背景圖片大于元素大小实抡，則圖片默認(rèn)會(huì)顯示左上角的部分

-如果背景圖片小于元素大小，則會(huì)默認(rèn)平鋪圖片充滿元素

-可以同時(shí)設(shè)置背景顏色和背景圖片欢策，背景顏色作為圖片的底色吆寨，一般都會(huì)同時(shí)設(shè)置，圖片沒加載出時(shí)顯示顏色

2）linear-gradient（color1踩寇，color2啄清，color3...）?

線性漸變默認(rèn)從上至下，在顏色前加上方向可以指定漸變的方向俺孙，指定角度可以改變漸變角度辣卒，例子：

background-image:linear-gradient（to right, red, yellow） 漸變就會(huì)從左到右，從紅色漸變?yōu)辄S色

background-image:linear-gradient（45deg, red, yellow） 漸變從紅色漸變?yōu)辄S色,方向旋轉(zhuǎn)45度

漸變可以同時(shí)指定多個(gè)顏色睛榄，多個(gè)顏色默認(rèn)情況下平均分布添寺，也可以指定開始漸變的位置，例子：

background-image：linear-gradient（red 50px懈费，yellow? 100px）?

表示50px以上的位置是紅色純色计露，從50px以下位置開始向黃色漸變到100px位置，之后是黃色純色

3）repeating-linear-gradient 可以平鋪線性漸變，按指定數(shù)值的差值重復(fù)

4）background-image：radial-gradient（color1票罐，color2叉趣，color3...）

徑向漸變，默認(rèn)情況下该押，徑向漸變形狀根據(jù)元素的形狀來(lái)計(jì)算的疗杉，在元素中心開始徑向漸變〔侠瘢可以手動(dòng)指定徑向漸變的大醒叹摺；也可以指定徑向開始的位置

例子：

background-image：radial-gradient（100px 100px奠蹬， red朝聋，? yellow ）

表示徑向漸變大小是100*100px，其余空間則顯示黃色

background-image：radial-gradient（100px 100px at 0 0, red,? yellow ）

at 后面可以指定位置囤躁，表示徑向漸變開始的位置冀痕，大小也可以不寫，直接at后寫位置

5）repeating-radial-gradient 可以指定重復(fù)的徑向漸變

（3）background-repeat??來(lái)設(shè)置背景圖像的重復(fù)方式狸演，可選值：

-repeat 默認(rèn)值言蛇，背景圖片會(huì)雙方向重復(fù)

-no-repeat 不重復(fù)背景圖片，有多大顯示多大

-repeat-x 水平方向重復(fù)

-repeat-y 垂直方向重復(fù)

（4）background-position?調(diào)整背景圖片位置宵距，可選值：

-top right left bottom center 可以用這些中的兩個(gè)值來(lái)指定位置腊尚，

如 background-position：bottom center

-如果只給出一個(gè)值，則第二個(gè)值默認(rèn)為center

-也可以直接指定兩個(gè)偏移量：

第一個(gè)是水平偏移量满哪，第二個(gè)是垂直偏移量,正值就是向右或向下跟伏，負(fù)值則是向左或向上

如：background-position：100px 0px

（5）background-attachment 用來(lái)設(shè)置圖片是否隨著頁(yè)面滾動(dòng)而滾動(dòng)，可選值：

-scroll 默認(rèn)值翩瓜，會(huì)隨著頁(yè)面滾動(dòng)

-fixed 背景圖片會(huì)固定在某個(gè)位置受扳，不隨頁(yè)面滾動(dòng) 背景圖片相對(duì)于瀏覽器的窗口不動(dòng)，一般設(shè)置給body兔跌，如果設(shè)置給其他元素設(shè)置的話勘高，當(dāng)頁(yè)面滾動(dòng)到這個(gè)元素結(jié)束時(shí)，圖片會(huì)隨著它一起結(jié)束

（6）background-clip?設(shè)置背景范圍坟桅，可選值：

-border-box 默認(rèn)值华望，背景會(huì)出現(xiàn)在邊框下邊

-padding-box 背景只會(huì)出現(xiàn)在內(nèi)容區(qū)

（7）background-origin?背景圖片定位的偏移量計(jì)算的定位原點(diǎn)，可選值：

-padding-box 默認(rèn)值 從內(nèi)邊距開始計(jì)算

-content-box 從內(nèi)容區(qū)處計(jì)算

-border-box 從邊框處計(jì)算

（8）background-size?設(shè)置背景圖片大小

-直接寫值仅乓，兩個(gè)值指定寬高

-寫一個(gè)值赖舟，第二個(gè)默認(rèn)是auto，等比變化

-寫百分?jǐn)?shù)夸楣，第二個(gè)值auto宾抓，橫向/縱向撐滿

-cover子漩，比例不變將元素鋪滿

-contain 比例不變，圖片在元素中完整顯示

（9）background （簡(jiǎn)寫屬性）

background所有相關(guān)屬性都可以用其設(shè)置石洗，無(wú)順序數(shù)量要求幢泼，但是：

background-size必須寫在background-position后，用斜杠隔開 center center/contain

background-clip必須在background-origin后

（10）輪廓陰影和圓角屬性

1）outline 用來(lái)設(shè)置輪廓線讲衫，用法和border一樣缕棵，但是不會(huì)影響奧可見框大小不會(huì)影響整個(gè)布局，一般用在設(shè)置移入狀態(tài)hover

2）box-shadow：x偏移量 y偏移量? 陰影模糊半徑 顏色rgba

設(shè)置的陰影不會(huì)影響頁(yè)面布局

3）border-radius? ?設(shè)置圓角

border-top-left-radius? ? ? ? ? 左上圓角

border-top-right-radius? ? ? ? 右上圓角

border-bottom-left-radius? ? 左下圓角

border-bottom-right-radius? 右下圓角

-指定一個(gè)值是圓角涉兽，指定一對(duì)值是橢圓招驴，第一個(gè)是水平方向，第二個(gè)是垂直：

border-radius：20px / 40px 橢圓

-指定四個(gè)值就是順時(shí)針指定圓角枷畏；三個(gè)值 左上 右上&左下 右下别厘；兩個(gè)值 左上&右下 右上&左下

-border-radius:50% 變?yōu)閳A形

2.表格和表單

（1）表格

1）table，使用table標(biāo)簽創(chuàng)建表格矿辽，默認(rèn)沒有邊框

-在table中使用tr表示表格中的一行，td表示一個(gè)單元格

-語(yǔ)法：

<table>

? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? <td></td>

? ? ? ? ? </tr>

</table>

-td里可以嵌套table

2）colspan郭厌，使用colspan來(lái)合并橫向單元格袋倔，賦予給需要合并的一個(gè)td，且要把多余單元格刪除

-語(yǔ)法：<td colspan="n">? n表示這一個(gè)單元格要占幾個(gè)位置（加上本身合并了幾個(gè)）

3）rowspan折柠，使用rowspan來(lái)設(shè)置縱向的單元格宾娜，賦予給需要合并的一個(gè)td，且得把多余單元格刪除

4）表格樣式

①border-spacing 屬性可以設(shè)置table和td間的距離扇售，table和td間間是有個(gè)默認(rèn)距離的

②border-collapse 屬性可以用來(lái)設(shè)置表個(gè)邊框合并前塔，可選值：collapse

-設(shè)置這個(gè)屬性則border-spacing自動(dòng)失效

可以為table設(shè)置border-collapse屬性，再為td單獨(dú)設(shè)置邊框

5）長(zhǎng)表格

有一些情況下表格很長(zhǎng)承冰，這是html提供三個(gè)標(biāo)簽將表格分為三個(gè)部分：表頭华弓，主題，底部

thead 表頭永遠(yuǎn)顯示在表格頭部困乒；tbody 表格主體永遠(yuǎn)顯示在表格中間寂屏；tfoot 表格底部遠(yuǎn)顯示在表格底部：

<table>

? ? ? ? ? ? ? <thead>

? ? ? ? ? ? ? ? ? ? <tr></tr>

? ? ? ? ? ? ? ? ? ? <tr></tr>

? ? ? ? ? ? ? </thead>

? ? ? ? ? ? ? ? <tbody

? ? ? ? ? ? ? ? ? ? <tr></tr>

? ? ? ? ? ? ? ? ? ? <tr></tr>

? ? ? ? ? ? ? </tbody>

? ? ? ? ? ? ? <tfoot>

? ? ? ? ? ? ? ? ? ? <tr></tr>

? ? ? ? ? ? ? ? ? ? <tr></tr>

? ? ? ? ? ? ? </tfoot>

</table>

（2）表單

網(wǎng)頁(yè)中的表單是用來(lái)向服務(wù)器提交信息的，最常用的就是baidu搜索框娜搂。

首先使用form 標(biāo)簽創(chuàng)建一個(gè)表單迁霎，必有屬性action，該屬性指向的是信息提交給何處服務(wù)器的地址百宇，語(yǔ)法：

<form action=“”> </form>

?這時(shí)創(chuàng)建的是個(gè)空白表單考廉，還需要添加不同的表單項(xiàng)，寫在form標(biāo)簽里：

1）input 用input自結(jié)束標(biāo)簽携御，修改type值可以創(chuàng)建表單項(xiàng)：

①text 屬性用來(lái)創(chuàng)建文本框昌粤，要提交表單的內(nèi)容同時(shí)必須指定一個(gè)name屬性既绕，name表示提交內(nèi)容的名稱，用戶填寫的信息會(huì)附在URL地址后以查詢字符串的形式發(fā)送給服務(wù)器 ：url地址婚苹？查詢字符串

<form action=“”>?

? ? ? ? ? ? <input type=“text”? name=“” / >

? ? ? ? ? ? ?<input type=submit? value=“提交” / >

</form>

②submit 屬性用來(lái)創(chuàng)建提交按鈕岸更，value 屬性可以修改按鈕的文字

?<form action=“”>?

? ? ? <input type=submit? value=“提交” / >

</form>

③password 屬性可以來(lái)創(chuàng)建密碼也必須指定name屬性值。

④radio 創(chuàng)建單選按鈕膊升，單選按鈕通過name屬性進(jìn)行分組怎炊，name屬性相同的是一組，

-這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項(xiàng)廓译，還必須指定一個(gè)value屬性评肆，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器

⑤checkbox 創(chuàng)建多選框，同樣name值相同表示同一組非区，用value值指定值提交給服務(wù)器

⑥r(nóng)eset 設(shè)置重置按鈕瓜挽，表單所有內(nèi)容恢復(fù)為默認(rèn)值

⑦button 設(shè)置button屬性可以用來(lái)創(chuàng)建一個(gè)單純的按鈕，結(jié)合js一起用

⑧color? 設(shè)置后可以在瀏覽器中選擇顏色

⑨autocomplete 可以設(shè)置自動(dòng)補(bǔ)全征绸，autocomplete=“on”開啟自動(dòng)補(bǔ)全

⑩ readonly 設(shè)置為只讀久橙，數(shù)據(jù)會(huì)提交

?disabled 設(shè)置為禁用，數(shù)據(jù)不會(huì)提交

?autofocus 設(shè)置表單項(xiàng)自動(dòng)獲取焦點(diǎn)

2）select標(biāo)簽創(chuàng)建下拉列表管怠，使用option標(biāo)簽來(lái)創(chuàng)建一個(gè)個(gè)列表項(xiàng)：

-name屬性需要指定給select標(biāo)簽

-value屬性需要指定給option標(biāo)簽淆衷，表示提交給服務(wù)器的數(shù)據(jù)

-multiple 設(shè)置該屬性下拉列表可以變?yōu)槎噙x的下拉列表

-outgroup 標(biāo)簽可以將下拉列表中的列表項(xiàng)分組，使用label屬性來(lái)設(shè)定分組的名字

-selected設(shè)置該屬性渤弛，則默認(rèn)選擇下拉列表中的某一項(xiàng)

語(yǔ)法：

<select name="">

? ? ? <option value="">選項(xiàng)一</value>

? ? ? <option value="">選項(xiàng)二</value>

? ? ? ?<option selected value="">選項(xiàng)三</value>

</select >

3）textarea文本域 創(chuàng)建多行文本框

同樣需指定name屬性

css里使用resize屬性設(shè)置文本域不能調(diào)整大小祝拯，值選擇none，resize：none

4）button標(biāo)簽她肯，可選type值：

-submit

-reset

-button

和input的三種type值作用相同佳头，但button標(biāo)簽不是自結(jié)束標(biāo)簽，更靈活（按鈕可以以圖片形式存在）晴氨，更推薦使用

3.定位

position康嘉，定位屬性，可選值

（1）static?默認(rèn)值籽前，元素沒有開啟定位

（2）relative? 相對(duì)自身原本位置開啟元素的相對(duì)定位

-設(shè)置了相對(duì)定位的元素不會(huì)脫離文檔流

-相對(duì)定位會(huì)使元素提升一個(gè)層級(jí)

-當(dāng)開啟了元素定位時(shí)凄鼻，必須設(shè)置偏移量

-可以通過left right top bottom四個(gè)屬性來(lái)設(shè)置元素偏移量

left：元素相對(duì)于其定位位置的左側(cè)偏移量

right：元素相對(duì)于其定位位置的右側(cè)偏移量

top：元素相對(duì)于其定位位置的上側(cè)偏移量

bottom：元素相對(duì)于其定位位置的下側(cè)偏移量

-相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)，塊元素還是塊元素聚假，內(nèi)聯(lián)元素還是內(nèi)聯(lián)元素

（3）sticky 粘滯定位块蚌，滾動(dòng)條到一定位置開啟了的元素固定不動(dòng)

{position：sticky；

top:n px;}

（4）absolute 開啟元素絕對(duì)定位膘格，

-開啟絕對(duì)定位會(huì)使元素脫離文檔流

-開啟絕對(duì)定位后如果不設(shè)置偏移量峭范，則元素位置不會(huì)發(fā)生變化

top：元素相對(duì)于其定位位置的上側(cè)偏移量

left：元素相對(duì)于其定位位置的左側(cè)偏移量

right：元素相對(duì)于其定位位置的右側(cè)偏移量

bottom：元素相對(duì)于其定位位置的下側(cè)偏移量

-絕對(duì)定位也會(huì)使元素提升一個(gè)層級(jí)

-絕對(duì)定位會(huì)改變?cè)匦再|(zhì)，內(nèi)聯(lián)元素變成塊元素瘪贱，塊元素的寬度高度默認(rèn)被內(nèi)容撐開

-位置偏移相對(duì)于離他最近的開啟了定位的祖先元素：一般情況下纱控，開啟了子元素的絕對(duì)定位都會(huì)開啟父元素的相對(duì)定位辆毡。如果所有祖先元素都沒有開啟定位，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位

當(dāng)父元素開啟relative甜害，子元素開啟absolute舶掖，可以：

position：absolute；

left：0尔店；

right：0眨攘；

top：0；

bottom：0嚣州；

margin:auto;

使子元素水平垂直居中于父元素

（5）fixed 開啟元素的固定定位（也是絕對(duì)定位的一種）

-開啟固定位置fixed會(huì)使元素脫離文檔流

-固定定位也是一種絕對(duì)定位鲫售，大部分特點(diǎn)都和絕對(duì)定位一樣，不同的是固定定位永遠(yuǎn)是相對(duì)于瀏覽器窗口來(lái)定位的

-固定定位會(huì)固定在瀏覽器窗口某個(gè)位置该肴，不會(huì)隨滾動(dòng)條滾動(dòng)

（6）z-index 元素層級(jí)

對(duì)于開啟了position的元素情竹，用z-index可以修改元素層級(jí)，直接寫整數(shù)匀哄，數(shù)值越高層級(jí)越高秦效，但是父元素層級(jí)再高，也不會(huì)蓋住子元素

4.響應(yīng)式布局

網(wǎng)頁(yè)可以通過不同設(shè)備或窗口大小呈現(xiàn)出不同的效果涎嚼，使用響應(yīng)式布局阱州，可以是一個(gè)網(wǎng)頁(yè)適用于所有的設(shè)備。

響應(yīng)式布局關(guān)鍵是媒體查詢铸抑，通過媒體查詢可以為不同的設(shè)備贡耽，或設(shè)備的不同能力分別設(shè)置樣式

媒體查詢舱禽，語(yǔ)法：

@media查詢規(guī)則{}

（1）媒體類型：

all 所有媒體類型

print 打印設(shè)備

screen 帶屏幕的設(shè)備

speech 屏幕閱讀器

例子：

@media print{background-color:#bfa}

表示打印出來(lái)的背景顏色是#bfa

使用逗號(hào)鏈接多個(gè)媒體類型挂疆，這樣它們之間就是或的關(guān)系

@media? only print{background-color:#bfa}

添加only萧芙，避免老版本瀏覽器出現(xiàn)兼容性問題，新版本加不加效果一致刁憋，老版本會(huì)忽略以避免出現(xiàn)問題

（2）媒體特性：

width 視口寬度

height 視口高度

min-width 最小寬度

max-width 最大寬度

針對(duì)特定視口寬度設(shè)置樣式

例子：

@media（min-width：500px）

? ? body{background-color:#bfa}

表示當(dāng)視口大于500px時(shí)樣式生效

樣式切換的分界點(diǎn)，叫斷點(diǎn)木蹬，網(wǎng)頁(yè)樣式會(huì)在這個(gè)點(diǎn)時(shí)發(fā)生變化至耻，一般比較常用的斷點(diǎn)，常用斷點(diǎn)：

小于768 超小屏幕 max-width=768px

大于768 小屏幕? min-width=768px

大于992 中型屏幕 min-width=992px? (pad屏幕）

大于1200 大屏幕 min-width=1200px

例子：

@media only screen and（min-width：500px）镊叁，（max-width：300px

? ? body{background-color:#bfa}

當(dāng)視口大于500px或小于300px尘颓，時(shí)樣式生效

@media only screen and（min-width：500px）and（max-width：700px

? ? body{background-color:#bfa}

當(dāng)視口大于500px小于700px，時(shí)樣式生效

撒花撒花??晦譬，寫完啦疤苹！

寫在后面：

到現(xiàn)在差不多學(xué)了有一個(gè)月的時(shí)間，感覺給自己定下一個(gè)學(xué)習(xí)目標(biāo)是很愉快的事敛腌，學(xué)習(xí)前期每天感覺非常充實(shí)卧土，到后面有些焦慮惫皱，也懷疑過我一個(gè)設(shè)計(jì)師學(xué)這個(gè)有用嗎，更專注于專業(yè)不好嗎尤莺？

但只是為了有始有終旅敷，不讓之前的付出白白浪費(fèi)，我也該學(xué)完它颤霎。且抓住最后的學(xué)生時(shí)期學(xué)些新內(nèi)容不是很好嘛媳谁？

話又說(shuō)回來(lái)，不管它在今后的工作中到底能發(fā)揮多大作用捷绑，我都認(rèn)為是很值得的韩脑。

一方面，學(xué)習(xí)這些本身是愉快的粹污，所謂的“所敲即所得”段多，學(xué)一節(jié)課的成果都能很清楚的反饋出來(lái)，比較有成就感壮吩，這個(gè)本身也使我產(chǎn)生了興趣进苍。僅僅學(xué)完這些基本內(nèi)容，我也可以自信的說(shuō)能敲出一般的靜態(tài)網(wǎng)頁(yè)了鸭叙。

另一方面觉啊，盡管我的工作經(jīng)驗(yàn)不夠豐富，但我能感覺到沈贝，有了這些基本知識(shí)在與前端工程師溝通時(shí)杠人，包括做自己份內(nèi)工作時(shí)都會(huì)起到積極的作用，良好的溝通能使團(tuán)隊(duì)協(xié)作更加高效宋下，氛圍更加愉悅嗡善，從更深層次說(shuō)也許能建立一個(gè)更有利的專業(yè)形象提升話語(yǔ)權(quán)也說(shuō)不定。以前常聽說(shuō)懂些工作上對(duì)接方的知識(shí)方便“battle”学歧，也許從一開始的認(rèn)知就把彼此置于對(duì)立面了吧罩引，但大家都是為一個(gè)項(xiàng)目的話，更有效的溝通不是更好嗎枝笨？就當(dāng)是我美好的心愿吧袁铐，hhhh~