CSS
吱昂张……
这个作者很懒,什么都没留下…
展开
-
Less 基础 easyless 插件
12.3 less基础12.3.1 css弊端因为css没有很好的计算能力,比如将px换算成rem单位要手动换算,所以出现了less12.3.2 less介绍 less是一门css的扩展语言,也叫css预处理器,常见预处理器有Sass Less Stylus less中文网址:Less 中文网 12.3.3 less使用less变量@变量名:值; 必须有@前缀 不能包含特殊字符 不能以数字开头 大小写敏感,大小写不一样 //原创 2021-11-07 21:17:55 · 1577 阅读 · 0 评论 -
关于rem的理解
rem是一个单位,类似于em,em是相对于父元素的字体大小而设定的单位。而rem是相对于根标签html设定的单位,叫做root em。比如若设置根元素html的字体大小为14px,非根元素的大小为2rem,则非根元素的字体大小为28px...原创 2021-11-06 21:38:59 · 444 阅读 · 0 评论 -
CSS3 线性渐变使用方法
1、语法background: linear-gradient(起始方向,颜色1,颜色2,颜色3...);background: -webkit-linear-gradient(left,red,blue);注意:使用时必须添加浏览器私有前缀。 默认方向是top,自上而下渐变。 颜色无要求,可写多个颜色。2、方向可以写对角线渐变: background: -webkit-linear-gradient(left top, red, blue);如:左上至右下...原创 2021-11-06 13:41:55 · 98 阅读 · 0 评论 -
固定定位position:fixed;一定要有宽度
做了一个搜索模块,需要用固定定位,结果没显示出来。.search-index { position: fixed; top: 0; left: 0; height: 44px; background-color: pink;}后来查明原因,固定定位一定要设置宽度。给了width:100%; 后就出来了.search-index { /* 固定定位和父亲没有关系,以屏幕为主 */ position: fixed; top: 0.原创 2021-11-05 16:33:31 · 1219 阅读 · 0 评论 -
浮动(float)和绝对定位(absolute)
1、一个元素浮动或者绝对定位后,都会自动转换为块级元素,无论该元素本身是什么类型。2、浮动只脱离文档流,绝对定位既脱离文档流,又脱离文本流。原创 2021-11-04 13:40:43 · 512 阅读 · 0 评论 -
CSS3 3D转换之3D旋转 rotate
一、沿着X轴旋转 rotateX立体感不够,可以加一个透视perspective,注意要加在观察元素的父盒子上面就可以变成这个样子二、沿着Y轴旋转 rotateY transform: rotateY(360deg);三、沿着Z轴旋转rotateZ transform: rotateZ(360deg);和2D旋转差不多四、还可以自定义旋转轴 ...原创 2021-10-31 13:57:37 · 2204 阅读 · 0 评论 -
CSS3中过渡(transition)和动画(animation)的区别
过渡和动画都可以实现元素属性随时间的变化而变化,但是两者区别主要有以下两点:1、transition过渡需要配合伪类来使用,需要触发,但是动画(animation)在页面加载后就可以实现2、过渡只有开始和结束两种状态,而动画可以设置中间状态,通过百分比来划分帧,实现复杂的动画。...原创 2021-10-30 16:32:11 · 772 阅读 · 0 评论 -
理解CSS3 动画里面的步长steps
步长 steps,简要来说就是分几步完成动画,是animation属性里面的animation-delay属性中的一种比如我想让一个盒子宽度由0变成200像素5步的效果:10步的效果:代码:原创 2021-10-30 16:19:32 · 614 阅读 · 0 评论 -
解决插入img图片底部空隙问题(原因+解决方案)
当我兴高采烈得准备了一个div盒子^^然后给它加了一个红色的边框^^然后把我心爱的倪妮放进去 ^^???为什么插入图片底部会有缝隙呢!!其实这是因为图片默认是和文字基线对齐(baseline)的,这里以小写字母j为例有点像小学英语本中四线三格的第三线所以图片会留有空隙那么第一个解决办法就是改变图片的对齐方式vertical-align:给图片的垂直对齐方式vertical-align属性改为底线对齐bottom即可,当然其他对齐方式也可以,只要不是...原创 2021-10-24 16:12:39 · 1070 阅读 · 1 评论