当前目录: css基础教程
css中、英文强制换行或者不换行

2016年1月2日  css3基础教程,css基础教程,前端资源   

1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持)     代码: .p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/ .p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/ .p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/ .p5{white-space:nowrap; ...

css裁剪clip clip-path

2015年6月23日  css基础教程,前端资源   

css裁剪clip clip:rect(上,右,下,左) 在线实例http://www.zhangxinxu.com/study/201103/css-rect-demo.html js圆形进度条就是用clip制作     clip-path: /* 多边形 */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* 圆 */ clip-path: circle(30px at 35px 35px); /* 椭圆 */ clip-path: ellipse(65px 30px at 125px 40px); 案例:http://www.zhangxinxu.com/study/201412/css-clip-path-rect-radius-transition.html  

css3 box-sizing属性

2015年5月20日  css3基础教程,css基础教程,前端资源   

box-sizing属性支持IE8以上浏览器。 box-sizing属性有2个值: content-box  //border和padding不计算入width之内 border-box  //border-box,border和padding计算入width之内 字面是解释很难懂它到底是干什么用的用实例说话: div.container { width:30em; border:1em solid; } div.box { width:50%; float:left; background:red; } <div class="container"> <div class="box">这个 div 占据左半部分。</div> <div class="box">这个 div 占据右半部分。</div> </div> 以上CSS可以让2个div并排,但是在这两个div中加入border或者padding就会撑开,如: 加了border或者padding就相当于多出了width部分会被撑出来,如果希望加上border或者padding,一样也保持...

css初始化Normalize.css

2015年5月15日  css基础教程,前端资源   

Normalize.css 为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

svg取代传统png/jpg图片格式

2015年1月24日  css基础教程,前端资源   

在线 svg 图标 文字图片 文字图标 字体图片 字体图标 字体符号 在制作网站的时候,绘制一些图标或者图案的时候,往往都会想到要使用图片来代替,或者将图片拼接在一起在使用CSS定位来找到。其实随着技术的进步已经是使用svg来取代传统png/jpg图片格式。 svg可以用css来修改就像设置font字体一样简单快捷。 这里介绍一个国外强大的在线生成svg网站,可以自定义自己需要的svg并且还帮我们生成了eot,woff,ttf,svg全面的字体格式。你也可以自己制作一个svg格式的文件上传并选中时下载得到的字体文件也会帮我们的svg合并到里面,很强大。 https://icomoon.io/app/ 国内:http://iconfont.cn/ 制作svg教程:http://iconfont.cn/help/platform.html 简单了解下浏览器支持和兼容的字体格式 字体文件格式   浏览器对字...