CSS面試問題

有好多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

相關文章
相關標籤/搜索