CSS小技巧 4 則

有些時候網頁中用到了一些絕對定位的 div，因為需要事先這個 div 是隱藏的，但是它所在的位置會遮擋住滑鼠點選事件。此時可以用 ccs3 中的pointer-events屬性----即根據情況來動態修改 div 的 pointer-events 屬性即可。

//用jquery寫法
//穿透該層
$('#mydiv').css('pointer-events', 'none');
//恢復點選
$('#mydiv').css('pointer-events', 'auto');

//方式1：隱藏後釋放占有的頁面空間
//原生js
document.getelementbyid("demo").style.display="none";//隱藏
document.getelementbyid("demo").style.display="block";//顯示
//jquery
$("#demo").css("display","none");//隱藏div
$("#demo").css("display","block");//顯示div
$("#demo").show();//表示display:block 
$("#demo").hide();//表示display:none
//方式2：隱藏後仍佔頁面空間，但顯示空白
//原生js
document.getelementbyid("demo").style.visibility="hidden";//隱藏
document.getelementbyid("demo").style.visibility="visible";//顯示
//jquery
$("#demo").css("visibility","hidden");//隱藏div
$("#demo").css("visibility","visible");//顯示div

區別：使用方式2更人性化，因為用div.style.display="none" 隱藏會引起 div 裡面的東西休眠，裡面的事件就不響應了。故 div 有一直執行的事件的話，只能採用方式2。

這個在做彈出 div 功能時是十分實用的。

/*方式1 div 絕對布局設定margin:auto;並設定top、left、right、bottom的值相等即可，不一定要都是0。*/ .mydiv /*方式2：絕對布局，讓left和top都是50%，這在水平方向上讓div的最左與螢幕的最左相距50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果*/

.mydiv

div 預設是縱向的，當我們需要兩個或多個 div 併排時，最愛的解決方案，給父元素設定 display: flex; 即可。

justify-content屬性調整子元素的水平對齊方式:flex-start左併攏，flex-end右併攏，center居中併攏，space-around等距排列有左右空space-between等距排列無左右空。

當父元素寬度不夠時， flex 預設是不會換行的，而是會等比例壓縮，縮放比例 flex-shrink 屬性或復合屬性 flex 相關。

通過 flex-wrap 屬性可以使其換行，該值有三個取值 nowrap、 wrap、 wrap-reverse，預設為 nowrap。

阮一峰 flex 布局語法篇

這類問題是面試中經常出現的css問題。那麼你會嗎？會的話，你能想出幾種解決方案呢？我這裡大致列舉六個方法！

1.彈性盒模型flex布局

2.利用偽類來對齊

3.利用空span，原理與上面的類似

4.利用**的特性：單元**的內容預設垂直居中

5.將塊標籤轉換成**屬性，display:table-cell

6.利用相對定位和transform

總結：span和偽類對齊方法主要是利用了空內容將基線定在了父級元素的中間位置，然後用inline-block結合vertical-align:middle. table的2種方法則是利用了**的自帶屬性，彈性盒模型的話就不用多說了，強大的愛不釋手，

transform和相對定位結合處理的話，因為要依據父級寬高所以用相對定位，用絕對定位的話會一層層找到頂級，transform再根據自身寬高負方向移動半個寬高。

關於彈性盒模型的引數介紹可檢視文件或者是阮一峰老師的部落格。

CSS小技巧 4 則

CSS網頁布局開發小技巧24則

CSS網頁布局開發小技巧24則

Shell 小技巧一則

CSS小技巧 4 則

CSS網頁布局開發小技巧24則

CSS網頁布局開發小技巧24則

Shell 小技巧一則

相關推薦