css——各种属性不定期更新

最新推荐文章于 2025-06-13 16:23:26 发布

原创最新推荐文章于 2025-06-13 16:23:26 发布 · 571 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

10 篇文章

订阅专栏

本文深入讲解CSS中的white-space属性及不同值的应用场景，探讨链接样式设置原则，介绍外边距值复制规则，并解决inline-block布局间隙问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中white-space的属性值很容易搞混，事实上分为三个部分分析会简单很多，即

1. 遇到多个连续空格和tab是否处理为一个
2. 遇到换行符是否保留
3. 文本超出容器宽度时候是否自动换行

整理为表格如下
空格和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——与上类似

	空格和tab	换行符	文本超出容器宽度
normal	折叠	去除	换行
nowrap	折叠	去除	不换行
pre	保留	保留	不换行
pre-wrap	保留	保留	换行
pre-line	折叠	保留	换行