CSS
CSS
八月ouc
这个作者很懒,什么都没留下…
展开
-
清除浮动的方法
高度塌陷当所有的子元素浮动的时候,且父元素没有设置高度,此时父元素就会产生高度塌陷清除浮动- 父元素定义高度优:快速简单,代码少劣:无法响应式布局- 父元素定义(overflow:hidden;zoom:1)(可兼容IE6)优:快速简单,代码少,兼容性高劣:超出部分被影响,布局需注意- 浮动元素后加空标签空标签样式:clear:both;height:0;overflow:hidden优:快速简单,代码少,兼容性高劣:增加空标签,不利于页面优化- 父元素定义overflow原创 2022-03-18 18:13:17 · 286 阅读 · 0 评论 -
谷歌浏览器中placeholder在获取光标后不消失的解决方案
在项目使用中发现,谷歌、火狐等浏览器在现实placeholder属性时存在问题:输入框获取光标后,提示字体不消失的问题,需自行设置如下:input:focus::-webkit-input-placeholder {color: transparent;}input:focus::-moz-input-placeholder {color: transparent;}input:focus:...原创 2020-01-14 15:33:40 · 915 阅读 · 0 评论 -
CSS样式优先级计算
CSS的样式优先级计算是一个四位数,而在css2中是一个3位数。首先,使用!important来定义样式是优先于其他所有样式的其次,该四位数选择,第一位为内联样式,及行内样式;第二位为id选择器,第三位为class选择器和属性选择器,最后一位为属性选择器最后,查看几个事例1. div{color:red} 优先级为0,0,0,1 而div span{color:green}优先级原创 2015-05-15 09:55:56 · 571 阅读 · 0 评论 -
外部引用CSS中 link与@import的区别
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的转载 2015-05-14 22:26:17 · 379 阅读 · 0 评论 -
CSS绘制图标基础
CSS的功能不仅局限在调整元素样式上,绘制图形也是可行的。下面是其绘制图形的基本图形:1. 三角形.triangel {width:0;height:0;border-top:10px solid red;border-left:10px solid transparent;border-right:10px solid transparent; }2.圆形原创 2016-10-16 22:00:21 · 320 阅读 · 2 评论 -
CSS 变量教程
原文转自[http://www.ruanyifeng.com/blog/2017/05/css-variables.html]今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候,变量名前面要加两根连词线(--)。转载 2017-05-09 11:07:46 · 358 阅读 · 0 评论