这是我参与「第四届青训营 」笔记创作活动的的第10天。
浏览网页的时候常会看到“用户代理样式”,会改变我们的一些样式,看到用户代理样式说明正在使用浏览器默认样式。用户代理样式用于满足“一般显示期望”的方式显示页面,例如默认样式表将为诸如字体大小、边框等内容提供基本样式。
那么怎么才能不使用默认样式-----在页面第一行加上``即可
Z-index属性-----是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系(即元素堆叠顺序)。
运用方法:属性值有auto(默认值为0)|number(自定义;无单位的整数值,可为负数)
z-index值较大的元素将叠加在z-index值较小的元素之上。
此外z-index属性适用于定位元素position属性值为relative|absolute|fixed,其他的标准流、浮动流、静态定位都没有这个属性,也不可用此属性。
注意自定义的数字后边不可加单位。
下面看一段代码示例:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.first {
background-color: blue;
position: fixed;
}
.second {
background-color: yellow;
position: fixed;
left: 100px;
z-index: 1;
}
.third {
background-color: tomato;
position: fixed;
left: 200px;
z-index: 2;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>
</html>
展示效果图片为:
也可根据需求自己尝试其他属性值,效果会不同。