1. 在写很多网站首页的时候都会遇到一些小图标,曾经以为是一些图片,结果检查却怎么也找不到它的图片地址。最终了解 到在线字体库这么一个东西,通过@font-face{src:url('地址')来引入;font-family: '自定义字体名称';}这样就可以像是使用普通字体一样使用了,最好是把在线字体下载下来和css文件放在一起,有些网站是不允许外部直接链接使用在线字体的。
2.遇到的第二个问题,子元素和父元素的margin-top合并在一起,导致一起移动?
解决方法:1.给父元素加一个border
2.让父元素浮动
3.使用绝对定位
4.父元素增加padding-top属性
5.给父元素overflow不为visiable属性
3.盒子使用绝对定位以后,浮在其他盒子上面,掩盖其其他盒子内容?
解决方法:给绝对定位的盒子加一个z-index: -1;默认为0,这样其他盒子就显示出来了。
4.使用绝对定位让盒子水平和垂直方向居中的办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1{
width: 100%;
height: 200px;
background-color: #ccc;
position: relative;
}
.div2{
top: 50%;
left: 50%;
width: 200px;
height: 100px;
position: absolute;
margin-left: -100px;
margin-top: -50px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
另外一种更好的办法是
.div2 {
width: 200px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;/*这行代码是关键*/
}
5.图片的一些相关属性
给图片一个宽或高,他会自动按比例放大缩小
border-size: 100%;图片铺满整个盒子。
background-position: x y;(背景精灵)