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

相关文章
相关标签/搜索