前端学习，问题汇总

最新推荐文章于 2022-07-08 23:01:14 发布

danchejikafo

最新推荐文章于 2022-07-08 23:01:14 发布

阅读量333

点赞数

分类专栏：前端

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（注：大部分摘自妙味课堂笔记，或者其他相关查询）

Q1:background-position：center center 为什么设置滚动后北京图片会消失呢?

background-position是背景定位，背景图会根据所设置的偏移量进行移位。
当背景图滚动（background-attachment）的值为fixed时，背景图根据浏览器可视区域的原点进行偏移。
当背景图滚动（background-attachment）的值为scroll时，背景图根据当前容器的原点进行偏移。
当背景图超出容器大小后，则无法显示。

Q2:font复合样式需要什么固定顺序？font-style font-weight font-size font-family

使用 font 复合样式时有以下注意几点：
1. 必须要有的
font符合属性必须要有font-size以及font-family两条属性。
2. 顺序是要有的
除了font-style和font-weight可以颠倒位置，其他的必须按照这个顺序来。
3. 每个参数之间用空格隔开，但是font-size和ling-height之间用“/”。
font-weight 和 font-style 是可以调换位置的哦

Q3：绝对定位怎么使用？

相对定位一般都是配合绝对定位使用的，绝对定位得有一个定位父级，不然会相对document进行偏移，所以一般都会在绝对定位元素的父级身上加上一个相对定位，这样绝对定位元素就是相对于父级发生偏移，比较好控制

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
		}
		.box{
			background-color: red;
			margin: 100px auto;
			position: relative;/**父类relative,子类absolute*/
		}
		.content{
			position: absolute;
			background: blue;
			left:-6px;
			top:-6px;
			z-index: 2;
		}
		.mark{
			position: absolute;
			background: black;
			right:-6px;
			bottom:-6px;
			z-index: 1;
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="content"></div>
		<div class="mark"></div>
	</dive>
</body>
</html>

Q4:h1-h6的像素是多少？
浏览器默认为body:100%=16px;
浏览器计算得出
h1=32px
h2=24px
h3=18.72px
h4=16px
p=16px
h5=13.28px
h6=12px

Q5:body有默认margin，其他标签也有很多默认样式，手动设置样式有哪些？

/* CSS Document */
/*--------------reset--------------*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
	margin:0;		
}
body{
	font:12px "微软雅黑";	
}
ul,ol{
	margin:0;
	padding:0;
	list-style:none;	
}
h1,h2,h3,h4,h5,h6,strong,b{
	font-weight:normal;	
}
a{
	text-decoration:none;
}
img{
	vertical-align:top;
	border:none;	
}
i,em{
	font-style:normal;	
}
.fl{
	float:left;	
}
.fr{
	float:right;	
}
.clearfix:after{
	content:"";
	display:block;
	clear:both;
	height:0;
	overflow:hidden;
	visibility:hidden;	
}
.clearfix{
	zoom:1;	
}