z-index，标签之间的嵌套规则，精灵图，整站练习(css初始化)

本文链接：https://blog.youkuaiyun.com/boxyuan/article/details/76390991

本文详细介绍了CSS中z-index属性的作用及其使用方法，探讨了如何通过精灵图优化页面资源加载，并提供了CSS初始化的具体实践，包括清除默认样式及浮动等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

z-index定位：

作用：设置页面中元素的层级关系

取值：正整数

标签之间的嵌套规则：

行内元素只能包含行内元素
块级元素可以包含所有的行内元素和部分块内元素
p标签h标签不能包含块级元素

精灵图：

将页面上较小的图放在一张大图上

制作精灵图：

精灵图必须是小的图片
精灵图之间一定要留有足够的间隙
精灵图的大小一定要大于所有的图片中最大的那个
完成精灵图一定要在精灵图下面留有足够的空隙
背景图不要放在精灵图上

整站练习：

css初始化

清除标签的margin和padding
清除img的边框
清除li标签前的小点
给页面设置一个统一的字体大小和颜色，还要设置body的背景颜色，body{font-size:14px}
清除浮动
a标签设置字体颜色，下划线，以及hover
设置浮动

整体css初始化源码

/*css初始化，begin*/
html,body,ul,li ,p ,h1,h2,h3,img,input
{
	margin: 0;
	padding: 0;
}
img
{
	border: 0;
}
ul
{
	list-style: none;
}
body
{
	font-size: 14px;
	color: darkgray;
	font-family: "宋体";
	background-color:papayawhip;
	
}
/*清除浮动*/
.clearfix:after{
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}
.clearfix
{
	zoom:1px;
}

a{
	 
	color: darkgray;
	text-decoration: none;
}
a:hover{
	color:orange;
}
.f1
{
	float: left;
}
.fr
{
	float: right;
}

/*css初始化，end*/