HTML小知識點積累

來源:互聯網
上載者:User

標籤:user   預設   不顯示   文本   tab   parent   img   情況   use   

1.怎樣讓heigth:100%起效?

??有時候我們設定heigth:100%,想讓當前控制項鋪滿整個螢幕,可是非常少情況下這個屬效能達到我們想要的效果,這是為什麼呢?
??而依據W3C的規範。百分比的高度在設定時須要依據這個元素的父元素容器的高度。所以,假設你把一個div的高度設定為height: 50%;。而它的父元素的高度是100px,那麼。這個div的高度應該是50px。


那麼,為什麼沒效果呢?
??瀏覽器根本就不計算內容的高度,除非內容超出了視窗範圍(導致滾動欄出現)。或者你給整個版面設定一個絕對高度。

否則。瀏覽器就會簡單的讓內容往下堆砌。頁面的高度根本就無需考慮。

??由於頁面並沒有預設的高度值。所以。當你讓一個元素的高度設定為百分比高度時,無法依據擷取父元素的高度,也就無法計算自己的高度。換句話說。父元素的高度僅僅是一個預設值:height: auto;。當你要求瀏覽器依據這樣一個預設值來計算百分比高度時,僅僅能得到undefined的結果。也就是一個null值,瀏覽器不會對這個值有不論什麼的反應。
??解決方案就是把父級的元素中所有設為100%的高度,覆蓋掉預設的auto

<html style="height: 100%;">  <body style="height: 100%;">    <div style="height: 100%;">      <p>        這樣這個div的高度就會100%了      </p>    </div>  </body></html>
2.怎樣使得一張圖片鋪滿整個瀏覽器?

也就是圖片當成整個網頁的背景,那麼僅僅須要以下css就能夠實現了,當然前提,父級容器高度是大於或等於整個瀏覽器的

.bg{    width: 100%;    height: 100%;    background: center no-repeat;    /*使得映像最大化,能夠覆蓋住整個面板*/    background-size: cover;    /*絕對位置,否則圖片不顯示*/    position: absolute;    width: 100vw;  // 這個設定容器寬度為瀏覽器寬度    height: 100vh; // 這個設定容器高度為瀏覽器高度    z-index: -999;}
3.怎樣讓整個網頁變成灰色?

實現以下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 沒設定寬度是不能 margin auto 來置中的,一個簡單的辦法是

display: tablewidth: automargin-left: automargin-right: auto

或者直接從center標籤

<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.禁止小螢幕網頁縮放

才開始學習前端的時候,server上傳好的頁面在手機端訪問總不是非常理想,後來知道是由於縮放的問題,手機端會預設依照大小比例進行縮放,所以手機端看起來非常小.解決方案就是禁止縮放.

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
6.將footer永遠固定在底部

想永遠固定在底部,肯定要使用絕對位置,那麼就會要求頁面的最小高度為整個瀏覽器螢幕高度,最大高度不限制.所以html要例如以下設定.

html{    position: relative;//便於絕對位置    height: auto;//最大不限制高度    min-height: 100%;//最先為整個螢幕的高度}

那麼footer就例如以下設定定位就可以

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屬性: 檢索或設定當對象的內容超過其指定高度及寬度時怎樣顯示內容overflow: auto; 在須要時內容會自己主動加入滾動欄overflow: scroll; 總是顯示滾動欄overflow-x: hidden; 禁止橫向的滾動欄overflow-y: scroll; 總是顯示縱向滾動欄
8.響應式圖片
<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連結跳轉onclick和href

連結的onclick事件被先運行,其次是href屬性下的動作(頁面跳轉,或 javascript 偽連結);
假設連結中同一時候存在href與onclick,假設想讓href屬性下的動作不運行,onclick必須得到一個false的返值;
假設頁面過長有滾動欄,且希望通過連結的 onclick事件運行操作。

應將它的 href屬性設為 javascript:void(0); 。而不要是 #。這能夠防止不必要的頁面跳動;

HTML小知識點積累

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.