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