CSS
小虫信息科技
每天积累一点,每天进步一点
展开
-
elementui el-tree横向滚动
flex布局横向滚动条原创 2022-07-22 18:31:37 · 854 阅读 · 0 评论 -
自适应字体px转换rem
1. rem是相对根元素html的,所以在设备设置html字体大小即可。浏览器默认字体为16px,1rem=16px,则设置根节点字体大小为(1/16)*100%=6.25%。为了方便计算,设置1rem=10px,1rem=10px,(10/16)*=62.5%;由于有些浏览器支持的字体最小为12px,因此设置1rem=100px,(100/16)*100%=625%。但实际上转换还是除以10即可...原创 2018-07-12 14:01:42 · 2342 阅读 · 0 评论 -
表格表头thead固定,tbody滚动实现样式
设置样式如下.table-scrollthead{display:table;width:calc( 100% - 4px );table-layout:fixed;}.table-scrolltbody{max-height:6rem;overflow-y:auto;display:block;wid...原创 2018-06-10 10:17:52 · 2741 阅读 · 1 评论 -
鼠标事件实现提示信息显隐
1.Tooltips:HTML Label for your tooltipCSS.tooltip-toggle { cursor: pointer; position: relative;}.tooltip-toggle::before { top: -80px; left: -80px原创 2016-06-06 11:02:09 · 444 阅读 · 0 评论 -
文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
css中垂直居中样式vertical-align:middle属性,但是此属性只对标签、、,和内联元素display设置为inline/inline-block起作用,其他的则不起作用。1.单行文本垂直居中:如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:div{ height:25p转载 2016-02-17 11:29:49 · 10459 阅读 · 0 评论 -
浏览器滚动条改变
滚动条样式属于伪类,css3中有滚动条的样式:::-webkit-scrollbar,::-webkit-scrollbar-button、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb可以定义滚动条,如图: 两滚动条为原始滚动条和改变后的滚动条。::-webkit-s原创 2016-02-18 09:17:23 · 367 阅读 · 0 评论 -
h5开发中常见的问题汇总
Meta基础知识:H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一、HTML页面结构 // width 设置viewport宽度,为一个正整数,或字符串‘device-width’// height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置// initial-scale 默认缩放比例,为一个数字,转载 2016-06-12 17:30:46 · 2659 阅读 · 0 评论 -
怎样写css3动画
1.动画是由变换和过渡效果组成,因此需要先熟悉过渡。变换:transform属性如下none:无转换2D Transform Functions:matrix():以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵translate():指定对象的2D translation(2D平移)。第一原创 2016-03-09 09:17:46 · 745 阅读 · 0 评论 -
页脚固定于底部的方法
方法一: body,html { margin: 0; padding: 0; height:100%; } #main { position: relative; min-height:100%; background:#eee; } #content { padding: 10px; padding-bot原创 2016-05-30 17:01:54 · 383 阅读 · 0 评论 -
a、button、input点击出现蓝色边框,如何去掉
a,button,input{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-write-plaintext-only;}可根据实际情况添加outline: none;或box-shadow: none;有时候图片放在a标签里也会出现边框,可设置图片的原创 2016-04-15 15:32:24 · 47464 阅读 · 3 评论 -
IE9对CSS3属性的支持情况
IE9对CSS3属性的支持情况CSS3属性IE9支持情况之前版本IE支持情况opacityNonemultiple backgroundsNonebackground-clipNonebackground-sizeNone原创 2016-04-06 14:46:10 · 10022 阅读 · 0 评论 -
css3渐变色
CSS3 定义了两种类型的渐变(gradients)://渐变必须由2种以上的颜色组成线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中心定义线性渐变 - 从上到下(默认情况下)下面的实例演示了从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:实例原创 2016-03-09 11:06:27 · 921 阅读 · 0 评论 -
气泡三角形
参考:http://www.cnblogs.com/daxiong/articles/3158630.html1.设置宽度和高度为0,使其成为一个点2.设置border四条边的点,成为顶端的点为0,而且是透明的。顶端对面长度有长度,而且有颜色,其余两侧则有长度没颜色。如下:#nt-example2-infos-triangle {原创 2016-02-17 15:45:22 · 426 阅读 · 0 评论 -
超出文本省略......
1.单行文本超出省略......设置文本的宽度或高度,强制文本在一行,如:width: 240px; //还可以设置高度,或者宽度为字符字数,如:width: 24em;overflow: hidden;text-overflow:ellipsis; //省略号white-space: nowra原创 2016-02-17 14:49:00 · 421 阅读 · 0 评论