✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
默认情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
background-color: #0093E9;
border: 1px dashed yellow;
}
#second{
background-color: #80D0C7;
border: 1px dashed blue;
}
#third{
background-color: salmon;
border: 1px dashed green;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位
相对于自己原来的位置 进行指定的偏移
相对定位的话 它仍然在标准文档流中 原来的位置会被保留
position: relative
top left bottom right;
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
background-color: #0093E9;
border: 1px dashed yellow;
/*相对定位*/
position: relative;
top: -20px;
left: 20px;
}
#second{
background-color: #80D0C7;
border: 1px dashed blue;
}
#third{
background-color: salmon;
border: 1px dashed green;
position: relative;
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
方块定位练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
100px;
height: 100px;
text-decoration: none;
background: salmon;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #0093E9;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 绝对定位
基于xxx定位 上下左右
1. 在没有父级元素的情况下 相对于浏览器定位
2. 假设父级元素存在定位 相对于父级元素进行偏移
3. 在父级元素范围内移动
相对于父级或浏览器的位置 进行指定的偏移
绝对定位的话 它不在标准文档流中 原来的位置不会被保留
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
position: relative;
}
#first{
background-color: #0093E9;
border: 1px dashed yellow;
}
#second{
background-color: #80D0C7;
border: 1px dashed blue;
/*绝对定位*/
position: absolute;
right: 30px;
top: -10px;
}
#third{
background-color: salmon;
border: 1px dashed green;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
/*绝对定位 相对于浏览器*/
100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
/*固定定位 fixed*/
100px;
height: 100px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index及透明度
#content{
margin: 0;
padding: 0;
200px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px black solid;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBackground{
position: absolute;
200px;
height: 25px;
top: 140px;
}
.tipText{
color: white;
z-index: 999;
}
.tipBackground{
background: black;
/*背景透明度*/
opacity: 0.5;
/*注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- z-index 默认是0 最高无限制-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li class="tipText">图片一</li>
<li class="tipBackground"></li>
<li>时间：2021-07-07</li>
<li>地点：地球</li>
</ul>
</div>
</body>
</html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14983614.html
版权所有，如需转载请注明出处。