關於CSS與HTML知識點總結（二）
HTML知識點整理
- 置換元素：瀏覽器根據標籤和屬性來決定元素的具體顯示內容，如 img input textarea select object video 等
Form
-
<input type='radio'>的選擇變化可由onfocus屬性控制javascript -
<select>的變化可由onchange屬性控制selectedIndex對應當前選中option的index：select.options[selectedIndex]指向當前選項select.value存儲的是當前選中option的valuecss
HTML5
- 視頻
//<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的 <video src="movie.ogg" width="320" height="240" controls="controls" id="video1"> Your browser does not support the video tag. </video> //video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式 <video width="320" height="240" controls="controls" id="video1"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> //DOM控制視頻的播放暫停 var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 音頻
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
- 1
- 2
- 3
- 4
- 5
- 拖放
首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ,ondragstart 屬性調用了一個函數, drag(event)，它規定了被拖動的數據。dataTransfer.setData() 方法設置被拖數據的數據類型和值.ondragover 事件規定在何處放置被拖動的數據。默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。這要經過調用 ondragover 事件的 event.preventDefault() 方法, 當放置被拖數據時，會發生 drop 事件,調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）,經過 dataTransfer.getData(「Text」) 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。被拖數據是被拖元素的 id (「drag1」), 把被拖元素追加到放置元素（目標元素）中.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- canvas
//html <canvas width='' height='' id=''></canvas> //js var c=document.getElementById(''); var cxt=c.getContext('2d'); cxt.strokeStyle='#eee'; //cxt.fillStyle cxt.beginPath(); cxt.moveTo(i,j); cxt.lineTo(i,j); cxt.closePath(); cxt.stroke(); //真正描繪出路徑 cxt.fill(); cxt.strokeRect(0,0,width,height); //畫矩形 cxt.fillRect()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 地理定位
var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
使用 getCurrentPosition() 方法來得到用戶的位置, 若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象.getCurrentPosition() 方法的第二個參數用於處理錯誤
- web存儲
localstorage sessionstorage
- 應用緩存
經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本，如需啓用應用程序緩存，請在文檔的 <html> 標籤中包含 manifest 屬性：html
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
- 1
- 2
- 3
- 4
每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。manifest 文件的建議的文件擴展名是：」.appcache」。
請注意，manifest 文件須要配置正確的 MIME-type，即 「text/cache-manifest」。必須在 web 服務器上進行配置。html5
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分爲三個部分：
1. CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
2. NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
3. FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）java
//完整的 Manifest 文件
CACHE MANIFEST
# 註釋：2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
一旦應用被緩存，它就會保持緩存直到發生下列狀況：
1. 用戶清空瀏覽器緩存
2. manifest 文件被修改
3. 由程序來更新應用緩存css3
若是您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。
- Web Workers
當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。git
var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/demo_workers.js"); } //向 web worker 添加一個 "onmessage" 事件監聽器,當 web worker 傳遞消息時，會執行事件監聽器中的代碼 w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
如今，讓咱們在一個外部 JavaScript 中建立咱們的 web worker。在這裏，咱們建立了計數腳本。該腳本存儲於 「demo_workers.js」 文件中：web
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
以上代碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息。當咱們建立 web worker 對象後，它會繼續監聽消息（即便在外部腳本完成以後）直到其被終止爲止。如需終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法
- 服務器發送事件
- 新增表單元素
datalist：規定輸入域的選項列表
keygen：密鑰對生成器
output：定義不一樣類型的輸出canvas
CSS知識點整理
- 標準盒模型寬度=margin+border+padding+width
IE盒模型寬度=margin+width
利用box-sizing：border-box可變成IE盒模型
左欄定寬，右邊兩欄各佔50%
.parent{display:flex}
.first{width:200px}
.second, .third{width:100%} - 雙翼三欄佈局
- 主欄左浮動，width：100%
- 左欄左浮動，margin-left：-100%
- 右欄左浮動，margin-left：-右欄寬度
- 主欄內容的包裹層左右外邊距設爲左右欄寬度
- 三欄的父元素清楚浮動 overflow：hidden
- 動畫
animation: mymove 5s infinite;
@keyframes mymove{
0% {transform: scale(1,1);}
25%{transform: scale(2,2);}
50%{transform: scale(1,1);}
75%{transform: scale(2,2);}
} - 不給寬高實現水平垂直居中:
position:absolute; transform:translate(-50%,-50%); left:50%; top:50%;
- 1
- 2
- 3
- 4
給出寬高三種垂直水平居中法:瀏覽器
position:absolute; left:50%; top:50%; margin-left:-width/2; margin-top:-height/2;
- 1
- 2
- 3
- 4
- 5
position:absolute; left,right,top,bottom:0; margin:auto;
- 1
- 2
- 3
display:flex;//父元素 margin:auto;//子元素
- 1
- 2
- 3
我的認爲居中仍是flex最好用啦！
- CSS實現右三角形
border:10px solid transparent; border-left:#f00; width:0; height:0;
- 1
- 2
- 3
- 4
- float使行內元素脫離文檔流的同時也變成塊級元素
- css可繼承屬性
文本相關屬性：font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height,text-align, text-indent, texttransform,word-spacing
列表相關屬性：list-style-image, list-style-position,list-style-type, list-style
還有 color
注意：font-size繼承的是計算後的像素值，若是父元素font-size：80%(*16px)，那麼子元素繼承的是0.8*16px, 而不是 0.8*0.8(*16px)
Flex佈局
容器：
display:flex/inline-flex flex-direction:row/row-reverse/column/column-reverse flex-wrap:nowrap/wrap/wrap-reverse flex-flow:row nowrap justify-content:flex-start/flex-end/center/space-between/space-around align-items:flex-start/flex-end/center/baseline/stretch align-content:flex-start/flex-end/center/space-between/space-around/stretch //多跟軸線對齊方式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
項目：
order:<integer> flex-grow:<number> flex-shrink:<number> flex-basis:auto|<length> //定義了在分配多餘空間以前，項目佔據的主軸空間 flex:0 1 auto align-self:flex-start/flex-end/center/baseline/stretch //覆蓋父元素的align-items屬性
- 1
- 2
- 3
- 4
- 5
- 6
具體可參看阮一峯的教程，總結的很好！
CSS3
-
若是要實現背景透明而文字不透明的效果不能用opacity，可以使用背景色rgba來調整
-
選擇器
p:nth-child(n): p的父元素的第n個子元素是p元素 （p:first-child, p:last-child,p:only-child）
p:first-child 選擇屬於父元素的第一個子元素且這個子元素是<p>元素。
p:only-child p的父元素只有一個子元素，而且這個子元素是p元素
p:nth-last-child(2) 同上，從最後一個子元素開始計數
p:nth-of-type(n): 選擇屬於p的父元素的第n個<p>元素（p:nth-first-type, p:nth-last-type,p:only-of-type）
p:only-of-type p的父元素能夠有多個子元素，可是隻能有一個p元素
div+p: 選擇緊接在<div>元素以後的<p>元素
div~p:選擇前面有div元素的p元素（div和p是兄弟元素）
[title~=flower]: 選擇 title 屬性包含單詞 「flower」 的全部元素
[lang|=en]: 選擇 lang 屬性值以 「en」 開頭的全部元素
a[src^=」https」]: 選擇其 src 屬性值以 「https」 開頭的每一個<a>元素
a[src$=」.pdf」]: 選擇其 src 屬性以 「.pdf」 結尾的全部<a>元素
a[src*=」abc」]: 選擇其 src 屬性中包含 「abc」 子串的每一個<a>元素
[target]: 選擇帶有 target 屬性全部元素
:not(p): 選擇非<p>元素的每一個元素。 - border-radius
- border-image
- border-shadow:x y blur color
- 漸變背景圖
background-image:-webkit-linear-gradient(left,blue,red 25%,blue 50%,red 75%,blue 100%);
- 1
- 裁剪背景圖, 規定背景的繪製區域
background-clip:text/border-box/padding-box/content-box; //text：從前景內容的形狀（好比文字）做爲裁剪區域向外裁剪，如此便可實現使用背景做爲填充色之類的遮罩效果
- 1
- 2
-
文字透明可看見背景圖
color:transparent; -
background-size:length/percentage/cover/contain
percentage:父元素的百分比
cover：背景圖像擴展至覆蓋背景區域（可能看不見部分圖像）
contain：擴展至最大尺寸（可看見所有區域） background-attachment:scroll/fixed/inheritbackground-orign:padding-box/border-box/content-box規定背景圖片的定位區域background-position:top center/x% y%/x y- word-wrap:normal/break-word
- text-shadow
- 自定義字體
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; } div { font-family:myFirstFont; } </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
animation:moveName duration timing-function delay iteration-count animation-fill-mode direction;
time-function: linear/ease/cubic-bezier(p1x,p1y,p2x,p2y)
iteration-count: n/infinite
animation-fill-mode：動畫結束之後，會當即從結束狀態跳回到起始狀態。若是想讓動畫保持在結束狀態，須要使用animation-fill-mode屬性：forwards，backwards表示回到第一幀的狀態，none是默認值，回到動畫還沒開始的狀態
direction: normal/alternate(反向輪播)
@keyframes moveName { 0%: …… 50%: …… 100%: …… }
- 1
- 2
- 3
- 4
- 5
- 6
模擬 文字逐個顯示，且最後光標閃動
@keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } } h1 { font: bold 200% Consolas, Monaco, monospace; border-right: .1em solid; width: 16.5em; /* fallback */ width: 30ch; /* # of chars */ margin: 2em 1em; white-space: nowrap; overflow: hidden; animation: typing 20s steps(30, end), /* 動畫分30步，不是平滑過渡 */ blink-caret .5s step-end infinite alternate; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
動畫播放過程當中，會忽然中止，默認行爲是跳回到動畫的開始狀態, 若是想讓動畫保持忽然終止時的狀態，就要使用animation-play-state屬性
div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 給有寬高的元素設置陰影 box-shadow
box-shadow:x y opacity color;
- 1
- 元素屬性平滑地過渡漸變用 transition
transition: property duration timing-function delay;
- 1
也可同時設置多個屬性的過渡
transition:width 1s,height 2s; //當不知道確切高度時可用max-height，用auto會突變 transition:width 1s,height 2s 1s; //添加delay可以讓動畫按順序執行
- 1
- 2
- 轉換 transform（旋轉、縮放、移動或傾斜）
transform:translate(10px,10px) transform:rotate(10deg); transform:scale(2,4); transform:rotateX(10deg);//3D轉換，繞x軸旋轉
- 1
- 2
- 3
- 4
- style.borderTop 駝峯法
-
style.top/style.left
若想獲取style.top/style.left的值必須以js顯示定義style.top/style.left的值，或者之內聯形式定義屬性的值，不然獲取不到。
經過全局方法 getComputedStyle(element[,僞類]).getPropertyValue(prop) 和IE下的element.currentStyle().getPropertyValue(prop)能夠獲取到全部的樣式，包括繼承的，因此就算是一個空標籤用這個方法也能獲取到上百個樣式，getComputedStyle獲取到的樣式只能讀 不能寫，style.padding能夠寫，getPropertyValue同getAttribute -
濾鏡屬性的模糊效果
-webkit-filter:blur(4px); - calc() 計算屬性
calc()能讓你給元素的寬高作計算，你能夠給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，好比說「width:calc(50% + 2px)」，這樣一來你就不用考慮元素DIV的寬度值究竟是多少，而把這個煩人的任務交由瀏覽器去計算。 - 建立多個列來對文本進行佈局 - 就像報紙那樣 columns
columns:column-width,column-count
column-gap: 列之間的間隔
column-rule: 2px dotted red //列之間分割線的樣式
僞類和僞元素
僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。僞元素建立的抽象元素不存在於文檔語言裏（能夠理解爲html源碼）
這裏用僞類 :first-child 和僞元素 :first-letter 來進行比較。
p>i:first-child {color: red}
<p> <i>first</i> <i>second</i> </p> //僞類 :first-child 添加樣式到第一個子元素
- 1
- 2
- 3
- 4
- 5
- 6
若是咱們不使用僞類，而但願達到上述效果，能夠這樣作：
.first-child {color: red}
<p> <i class="first-child">first</i> <i>second</i> </p>
- 1
- 2
- 3
- 4
- 5
即咱們給第一個子元素添加一個類，而後定義這個類的樣式。那麼咱們接着看看僞元素：
p::first-letter {color: red} <p>I am stephen lee.</p> //僞元素 ::first-letter 添加樣式到第一個字母
- 1
- 2
- 3
那麼若是咱們不使用僞元素，要達到上述效果，應該怎麼作呢？
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
- 1
- 2
即咱們給第一個字母添加一個 span，而後給 span 增長樣式，也就是添加了一個元素來達到效果，這就是和僞類不一樣之處。
僞類種類 
僞元素種類
- 僞類 :target
//點擊連接設置 #func 的樣式 <div id='test'></div> <a href='#test'></a> <div id='func'></div> #test:target~#func{ ... //樣式 }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3D輪播
perspective:3000px; //定義3D元素距視圖的距離 transform-style:preserve-3d; transform:rotateY(60deg),translateZ(500px);
- 1
- 2
- 3
若是css3 animation動畫出現卡頓怎麼辦？
1. 改用 transform 的css3屬性（translate scale），由於用css3屬性會自動開啓GPU加速，提升動畫的流暢度 2. 若是是在頁面剛開始加載的時候並無加載徹底就執行了動畫，那就可讓動畫延遲執行
- 1. HTML、CSS知識點總結。
- 2. html/css知識點總結
- 3. HTML知識點總結（二）
- 4. HTML+CSS知識點總結（一）
- 5. HTML & CSS 部分知識點總結
- 6. 2020.04.03 HTML+CSS錯題知識點總結
- 7. HTML,CSS,JS個別知識點總結
- 8. HTML+CSS知識總結2
- 9. html和css知識總結
- 10. HTML 知識點總結
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 算法總結-二分查找法
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
- 1. HTML、CSS知識點總結。
- 2. html/css知識點總結
- 3. HTML知識點總結（二）
- 4. HTML+CSS知識點總結（一）
- 5. HTML & CSS 部分知識點總結
- 6. 2020.04.03 HTML+CSS錯題知識點總結
- 7. HTML,CSS,JS個別知識點總結
- 8. HTML+CSS知識總結2
- 9. html和css知識總結
- 10. HTML 知識點總結