- css中white-space的属性值很容易搞混，事实上分为三个部分分析会简单很多，即
-
- 遇到多个连续空格和tab是否处理为一个
- 遇到换行符是否保留
- 文本超出容器宽度时候是否自动换行
整理为表格如下
空格和tab 换行符 文本超出容器宽度 normal 折叠 去除 换行 nowrap 折叠 去除 不换行 pre 保留 保留 不换行 pre-wrap 保留 保留 换行 pre-line 折叠 保留 换行
- 为链接设置不同的样式
我们知道链接有四种状态: a:link、a:visited、a:hover、a:active
使用规则是：a:hover必须在a:link和a:visited之后，a:visited必须在a:hover之后
原因：
①链接未被访问前同时拥有a:link和a:hover状态，假设排列方式为a:hover、a:link、a:visited、a:active
当鼠标指针悬浮于链接上方时候，a:hover先反应a:link后反应，最后我们看到的回事a:link的效果
②同理可以推导其它情况
- 值复制
设置外边距(margin)时候会出现重复的值，比如margin-top和margin-bottom设置数值一样
通过值复制，可以避免重复键入数值
例如，margin：10px 20px 10px 20px; //上下边距为10px，左右边距为20px
可以简写为margin：10px 20px;
不仅如此，css定义了一些规则，允许外边距指定少于4个值，具体规则如下：
若缺少外边距，设置外边距=右边距；
若缺少下边距，设置下边距=上边距；
若缺少右边距，设置右边距=上边距；
简单推导可知，若margin有3个值，则最后一个值（margin-left）等于右边距，故从第二个值复制
若margin有两个值，则第三个值（margin-bottom）等于上边距，从第一个值复制，第四个值（margin-left）等于右边距，从第二个值复制
若margin只有一个值，则剩下的三个值全部等于那个值
- clear属性
css中经常使用浮动定位，但是这样做有一个问题：浮动的元素脱离了文档流，这样很容易使页面乱了，使用clear可以让浮动元素周围的元素为其留出空间。
例子——设置一个空元素方法（w3school）：
- inline-block出现间隙问题
写导航条的时候使用inline-block，发现各个li之间出现一条缝，将margin和padding设置为0px也没用
<!DOCTYPE html>
<html>
<style>
ul{
list-style-type:none;
}
li{
display:inline-block;
border-bottom:1px solid red;
}
a{
text-align:center;
color:white;
display:inline-block;
width:80px;
text-decoration:none;
background-color:silver;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注释：</b>我们使用在测试链接中使用了 href="#"。在真实的网站中，应该是真实的 URL。</p>
</body>
</html>搜索了一些去除间隙的方法：
①改变html的结构
可以这样写
<ul>
<li><a href="#home">Home</a></li
><li><a href="#news">News</a></li
><li><a href="#contact">Contact</a></li
><li><a href="#about">About</a></li>
</ul>
或者
<ul>
<li><a href="#home">
Home</a></li><li><a href="#news">
News</a></li><li><a href="#contact">
Contact</a></li><li><a href="#about">
About</a></li>
</ul>或者借助注释
<ul>
<li><a href="#home">Home</a></li><!--
--><li><a href="#news">News</a></li><!--
--><li><a href="#contact">Contact</a></li><!--
--><li><a href="#about">About</a></li>
</ul>或者直接一行
<ul>
<li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li>
</ul>
解析：产生空隙的原因为标签之间的空格，去掉它们之间的空格自然没有间隙了。
缺点：适用于静态页面，一旦由后台生成html，扑街
②设置margin负值
缺点：margin负值的大小与上下文的字体和文字大小有关，很难把控，不推荐使用。
③删掉闭合标签
缺点：已经练成随手闭合的习惯，删掉闭合标签简直逼死强迫症，更何况，在XHTML下可是严格要求闭合的，不推荐使用此方法。
④设置父元素的font-size为0px，同时要设置inline-block中font-size大小，否则会看不到东西的。
同时使用letter-spacing:-x px来兼容safari浏览器(没有这个浏览器)（使用方法见下）。
<style>
ul{
list-style-type:none;
font-size:0px;
}
li{
display:inline-block;
border-bottom:1px solid red;
font-size:20px;
}
a{
text-align:center;
color:white;
display:inline-block;
width:80px;
text-decoration:none;
background-color:silver;
}此方法兼容大部分浏览器。
⑤使用letter-spacing
<style>
ul{
list-style-type:none;
letter-spacing:-5px;
}
li{
display:inline-block;
border-bottom:1px solid red;
letter-spacing:0px;
}
a{
text-align:center;
color:white;
display:inline-block;
width:80px;
text-decoration:none;
background-color:silver;
}
</style>不同浏览器需要设置的数值可能不一样，跟margin负值一个道理。
⑥使用word-spacing——与上类似
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
