文章分类 -  css

在项目中如何使用字体小图标font awesome，iconfont，svg
摘要：一、首先来讲font awesome（官网地址：http://www.bootcss.com/p/font-awesome/） 特点：相对比较简单，在项目中引入下载好的font-awesome.min.css文件及font文件，然后在需要使用的地方引用对应的类名即可，例如： 浏览器里显示效果： 图标 阅读全文
posted @ 2018-07-24 18:57 爽朗琴天 阅读(1896) 评论(0) 推荐(0)
chrome浏览器字体小于12px的解决方式
摘要：(1) 使用webkit的内核-webkit-text-size-adjust的私有属性解决，样式定义如下: .el{-webkit-text-size-adjust:none;font-size:10px;} 只要加了-webkit-text-size-adjust:none;字体大小就不受限制了，但是，在chome更新到27版本之后就不可用了。 (2) 将文字做在图片上 (3... 阅读全文
posted @ 2018-06-28 11:03 爽朗琴天 阅读(190) 评论(0) 推荐(0)
input类型按钮在IOS和Android中样式兼容问题
摘要：要让它们显示一致，需要添加以下两个样式： 阅读全文
posted @ 2018-04-10 13:08 爽朗琴天 阅读(752) 评论(0) 推荐(0)
JS设置倒计时十秒关闭页面(转)
摘要：倒计时10秒后关闭当前窗口 阅读全文
posted @ 2017-09-03 19:24 爽朗琴天 阅读(9701) 评论(0) 推荐(0)
Css实现单行、多行文本溢出显示省略号（...）：
摘要：（1）实现单行文本溢出显示省略号：用text-overfloaw:ellipsis属性实现，需要加width属性兼容部分浏览器。 实现方法： 效果如图： （2）实现多行文本溢出显示省略号： 实现方法： 效果如图： 适用范围： 因使用了webkit的css扩展属性，该方法适用于webkit浏览器及移动 阅读全文
posted @ 2017-08-31 14:18 爽朗琴天 阅读(238) 评论(0) 推荐(0)
用fontAwesome代替网页icon小图标
摘要：应用font-awesome 下载 去http://www.thinkcmf.com/下载，解压之后，应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档，font文件夹中存放在着适用于不同浏览器的字体文件。其中，css文件夹中可以只保留 font-awesome.min.c 阅读全文
posted @ 2017-07-13 16:26 爽朗琴天 阅读(212) 评论(0) 推荐(0)
css中px、em、rem单位的区别
摘要：在web前端开发中我们经常遇到px、em、rem这些字体单位，那它们有哪些区别呢？ PX特点 -1. IE无法调整那些使用px作为单位的字体大小； -2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； -3. Firefox能够调整px和em，rem，但是有大部分的国产浏览器 阅读全文
posted @ 2017-04-20 17:42 爽朗琴天 阅读(206) 评论(0) 推荐(0)
css性能提高优化的方法
摘要：css是由选择器、属性和属性值构成的。 css匹配原理： 例如： css的匹配原理不是从左到右的，而是从右到左的，也就是说上面这行代码里面，先查找到页面里面所有的span元素形成一个集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻 阅读全文
posted @ 2017-04-17 12:03 爽朗琴天 阅读(159) 评论(0) 推荐(0)
伪类与伪元素的区别和用法
摘要：对于伪类和伪元素，做前端的大多数人都听过，只是我们经常将两者弄混淆，下面我们就具体来看看它们各自的概念与用法： 1、为什么css要引入伪类和伪元素呢？ css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-eleme 阅读全文
posted @ 2017-04-08 13:31 爽朗琴天 阅读(3779) 评论(0) 推荐(0)
position定位
摘要：position有relative、absolute、fixed和static四个属性值： 先看一个例子： 效果图： 相对定位relative： 给.div2加上position:relative;left:200px;top:200px;得到如下效果： position:relative;相对定位 阅读全文
posted @ 2017-04-04 18:00 爽朗琴天 阅读(109) 评论(0) 推荐(0)
清除浮动的方法及各自的优缺点
摘要：float定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或相邻的浮动元素而停下来。 float特点： 1、块在一行显示 2、内联元素支持宽高 3、默认内容撑开宽高 4、脱离文档流 5、提升层级半层 清除浮动： clear:left | right | both | none | inhe 阅读全文
posted @ 2017-04-04 16:33 爽朗琴天 阅读(270) 评论(0) 推荐(0)
内联元素、块元素和内联块元素的特征：
摘要：块元素特征（div、p、h1~h6、ul等）：display:block;显示为块 1、默认独占一行 2、没有宽度时，默认撑满一行 3、支持所有css命令 内联元素特征（span、a、img、em、strong等）：display:inline;显示为内联 1、内容撑开宽高 2、不支持宽高 3、不支 阅读全文
posted @ 2017-04-04 15:10 爽朗琴天 阅读(246) 评论(0) 推荐(0)
css常见选择器
摘要：常见css选择器解析： （1）通配符（*）选择器：*{margin:0;padding:0;}对页面上的每一个元素起作用，我们经常使用*将页面中每个元素的margin和padding设置为0；它也可以在子选择器中使用：例如，#box *{border:1px solid #ccc;} （2）ID选择 阅读全文
posted @ 2017-04-04 14:29 爽朗琴天 阅读(490) 评论(0) 推荐(0)