有好多css屬性平時用的挺多,但就是記不住,總是忘掉,這是我總結的一些css經常使用的屬性,你們能夠用一個遮蓋物擋住左側是屬性,只看右側的漢字提示,看看能不能所有說上來,天天花5分鐘背一遍,確定能記得倒背如流。特地話可好長時間作的排版。。捂臉css
//deep .box{} 加到class以前能夠用於擊穿組件改寫element的樣式//========用於vue組件穿透
.clear-float:after{ display:block; content:' '; clear:both; } //===============僞元素清除浮動
position: relative;//相對、absolute 絕對 fixed 固定 、sticky 粘性//=========定位
dispaly:flex; flex-flow:column-reverse; flex-wrap:wrap;//================彈性佈局
//justify-contnet:center; align-items:center;
flex-start、flex-end、center、space-between、space-around
-wekit- transform:translate(50px,100px) rotate(30deg) scale(2,4);//=========3D變形
-ms-transiton: windth 2s transform 2s; //IE9
@keyframes myfitst{//=====================================css動畫
50% { width:10px; } 100%{width:20px;}
}
.div{animation:myfitst 2s;}
@media screen and (min-width: 480px) {//==========================響應式佈局
body {background-color: lightgreen;}
}
width: calc( ( 100% - 100px ) * 20 );//==============================計算寬高
box-shadow: 2px 2px 4px red;//左右、上下、模糊、度、顏色==============盒子陰影
text-shadow: 5px 5px 5px #FF0000;//==============================文字陰影
lettet-spacing:10px;//========================================文字間距
text-align:justify;//不支持最後同樣兩端對齊,使用css三、或者僞元素==========文字兩端對齊
text-align-last:justify; css3屬性
:after{ display:inline-block;content:'';width:100%;height:0; }
cursor:pointer;//===========================================鼠標變小手
pointer-events: none; //======================================點擊穿透效果
.table{border-collapse:collapse; border:1px #555 solid; }//=================表格邊框合併
標準盒子模型=============================================盒子模型
元素實際寬度 = width(寬) + padding(內邊距) + border(邊框) =
IE盒子模型
width = content + padding + border;
box-sizing:border-box; 將標準盒子模型轉化爲IE盒子模型vue
另外裏邊有什麼你們以爲缺漏的而且經常使用的,但願你們給我提一提我來補全一下,謝謝你們...,css3