div+css遇到的一些问题总结

最新推荐文章于 2021-02-04 18:49:22 发布

达里尔啊

最新推荐文章于 2021-02-04 18:49:22 发布

阅读量326

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_32439313/article/details/79703411

版权

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;（背景精灵）