这篇博客主要说一些不怎么常用的,但不是极其罕见的css样式;
outline
outline也是边框样式,但是不同于border的是,outline边框不占html的空间;类似于float的悬浮效果;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>I love You</span>
<div style="outline: yellowgreen 10px solid;">Tom and Jerry</div>
</body>
</html>
效果如下:
outline边框由于过宽有些遮住span标签的内容;右边的是使用border边框,其余参数都相同;我们很容易看出outline的效果;
outline的隐藏是个很好用的css样式;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input />
<div>上面有一个隐形的输出框</div>
<style >
input{
border: none;
/*outline: none;*/
}
</style>
</body>
</html>
这时,input的border边框被隐藏了,但是,当我们点击该框进行输入时,会发现还有一个边框;这个边框其实就是outline边框;
我们将上文中注释掉的代码放出来,再执行一下(即两个框都隐藏了)
overflow
是设置滚动条的,就是在文本框不够大,而内容又比较多的时候使用,防止其溢出文本框;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>《春》是现代散文家朱自清的作品。《春》是朱自清的散文名篇,最初发表于1933年7月,此后长期被中国中学语文教材选用。 [1] 在该篇“贮满诗意”的“春的赞歌”中,事实上饱含了作家特定时期的思想情绪、对人生及至人格的追求,表现了作家骨子里的传统文化积淀和他对自由境界的向往。1927年之后的朱自清,始终在寻觅着、营造着一个灵魂深处的理想世界——梦的世界,用以安放他“颇不宁静”的拳拳之心,抵御外面世界的纷扰,使他在幽闭的书斋中“独善其身”并成就他的治学。《春》描写、讴歌了一个蓬蓬勃勃的春天,但它更是朱自清心灵世界的一种逼真写照。</div>
<style>
div{
overflow: auto;
height: 50px;
width: 200px;
}
</style>
</body>
</html>
中间那句话是百度对《春》的简介,我们看效果;
这里overflow:auto 是自适应设置滚动条;也可以通过overflow-x 和 overflow-y 指定设置横向或纵向滚动条;注意:因为英文字母不会自动换行,因此使用overflow:auto 设置文本内容为英文字母的自适应滚动条时,横向和纵向滚动条都会有;
visibility
隐藏标签;它不同于display:none的是display甚至可以看做是取消,设置为display:none的标签不仅不可见,而且不占用HTML的空间;而设置为visibility:hidden的标签仅为不可见,但是还会占用HTML的空间;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="visibility: hidden;">Tom and Jerry</span>
<span>Tom and Jerry</span>
<span style="display: none;">Tom and Jerry</span>
<span>Tom and Jerry</span>
<style>
span{
border: blue 1px solid;
}
</style>
</body>
</html>
效果如下:
我们可以清楚的看到,第一个span标签仅是隐藏了,但还占用空间,而第三个span标签可以说直接没了;
vertical-align
调整文字的基线(基线就是文字排版的高度);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>Tom and Jerry</span>
<img src="img/Butterfly06.jpg" />
<!--<style>
img{
vertical-align: middle;
}
</style>-->
</body>
</html>
这是不使用vertical-align调整基线的效果;
文字的高度没有在图片的中部,我们看起来感觉会不美观;然后将上述注释掉的vertical-align样式放出来;效果如下;
外边距合并
当多个标签都规定了margin的值(外边距),就会出现外边距合并的现象;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="margin-bottom: 50px;">Tom and Jerry</span><br />
<span style="margin-bottom: 25px;margin-right: 50px;">Tom and Jerry</span>
<span style="margin-left: 50px;">Tom and Jerry</span>
<style>
span{
border: red 1px solid;
display: inline-block;
}
</style>
</body>
</html>
我们设置三分span标签,全都使用display:inline-block方法提升至块级标签;然后设置边距,第一个span标签与下面的(第二个)span标签的间距设置为50px;第二个span标签与上面的span标签的间距为25px,与右边的(第三个)的边距为50px;第三个span标签与左边的边距为50px;然后我们看效果;
我们会发现,外边距合并时分两种情况;1)上下外边距不合并,但是去两个标签较大的外边距作为共同的外边距;2)左右边距进行合并及相加得到共同的外边距。