- 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——与上类似