HTML小知识点积累
1.怎樣讓heigth:100%起效?
??有時(shí)候我們?cè)O(shè)置heigth:100%,想讓當(dāng)前控件鋪滿整個(gè)屏幕,可是非常少情況下這個(gè)屬性能達(dá)到我們想要的效果,這是為什么呢?
??而依據(jù)W3C的規(guī)范。百分比的高度在設(shè)定時(shí)須要依據(jù)這個(gè)元素的父元素容器的高度。所以，假設(shè)你把一個(gè)div的高度設(shè)定為height: 50%;。而它的父元素的高度是100px，那么。這個(gè)div的高度應(yīng)該是50px。
那么,為什么沒(méi)效果呢?
??瀏覽器根本就不計(jì)算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動(dòng)欄出現(xiàn))。或者你給整個(gè)頁(yè)面設(shè)置一個(gè)絕對(duì)高度。
否則。瀏覽器就會(huì)簡(jiǎn)單的讓內(nèi)容往下堆砌。頁(yè)面的高度根本就無(wú)需考慮。
??由于頁(yè)面并沒(méi)有缺省的高度值。所以。當(dāng)你讓一個(gè)元素的高度設(shè)定為百分比高度時(shí)，無(wú)法依據(jù)獲取父元素的高度，也就無(wú)法計(jì)算自己的高度。換句話說(shuō)。父元素的高度僅僅是一個(gè)缺省值：height: auto;。當(dāng)你要求瀏覽器依據(jù)這樣一個(gè)缺省值來(lái)計(jì)算百分比高度時(shí)，僅僅能得到undefined的結(jié)果。也就是一個(gè)null值，瀏覽器不會(huì)對(duì)這個(gè)值有不論什么的反應(yīng)。
??解決方法就是把父級(jí)的元素中所有設(shè)為100%的高度,覆蓋掉默認(rèn)的auto
2.怎樣使得一張圖片鋪滿整個(gè)瀏覽器?
也就是圖片當(dāng)成整個(gè)網(wǎng)頁(yè)的背景,那么僅僅須要以下css就能夠?qū)崿F(xiàn)了,當(dāng)然前提,父級(jí)容器高度是大于或等于整個(gè)瀏覽器的
.bg{width: 100%;height: 100%;background: center no-repeat;/*使得圖像最大化,能夠覆蓋住整個(gè)面板*/background-size: cover;/*絕對(duì)定位,否則圖片不顯示*/position: absolute;width: 100vw; // 這個(gè)設(shè)置容器寬度為瀏覽器寬度height: 100vh; // 這個(gè)設(shè)置容器高度為瀏覽器高度z-index: -999; }3.怎樣讓整個(gè)網(wǎng)頁(yè)變成灰色?
實(shí)現(xiàn)以下CSS效果就可以
html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; -webkit-filter: grayscale(1) }4.bootstrap怎樣做到居中?
由于block 沒(méi)設(shè)定寬度是不能 margin auto 來(lái)居中的，一個(gè)簡(jiǎn)單的辦法是
display: table width: auto margin-left: auto margin-right: auto或者直接從center標(biāo)簽
<center><button class="btn btn-success btn-lg btn-store">馬上選擇</button> </center>再或者指定class為center-block
.center-block {display: block;margin-left: auto;margin-right: auto; }5.禁止小屏幕網(wǎng)頁(yè)縮放
才開始學(xué)習(xí)前端的時(shí)候,server上傳好的頁(yè)面在手機(jī)端訪問(wèn)總不是非常理想,后來(lái)知道是由于縮放的問(wèn)題,手機(jī)端會(huì)默認(rèn)依照大小比例進(jìn)行縮放,所以手機(jī)端看起來(lái)非常小.解決方法就是禁止縮放.
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>6.將footer永遠(yuǎn)固定在底部
想永遠(yuǎn)固定在底部,肯定要使用絕對(duì)定位,那么就會(huì)要求頁(yè)面的最小高度為整個(gè)瀏覽器屏幕高度,最大高度不限制.所以html要例如以下設(shè)置.
html{position: relative;//便于絕對(duì)定位height: auto;//最大不限制高度min-height: 100%;//最先為整個(gè)屏幕的高度 }那么footer就例如以下設(shè)置定位就可以
footer{height:100px;position:absolute;//絕對(duì)定位bottom:0;//保證在底部width: 100%;background: #48525E;border: 1px solid blue; }7.禁用頁(yè)面滾動(dòng)欄
<body scoll=no> 全禁止<body style="overflow:scroll;overflow-y:hidden"> 禁止縱向滾動(dòng)欄<body style="overflow:scroll;overflow-x:hidden"> 禁止縱向滾動(dòng)欄overflow屬性: 檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過(guò)其指定高度及寬度時(shí)怎樣顯示內(nèi)容overflow: auto; 在須要時(shí)內(nèi)容會(huì)自己主動(dòng)加入滾動(dòng)欄 overflow: scroll; 總是顯示滾動(dòng)欄 overflow-x: hidden; 禁止橫向的滾動(dòng)欄 overflow-y: scroll; 總是顯示縱向滾動(dòng)欄8.響應(yīng)式圖片
<div style="margin: auto;display: table; text-align: center;margin-bottom: 0"><img src="images/bg-one-img.png" style="max-width:100%"> </div>9.單行多行文本溢出顯示省略號(hào)
單行:
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行:
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;10.阻止a鏈接跳轉(zhuǎn)onclick和href
鏈接的onclick事件被先運(yùn)行，其次是href屬性下的動(dòng)作（頁(yè)面跳轉(zhuǎn)，或 javascript 偽鏈接）；
假設(shè)鏈接中同一時(shí)候存在href與onclick，假設(shè)想讓href屬性下的動(dòng)作不運(yùn)行，onclick必須得到一個(gè)false的返值；
假設(shè)頁(yè)面過(guò)長(zhǎng)有滾動(dòng)欄，且希望通過(guò)鏈接的 onclick事件運(yùn)行操作。
應(yīng)將它的 href屬性設(shè)為 javascript:void(0); 。而不要是 #。這能夠防止不必要的頁(yè)面跳動(dòng)；
轉(zhuǎn)載于:https://www.cnblogs.com/clnchanpin/p/7209277.html
總結(jié)
以上是生活随笔為你收集整理的HTML小知识点积累的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 协程打印(1~10)
- 下一篇： HTML（六）------ CSS