HTML小知识点积累
1.怎樣讓heigth:100%起效?
??有時候我們設(shè)置heigth:100%,想讓當(dāng)前控件鋪滿整個屏幕,可是非常少情況下這個屬性能達(dá)到我們想要的效果,這是為什么呢?
??而依據(jù)W3C的規(guī)范。百分比的高度在設(shè)定時須要依據(jù)這個元素的父元素容器的高度。所以，假設(shè)你把一個div的高度設(shè)定為height: 50%;。而它的父元素的高度是100px，那么。這個div的高度應(yīng)該是50px。
那么,為什么沒效果呢?
??瀏覽器根本就不計算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動欄出現(xiàn))。或者你給整個頁面設(shè)置一個絕對高度。
否則。瀏覽器就會簡單的讓內(nèi)容往下堆砌。頁面的高度根本就無需考慮。
??由于頁面并沒有缺省的高度值。所以。當(dāng)你讓一個元素的高度設(shè)定為百分比高度時，無法依據(jù)獲取父元素的高度，也就無法計算自己的高度。換句話說。父元素的高度僅僅是一個缺省值：height: auto;。當(dāng)你要求瀏覽器依據(jù)這樣一個缺省值來計算百分比高度時，僅僅能得到undefined的結(jié)果。也就是一個null值，瀏覽器不會對這個值有不論什么的反應(yīng)。
??解決方法就是把父級的元素中所有設(shè)為100%的高度,覆蓋掉默認(rèn)的auto
2.怎樣使得一張圖片鋪滿整個瀏覽器?
也就是圖片當(dāng)成整個網(wǎng)頁的背景,那么僅僅須要以下css就能夠?qū)崿F(xiàn)了,當(dāng)然前提,父級容器高度是大于或等于整個瀏覽器的
.bg{width: 100%;height: 100%;background: center no-repeat;/*使得圖像最大化,能夠覆蓋住整個面板*/background-size: cover;/*絕對定位,否則圖片不顯示*/position: absolute;width: 100vw; // 這個設(shè)置容器寬度為瀏覽器寬度height: 100vh; // 這個設(shè)置容器高度為瀏覽器高度z-index: -999; }3.怎樣讓整個網(wǎng)頁變成灰色?
實(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 沒設(shè)定寬度是不能 margin auto 來居中的，一個簡單的辦法是
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)頁縮放
才開始學(xué)習(xí)前端的時候,server上傳好的頁面在手機(jī)端訪問總不是非常理想,后來知道是由于縮放的問題,手機(jī)端會默認(rèn)依照大小比例進(jìn)行縮放,所以手機(jī)端看起來非常小.解決方法就是禁止縮放.
<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)固定在底部,肯定要使用絕對定位,那么就會要求頁面的最小高度為整個瀏覽器屏幕高度,最大高度不限制.所以html要例如以下設(shè)置.
html{position: relative;//便于絕對定位height: auto;//最大不限制高度min-height: 100%;//最先為整個屏幕的高度 }那么footer就例如以下設(shè)置定位就可以
footer{height:100px;position:absolute;//絕對定位bottom:0;//保證在底部width: 100%;background: #48525E;border: 1px solid blue; }7.禁用頁面滾動欄
<body scoll=no> 全禁止<body style="overflow:scroll;overflow-y:hidden"> 禁止縱向滾動欄<body style="overflow:scroll;overflow-x:hidden"> 禁止縱向滾動欄overflow屬性: 檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時怎樣顯示內(nèi)容overflow: auto; 在須要時內(nèi)容會自己主動加入滾動欄 overflow: scroll; 總是顯示滾動欄 overflow-x: hidden; 禁止橫向的滾動欄 overflow-y: scroll; 總是顯示縱向滾動欄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.單行多行文本溢出顯示省略號
單行:
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屬性下的動作（頁面跳轉(zhuǎn)，或 javascript 偽鏈接）；
假設(shè)鏈接中同一時候存在href與onclick，假設(shè)想讓href屬性下的動作不運(yùn)行，onclick必須得到一個false的返值；
假設(shè)頁面過長有滾動欄，且希望通過鏈接的 onclick事件運(yùn)行操作。
應(yīng)將它的 href屬性設(shè)為 javascript:void(0); 。而不要是 #。這能夠防止不必要的頁面跳動；
轉(zhuǎn)載于:https://www.cnblogs.com/clnchanpin/p/7209277.html
總結(jié)
以上是生活随笔為你收集整理的HTML小知识点积累的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 协程打印(1~10)
- 下一篇： ByteBuffer源码分析