前端开发中常用的CSS技巧-持续更新

样式：wrap{ul{list-style:none;显示：无；}&:hover{ul{显示：块；}}}5.Android端，img和button，点击后出现阴影区域。一开始以为是user-select作怪，设置为none没有效果，后来发现是cursor:pointer的错，在Android端设置cursor为none可以解决问题六、导航栏样式操作//自定义导航栏/*宽度*/::-webkit-scrollbar{width:8px;height:16px;}/*Track*/::-webkit-scrollbar-track{border-radius:10px;}/*Handle*/::-webkit-scrollbar-thumb{height:10px;背景色：#d9d9d9；border-radius:10px;}/*Handleonhover*/::-webkit-scrollbar-thumb:hover{background:rgb(14,77,136);}七、Adaptiveimage:img{max-width:100%;max-height:100%;}8.网页大小适配：html,body{max-width:1400px;min-width:1200px;}9.利用max-height实现展开收起的效果：.element{max-height:0;}.element:hover{最大高度：700px;transition:ease0.25s;}10.使用content属性设置序号.reset{padding-left:20px;counter-reset:wangxiaoer;}.counter:before{content:counters(wangxiaoer,"-")".";反增：wangxiaoer;}十一、管道符：a+a:before{content:"";填充：10px3px1px；左边距：6px；border-left:1pxsolidgray;}12.flex布局最后一行左对齐。使用flex布局很酷，但仍然有一些陷阱需要避免。比如你想要一个有间隔的布局，但是用space-around和space-between都有一个缺陷，就是最后一行不是左对齐，有人会说用aligh-content，横轴是对齐的，但是jusfy-content需要flex-start来实现这个效果，这样的话就没有居中的效果了，只能另辟蹊径了。我采用的方法比较笨拙，就是在最后一个块级元素后面添加两个空的等宽块级元素，并将高度设置为0就可以完美达到效果。十三、文字模糊effect.blurry{color:transparent;text-shadow:002pxrgba(0,0,0,0.5);}十四、自定义文字选择样式。元素::选择{颜色：#fff;背景色：橙色；}.element::-moz-selection{颜色：#fff；background-color:orange;}15.页面右上角贴纸.ribbon{position:absolute;右：-50px；顶部：40px；背景色：rgb(226,160,17)；溢出：隐藏；空白：nowrap；框阴影：0010pxrgb（82、72、72）；变换：旋转（45度）；}。色带a{显示：块；边框：1px实心#faa；颜色：#fff；字体：粗体81.25%“HelveticaNeue”，Helvetica，Arial，sans-serif；边距：1px0；填充：10px50px；：中心;文字修饰：无；text-shadow:005px#444;}十六、输入占位符样式修改input::-webkit-input-placeholder{color:orange;背景色：#f9f7f7；字体大小：14px；}input::-moz-input-placeholder{颜色：橙色；背景色：#f9f7f7；字体大小：14px；}input::-ms-input-placeholder{颜色：橙子;背景色：#f9f7f7；字体大小：14px；}十七、去除常用标签的默认margin和paddingbody,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form{保证金：0；padding:0;}十八、部分元素继承父元素样式并取消大纲a,h1,h2,h3,h4,h5,h6,input,select,button,option,textarea,optgroup{font-family:inherit;字体大小：继承；字体粗细：继承；字体样式：继承；行高：继承；颜色：继承；outline:none;}原创文章，首发于个人网站，转载请注明出处