摘要:標(biāo)簽大集合語(yǔ)義化標(biāo)簽頁(yè)面內(nèi)錨點(diǎn)我跳跳到這里來(lái)可用于回到頂部功能。表格中表示行,和表示列。當(dāng)超出時(shí)會(huì)自動(dòng)換行。屬性清除浮動(dòng)通用方案實(shí)際上是添加了一個(gè)看不見(jiàn)的點(diǎn)號(hào)。
1.
里的 一定要放在第一行 ,如果放在了
我跳! ...跳到這里來(lái)!
可用于“回到頂部”功能。
5.標(biāo)簽一般要求寫(xiě)上alt屬性6.HTML5中可以用標(biāo)簽插入視頻,用標(biāo)簽插入音頻
7.總記不住row表示行,column表示列。表格中tr表示行(table row),th和td(table data cell)表示列。
8.語(yǔ)義化的好處(1)SEO(Search Engine Optimization)搜索引擎優(yōu)化
(2)提高可訪問(wèn)性,使盲人使用屏幕閱讀器更好的訪問(wèn)。
(3)提高代碼可讀性,便于多人修改維護(hù),提高開(kāi)發(fā)效率。
> < ...
10.css引入
11.屬性選擇器偽類選擇器: 一個(gè)冒號(hào)right
//css [disabled] { ... } input[type="text"] { ... } //屬性值不加雙引號(hào)也可以哎 [type=text] { ... } //關(guān)于是否需要使用引號(hào):當(dāng)屬性值包含空格或者有特殊符號(hào)時(shí),必須要使用引號(hào) [class^="section"] { ... } //這樣可以選中以class屬性以"section"開(kāi)頭的元素,即上面的input 和 p
12.a標(biāo)簽上的偽類選擇器順序從上到下不能變:link visited hover active
13.li:nth-child(even) { ... } 或 li:nth-child(2n) { ... } 選中偶數(shù)項(xiàng)li元素
14.:not(p) 不包含p元素。
:not(.class-a) 不包含class值有class-a的元素。
15.::first-letter { ... } 第一個(gè)字母或漢字
16.::first-line { ... } 第一行
17.::before 和 ::after
p::before{ content: "before"; }//在元素前添加內(nèi)容 p::after{ content: "after"; }//在元素后添加內(nèi)容
18.::selection{ ... } 應(yīng)用于被用戶選中的內(nèi)容的樣式
19.兄弟選擇器 h1+p { ... } 選中h1后面同級(jí)的緊鄰著的一個(gè)p元素
20.多個(gè)兄弟選擇器 h1~p { ... } 選中h1后面同級(jí)的所有p元素,不需要緊鄰著
21.繼承屬性:color , font , text-align , list-style
22.非繼承屬性:background , border , position
如何從文檔中知道當(dāng)前屬性是否可以繼承?文檔中Inherited為yes即為可以繼承。
23.選擇器優(yōu)先級(jí)
https://jsfiddle.net/DarcyAn/... 奇怪,這個(gè)咋是偽元素選擇器優(yōu)先級(jí)比偽類的高呢?
注意偽類與類優(yōu)先級(jí)相同,偽元素與標(biāo)簽優(yōu)先級(jí)相同。
24.優(yōu)先級(jí)最高: p { color: red !important; }
CSS文本25.font屬性至少要設(shè)置font-size 和 font-family.
26.text-indent屬性原本用于設(shè)置首行縮進(jìn),一般設(shè)置為2em,也可設(shè)置負(fù)值然后配合overflow: hidden;來(lái)達(dá)到隱藏文本的效果。
27.white-space:
nowrap不換行。
pre 完完整整保留了tab和空格,超出時(shí)也不會(huì)換行。
pre-wrap 保留了tab和空格。當(dāng)超出時(shí)會(huì)自動(dòng)換行。
28.word-wrap: break-word; 長(zhǎng)單詞超出時(shí)換行。屬性名現(xiàn)由word-wrap改為overflow-wrap。
29.text-shadow: 1px 2px pink; 文字陰影:x軸偏移 y軸偏移 [陰影模糊半徑]? [顏色]?。
30.text-overflow: clip | ellipsis;
一定要配合 overflow: hidden; white-space: nowrap; 同時(shí)服用。
盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline
31.margin合并(1)相鄰元素的margin會(huì)合并
(2)父元素與子元素的margin會(huì)合并。(前提是父子元素之間沒(méi)有padding、border和其他元素)
MDN外邊距合并
圓角的水平半徑是寬度的50%,垂直半徑是高度的50%,所以是一個(gè)圓。
33.box-shadow: 4px 4px 3px 3px red可以只設(shè)置前兩個(gè)值.
還可以設(shè)置 inset 內(nèi)陰影,以及多陰影(用逗號(hào)隔開(kāi)即可)。
CSS背景34.background-attachment: scroll | local ; 設(shè)置當(dāng)內(nèi)容滾動(dòng)時(shí),背景圖片的狀態(tài)。
scroll: 背景圖不動(dòng)。
local: 背景圖隨與內(nèi)容一起滾動(dòng)。
35.background-position: 20% 50%; 設(shè)置為百分比的值要特別注意。
上述語(yǔ)句意思是:x軸上圖片的20%在容器的20%的位置,y軸上圖片的50%在容器的50%的位置,看圖:
如果這樣設(shè)置:background-position: 50% 50%;, 就居中了。也等于background-position: center center;
可以設(shè)置負(fù)值,這在sprite雪碧圖中經(jīng)常用到。
36.線性漸變 linear-gradient() 可以用來(lái)畫(huà)出漸變背景。
background: linear-gradient(to bottom, white,black);
向下漸變
37.background縮寫(xiě): position與 size 之間要加 / 不然會(huì)沖突。
CSS布局布局簡(jiǎn)介、display(水平居中、居中導(dǎo)航)、position(輪播頭圖、固定頂欄、遮罩、三行自適應(yīng)布局)、float(兩列布局)、flex(三行兩列自適應(yīng))
38.position定位,如果同時(shí)設(shè)置top和bottom,那么元素會(huì)被撐開(kāi)變大。
39.z-index 存在一個(gè)棧的概念。
紅色元素的父元素z-index 為 9 ,藍(lán)色元素的z-index為1,所以雖然藍(lán)色元素z-index為100大于紅色的1,但是因?yàn)榧t色的參照物的z-index高,所以紅色還是在藍(lán)色上面。相當(dāng)于兩副撲克牌上下疊加,下面那一副撲克牌不管內(nèi)部怎樣調(diào)整,都無(wú)法跑到上面那副撲克牌上面。
40.position: relative; 參照物為元素本身,最常用的使用場(chǎng)景為絕對(duì)定位元素的參照物(=?ω?)?
41.position: absolute; 默認(rèn)寬度是內(nèi)容寬度,脫離文檔流。
42.position: fixed; 常用場(chǎng)景:遮罩mask。
43.clear屬性清除浮動(dòng)通用方案:.clearfix:after{ ... } 實(shí)際上是添加了一個(gè)看不見(jiàn)的點(diǎn)號(hào)。
主要代碼:
.clearfix: after { content: "."; display: block; clear: both; //到這為止的前三條是用于清除浮動(dòng):設(shè)置了clear:both的塊級(jí)元素可以清除浮動(dòng) height: 0; overflow: hidden; visibility: hidden; //后面三條是為了讓點(diǎn)號(hào)不可見(jiàn) }
將clearfix這個(gè)class添加到浮動(dòng)元素的父元素上,就清除了因?yàn)樽釉馗?dòng)縮成一條的父元素的影響,完整代碼見(jiàn):
jsfiddle栗子
44.flex布局 實(shí)現(xiàn)三行自適應(yīng)+兩列自適應(yīng)
東西略多,放到這里了:
https://segmentfault.com/a/11...
45.transform: translate(20%,20%); 移動(dòng)。這里的20%參照物是本元素的寬和高
46.transform: skew(30deg); 傾斜。
y軸負(fù)方向 向 x軸正方向傾斜, x軸正方向 向 y軸負(fù)方向傾斜。
一張相當(dāng)直觀的圖在這里:
47.transform: translate(100px) rotate(45deg); 先移動(dòng),再旋轉(zhuǎn)。
與 先旋轉(zhuǎn),再移動(dòng):transform: rotate(45deg) translate(100px); 效果是不一樣的。
因?yàn)?strong>旋轉(zhuǎn)后,x軸與y軸方向已經(jīng)發(fā)生了變化。
48.transition語(yǔ)法:
transition:[, ]; //可包含多個(gè)動(dòng)畫(huà) //每個(gè)動(dòng)畫(huà)的變化 :
eg1:transition: color 2s ease 3s, left 2s;
eg2:transition: 2s; 等價(jià)于 transition: all 2s ease 0;
49.animation 與 transition區(qū)別:
(1)transition需要hover或click或js去觸發(fā),而animation是自動(dòng)運(yùn)行的。
(2)animation可以做多幀動(dòng)畫(huà)。
50.animation語(yǔ)法:
animation:[, ] //每個(gè)動(dòng)畫(huà)包含: : ; @-webkit-keyframes abc { 0%{ left:0; top: 0;} 50%{ left: 250px; top: 100px; } 100%{ left: 500px; top: 0; } } // 0% 等價(jià)于 from , 100% 等價(jià)于 to @-webkit-keyframes flash { //閃動(dòng)效果 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.1; } }
eg1: animation: abc 2s ease 0s infinite reverse both running;
eg1: animation: abc 2s, abcd 2s both;
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/50680.html
摘要:標(biāo)簽大集合語(yǔ)義化標(biāo)簽頁(yè)面內(nèi)錨點(diǎn)我跳跳到這里來(lái)可用于回到頂部功能。表格中表示行,和表示列。當(dāng)超出時(shí)會(huì)自動(dòng)換行。屬性清除浮動(dòng)通用方案實(shí)際上是添加了一個(gè)看不見(jiàn)的點(diǎn)號(hào)。 1. 里的 一定要放在第一行 ,如果放在了下面可能會(huì)有問(wèn)題。 2.標(biāo)簽大集合 showImg(https://segmentfault.com/img/bVMaUw?w=1366&h=767); 3.HTML5語(yǔ)義化標(biāo)簽...
摘要:面試如何防騙一份優(yōu)秀的前端開(kāi)發(fā)工程師簡(jiǎn)歷是怎么樣的作為,有哪些一般人我都告訴他,但是他都不聽(tīng)的忠告如何面試前端工程師 更多資源請(qǐng)Star:https://github.com/maidishike... 文章轉(zhuǎn)自:https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...
摘要:但是,從字體上來(lái)說(shuō)雪碧圖制作,使用以及相關(guān),圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下,回滾到舊版本的,保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng),但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題:怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候,看到 ...
摘要:但是,從字體上來(lái)說(shuō)雪碧圖制作,使用以及相關(guān),圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下,回滾到舊版本的,保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng),但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題:怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候,看到 ...
摘要:前言月份開(kāi)始出沒(méi)社區(qū),現(xiàn)在差不多月了,按照工作的說(shuō)法,就是差不多過(guò)了三個(gè)月的試用期,準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō),差不多到了轉(zhuǎn)正的時(shí)候,會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客,博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū),現(xiàn)在差不多9月了,按照工作的說(shuō)法,就是差不多過(guò)了三個(gè)月的試用期,準(zhǔn)備轉(zhuǎn)正了!一般來(lái)說(shuō),差不多到了轉(zhuǎn)正的時(shí)候,會(huì)進(jìn)行總結(jié)或者分享會(huì)議!那么今天我就...
閱讀 1972·2019-08-30 15:54
閱讀 3596·2019-08-29 13:07
閱讀 3124·2019-08-29 12:39
閱讀 1789·2019-08-26 12:13
閱讀 1547·2019-08-23 18:31
閱讀 2159·2019-08-23 18:05
閱讀 1844·2019-08-23 18:00
閱讀 1043·2019-08-23 17:15