一些常被你忽略的CSS小知识
1.CSS的color属性并非只能用于文本显示
对于CSS的color属性，相信所有Web开发人员都使用过。如果你并不是一个特别有经
验的程序员，我相信你未必知道color属性除了能用在文本显示，还可以用作其它地方。它
可以把页面上的所有的东西都变颜色。比如：
无法显示的图片的alt文字、 list元素的边框、无序list元素前面的小点、有序list元素前面的数字和hr元素等
1: <html>
2: <head>
3: <meta http-equiv="content-type" content="text/html;charset=utf-8">
4: <style type="text/css">
5: #div1
6: {
7: width: 375px;
8: height: 265px;
9: border: 1px solid blue;
10: }
11: </style>
12: </head>
13: <body>
14: <div id="div1">
15: <img src="test.jpg" alt="图片加载失败" style="color:blue">
16: <ol style="color:red;">
17: <li style="border: 1px solid">一</li>
18: <li>二</li>
19: <li>三</li>
20: </ol>
21: <hr style="color:red" />
22: </div>
23: </body>
24: </html>
有图为证：
2.CSS里的visibility属性有个collapse属性值：collapse
对于CSS里的visibility属性，相信你用过不下几百次。大多时候，你会把它的值设置
成visible(这是所有页面元素的缺省值)，或者是hidden。后者相当于display: none，但仍
然占用页面空间。其实visibility可以有第三种值，就是collapse。
3.CSS的background简写方式里新增了新的属性值
在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-
image,background-repeat, background-attachment, and background-position。从CSS3开始，又增加了3个新的属性值，加起来一共8个。下面是按顺序分别代表的意思：
background: [background-color] [background-image] [background-repeat] [background-attachment]
[background-position] / [ background-size] [background-origin] [background-clip];注意里面的反斜杠，它
更font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在
position后面接着写background-size。除此之外，你开可以增加另外两个描述它的属性值： background-
origin 和 background-clip.它的语法用起来像下面这个样子：
1: .example {
2: background: aquamarine url(img.png)
3: no-repeat
4: scroll
5: center center / 50%
6: content-box content-box;
7: }
4.CSS的clip属性只在绝对定位的元素上才会生效
在style中加入
1: img
2: {
3: width: 200px;
4: height: 200px;
5: clip: rect(0px 50px 200px 0px)
6: }
在HTML中
1: <img src="bei.jpg" alt="图片加载失败" style="color:blue">
发现并没有裁剪
对img进行绝对定位
1: img
2: {
3: width: 200px;
4: height: 200px;
5: position: absolute;
6: clip: rect(0px 50px 200px 0px)
7: }
clip有效：
5.元素竖向的百分比设定是相对于容器的宽度，而不是高度
当 按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding- bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。给图片增加一个 padding-top:
1: padding-top: 10%;
根据效果和估算的距离即可证明是根据宽度来算的
6.border-width属性可以使用预定义常量值
除了可以使用标准宽度值(例如5px或1em)外，border-width属性可以接受预定义的常量值：medium, thin, 和 thick事实上，如果你不给border-width属性赋值，那它的缺省值是“medium”。
7、你知道table里的empty-cells属性吗？
css里的empty-cells属性是所有浏览器都支持的，甚至包括IE8，它的用法是下面这个样子：
1: table { empty-cells: hide;}
估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器，当一个table单元格里没有东西时，就隐藏它。
但是，empty-cells仅用于“分离边框”模式，即：border-collapse:separate;
8、font-style的oblique属性值
对与css的font-style属性，我估计大家每次见到的都是使用“normal”或 “italic”两个属性值。但事实上，你还可以让它赋值为“oblique”。
9、word-wrap和overflow-wrap是等效的
word-wrap并不是一个很常用的CSS属性，但在特定的环境中确实非常有用的。我们经常使用的一个例子是让页面中显示一个长url时换行，而不是撑破页面。在原本的div中添加一个子div,设置word-wrap属性
1: <div style="width:250px;height:250px;border:1px solid red;word-wrap:break-word"> 2: My father was a self-taught mandolin player. 3: He was one of the best string instrument players in our town. 4: He could not read music, but if he heard a tune a few times, 5: he could play it. When he was younger, 6: </div>
效果
没有对长单词进行裁剪，而是将长单词作为整体另起一行显示。将word-wrap替换为overflow-wrap，效果一样。
但是，需要注意的是word-break属性,其会对长单词进行裁剪
1: <div style="width:250px;height:250px;border:1px solid red;word-break:break-all"> 2: My father was a self-taught mandolin player. 3: He was one of the best string instrument players in our town. 4: He could not read music, but if he heard a tune a few times, 5: he could play it. When he was younger, 6: </div>
效果
附：word-wrap取值：
word-break取值：
原文：http://www.ido321.com/450.html
一些常被你忽略的CSS小知识的更多相关文章
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
- 几个有益的 CSS 小知识
样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- 你未必知道的css小知识
1:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bot ...
- css 小知识
<!-- IE下消除点击图片文字后出现的虚线框代码 --> <style type="text/css">a {blr:expression(this.on ...
- css小知识
7. span { display:inline-block; width:70px; /* 超出长度以...显示 */ text-overflow: ellipsis; white-space: n ...
- css小知识 2
效果为 为什么还出现出现不同的效果? 浏览器在解析第二个p的时候,因为第二个字母见没有空格,它会认为这是一个单词没有写完,所以不会换行 列表 1.无序列表ul 第二,内部必须有子代标签<li&g ...
- CSS小知识---table表格
所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> < ...
随机推荐
- 3.8 spring - AbstractBeanDefinition 介绍
之前,我们已尽完成了xml 文档到 GenericBeanDefinition的转换, 也就是说,到这里,所有的配置都可以在GenericBeanDefinition 的实例中找到对应的配置. Gen ...
- winform访问url传参有返回值
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;usi ...
- Why are very few schools involved in deep learning research? Why are they still hooked on to Bayesian methods?
Why are very few schools involved in deep learning research? Why are they still hooked on to Bayesia ...
- MySQL分区表(转)
查看分区情况 SELECT * FROM information_schema.PARTITIONS WHERE table_name='table_name': PARTITION_NAME:分区的 ...
- UIALertView的基本用法与UIAlertViewDelegate对对话框的事件处理方法
首先,视图控制器必须得实现协议UIAlertViewDelegate中的方法,并指定delegate为self,才能使弹出的Alert窗口响应点击事件. 具体代码如下: ViewController. ...
- SaaS系列介绍之八: SaaS的运营模式
1 引言 软件的核心是它为用户解决领域相关问题的能力. ________Eric Evans,<领域驱动设计> 传统的软件生命周期中,软件的维护占整个过程的70 ...
- Android：简单的开场界面
接通过ImageView创建一个全屏的图片: <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
- C#基础精华06（Linq To XML，读取xml文件，写入xml）
1.XML概述: 可扩展标记语言XML(eXtensible Markup Language)是一种简单灵活的文本格式的可扩展标记语言,侧重于存储数据. 2.XML特点 xml 标记语言 html x ...
- 提供几个可注册的edu邮箱链接
旧版的邮箱大全有edu邮箱的专题页面,放出来2个国内edu.cn邮箱的注册地址:@live.shop.edu.cn和@abc.shop.edu.cn,现在已经停止开放注册了. 其实旧版中还做了个隐藏的 ...
- vimrc for windows
set nobackupsource $VIMRUNTIME/vimrc_example.vimsource $VIMRUNTIME/mswin.vimbehave mswin:color deser ...