CSS各种问题积累
1.background与background-color</p>
这两者都可以这么用:background:red; background-color:red; 其实background-color只是background的一个子项而已。完整的background包括
background-color
background-image
background-repeat
background-attachment
background-position
完整的写法是这样的background: #00FF00 url(bgimage.gif) no-repeat fixed top;
2.第一条中的background属性值的第一个在css3中可以是各种过渡效果的,比如线性过渡、径向过渡。例如代码:
background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
详细的请看:http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html
3.上面的background-image属性还真是不好搞了,一定了解之后发现在过渡效果时-webkit-的写法很麻烦,-webkit-的过渡效果有两种实现,较传统的是-webkit-gradient(),较新的是-webkit-linear-gradient().由于-webkit-gradient()是所有写法中最复杂的,所以详细讲解,其它的应该就能轻松掌握了。
先看background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.5,rgba(0,255,0,1)),to(rgba(255,255,255,1)));
1. linear指出是线性渐变,当然还可以写radial,表示径向渐变。
2. 0 0,0 100% 这两组参数成对出现,表示开始的位置和结束的位置。0代表像素值,100%是相对位置表示法,指的是直到结束的位置。
3. from()与后面的to()是一对,但都是可写可不写的货,表示颜色值,关于它的参数可以直接填如#fff,或者transparent(透明)、rgba颜色值。
4. rgba色值的格式rgba(255,255,255,1),前三个参数不多说了,后面的1代表的是透明度,可以取0-1之间的数,但不能写成0%-100%
5. color-stop()意思是在指定的位置,放置一个指定的色值。.5在中段位置,也可以写成50%同样是指中段位置。当你用一系列的color-stop去描述色值分布时便可不用from,to方法了。
color-stop(0,transparent)=from(transparent),color-stop(1,transparent)=to(transparent)。但是当不是从0开始的,且没有from时前面的色值默认为第一个color-stop指定的色值。
4.background-size:20px 40px;其中第一个参数指的是width,第二个是height
5.word-spacing 与 letter-spacing
word-spacing指的是左右两个单词之间的距离;letter-spacing指的是左右两个字母之间的距离。
6.在css的position中常见的属性有这几个:absolute relative fixed static。
static : 默认,没有任何效果,top button等也不起作用
absolute:相对于它的非static父类的定位 (让出之前的位置)
fixed:相对于浏览器窗口的定位(以前一直觉得这时absolute实现的效果,其实absolute也是一种相对的定位方式)。
relative:相对与其父类的定位 (之前的位置还会保留)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 单线程的Redis速度为什么快?
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库