前记:css其实算是前端里边比较基础的部分,但是有些意外的小情况却足够让人烦不胜烦,恰巧舍友李优雅正自学前端,遇到了一些问题,我想着不妨记录下来,等到她熟练掌握了之后再拿过去嘲笑她。。。
case 1:
李优雅:你快帮我看一下,为什么显示不出图片来!!
html部分:
<header class="header">
<div class="header_img"/>
</header>
css部分:
.header
{
background: #FFF4C1;
height: 80px;
position: absolute;
width: 100%;
}
.header_img
{
background: url(img/厦大校徽.png);
width:50px;
height: 50px;
position: relative;
margin: 15px 30px;
border-style: solid;
}
虽然她的语法有点怪(后来详说),但是我的重心是放在图片显示的问题上,我仔细查看了一下她的路径还有url的写法,发现并没有什么问题,在chrome上也可以看见图片的路径是对的,但是就是没有图片显示。。。
【排除掉所有的而不可能,剩下的,即使再不可能,那也是真相】
于是我默默地在css文件中的header_img里边加上了一句:
background-size: contain;
所以就是图片像素大小的问题,如果一张背景图片的像素过大,就会导致在div中只显示一部分的问题,这个时候用contain属性就会缩小图片以适应div的宽度,相似的,如果图片过小,那么使用cover就可以强行把div的内容填满。
。。。。。。
之后,李优雅就很开心地继续写代码去了,但是当她新增加了一个div之后,她发现了一个新的问题:
html部分
<header class="header">
<div class="header_img"/>
<div class="header_title"><a>志愿网</a></div>
</header>
css部分:
.header_img
{
background: url(img/厦大校徽.png);
width:50px;
height: 50px;
position: relative;
margin: 15px 30px;
background-size: contain;
border-style: solid;
}
.header_title
{
font-size: 14px;
position: relative;
margin: 15px 20px;
border-style: solid;
}
显示出来的网页:
所以她问我:同级的div排列起来怎么还会覆盖住呢?
我:怎么会呢,div是块级元素,会独占一行的
她:不是阿,就是覆盖住了
我:你设置了浮动吗?
她:没有啊
我:( ⊙ o ⊙ )震惊!
我当时真的是震惊的,简直觉得自己是不是学了假的css
结果!!
结果!!!
是因为
没有闭合。。。。。。。。。。。即使最后写了那个/。。。所以这不是同级元素之间的排列,这是父子之间的。。再加上子元素设置了margin,所以呈现出了那样的样子。
(2017.3.26)