自学内容网 自学内容网
自学内容网 > 正文

web前端开发--

🕗 发布于 2024-11-26 01:29 前端  css  

1、绝对定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.box{/*定义大盒子的样式*/
width: 200px;
height: 100px;
background: #CCCCCC;
position: relative;/*对父元素设置相对位置*/
}
/*定义三个小盒子的样式*/
.one,.two,.three{
width: 50px;
height: 50px;
background-color: #AAFFFF;
border: 1px solid #333333;
/*如果盒子2和盒子3高度相同边框为1px导致的不对齐*/
}
.two{
position: absolute;/*设置绝对位置*/
left: 50px;/*相对于父元素的左边缘的水平偏移50px*/
top: 30px;/*相对于父元素的上边缘的垂直偏移30px*/
}
</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #CCCCCC;
position: relative;/*设置相对变量，但不设置偏移量*/
}
.one,.two,.three{
width: 100px;
height: 100px;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>

2、清除浮动的影响

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动的影响</title>
<style type="text/css">
.one{/*定义一个盒子*/
width: 200px;
height: 100px;
background-color: #00FF00;
float: left;
}
/*clear表删除，后跟left表示清除左侧浮动的影响，rigth表示清除右侧浮动的影响，both，表示左右浮动都删除*/
.two{/*定义一个盒子*/
height: 100px;
width: 200px;
background-color: #F00;
float: left;
}
p{
clear: both;/*清除浮动的影响*/
}
</style>
</head>
<body>
<div class="one">第一块盒子</div>
<div class="two">第二块盒子</div>
<p>默认条件下，网页中的块元素会以标准流的方式竖直排列，即块元素一一罗列。但在网页实际排版时，有时需要，将块元素水平排列，之就需要为元素设置浮动属性。</p>
</body>
</html>

3、清除左浮动对元素的影响

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除左浮动对元素的影响</title>
<style type="text/css">
.a1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}

.a2{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.a3{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
p{
    clear: left;/*清除文字对左侧浮动的影响*/
}
</style>
</head>
<body>
<div class="a1">
one
</div>
<div class="a2">
two
</div>
<div class="a3">
three
</div>
<p>
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
   
</p>
</body>
</html>

4、清除右浮动对元素的影响

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除右浮动对元素的影响</title>
<style type="text/css">
.a1{
width: 200px;
height: 200px;
background-color: red;
float: right;
}

.a2{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
.a3{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
p{
    clear: right;/*清除文字对左侧浮动的影响*/
}
</style>
</head>
<body>
<div class="a1">
one
</div>
<div class="a2">
two
</div>
<div class="a3">
three
</div>
<p>
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
   
</p>
</body>
</html>

5、清除浮动影响

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动影响</title>
<style type="text/css">
.a1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}

.a2{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
.a3{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
p{
    clear: both;/*清除浮动的影响*/
   /*清除元素左右的影响*/
}
</style>
</head>
<body>
<div class="a1">
one
</div>
<div class="a2">
two
</div>
<div class="a3">
three
</div>
<p>
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我
   
</p>
</body>
</html>

6、大盒子包含小盒子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大盒子包含小盒子</title>
<style type="text/css">
.box{         /*设置大盒子 的样式，不设置高度*/
width: 450px;
background: #FF0000;
overflow: hidden;
/*清除浮动影响，使父元素适应子元素的影响*/
}
.one{/*定义小盒子样式*/
width: 200px;
height: 100px;
background-color: #FF0000;
float: left;/*设置左浮动*/
margin: 10px;
}
.two{/*定义小盒子样式*/
width: 200px;
height: 100px;
background-color: #00FF00;
float: left;/*设置左浮动*/
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="one">第一个块</div>
<div class="two">第二个块</div>
</div>
</body>
</html>

7、固定位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定位置</title>
</head>
<body>
<img style="position: fixed;right: 0;top: 200px;z-index: 999;width: 100px; src="img/cao.jpg";
</body>
</html>

8、新年快乐

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新年快乐</title>
<style type="text/css">
.box{
position: relative;
width: 400px;
height: 400px;
background: url(img/happy.png) no-repeat;
margin: 50px auto;
}
.one,.two,.three,.four{
position: absolute;
width: 50px;
height: 50px;
background-color: #f00;
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
.one{
left: 0;
top: 0;
}
.two{
right: 0;
top: 0;
}
.three{
right: 0;
bottom: 0;
}
.four{
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="one">新</div>
<div class="two">年</div>
<div class="three">快</div>
<div class="four">乐</div>
</div>
</body>
</html>

9、块元素的水平外边距

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块元素的水平外边距</title>
<style type="text/css">
.one{
width: 200px;
height: 100px;
background: #FF0000;
float: left;/*设置块左浮动*/
margin-right: 10px;/*定义第一块的右外边距*/
}
.two{
width: 200px;
height: 100px;
background: #00FF00;
float: left;/*设置块左浮动*/
margin-left: 30px;/*定义第二块的左外边距*/
}
</style>
</head>
<body>
<div class="one">第一个块</div>
<div class="two">第二个块</div>
</body>
</html>

10、块间距的垂直外边距

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块间距的垂直外边距</title>
<style type="text/css">
.one{
width: 200px;
height: 100px;
background: #FF0000;
margin-bottom: 10px;/*定义第一块的下外边距*/
}
.two{
width: 200px;
height: 100px;
background: #00FF00;
margin-top: 30px;/*定义第二块的上外边距*/
}
</style>
</head>
<body>
<div class="one">第一个块</div>
<div class="two">第二个块</div>
</body>
</html>

11、元素不浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元素不浮动</title>
<style type="text/css">
.one{/*定义第一个盒子的样式*/
width: 200px;
height: 100px;
background-color: #F00;/*红色*/
}
.two{   /*定义第二个盒子样式*/
width: 200px;
height: 100px;
background-color: #0F0;/*绿色*/
}
</style>
</head>
<body>
<div class="one">第一块</div>
<div class="two">第二块</div>
<p>默认情况下，网页中的块元素，会以标准流的方式竖直排列，及块元素从上到下一一罗列。但在网页实际排版时，有时需要将块元素水平排列，这就为元素设置浮动属性。</p>
</body>
</html>

12、大盒子包含小盒子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大盒子包含小盒子</title>
<style type="text/css">
.box{/*定义大盒子样式，不设置高度*/
width: 700px;
background: green;
overflow: hidden;
/*清除浮动影响，使父元素适应子元素的高*/
}
.one{/*定义子盒子的样式*/
width: 300px;
height: 200px;
background-color: red;
float: left;/*设置左浮动*/
margin: 10px;
}
.two{/*定义子盒子的样式*/
width: 300px;
height: 200px;
background-color: yellow;
float: left;/*设置左浮动*/
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>

13、overflow验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow验证</title>
<style type="text/css">
#a1{
width: 500px;
height: 200px;
background-color: red;
overflow: hidden;/*溢出的内容会被裁减，裁剪内容不可见*/
}
#a2{
width: 400px;
height: 200px;
background-color: yellow;
overflow: auto;/*产生滚动条，即自适应产生的内容*/
}
#a3{
width: 300px;
height: 200px;
background-color: greenyellow;
overflow: scroll;/*溢出内容容易被裁剪，浏览器会始终产生滚动条*/
}
#a4{
width: 300px;
height: 200px;
background-color: pink;
overflow: visible;/*对元素内容不做处理，内容可能会超出容器*/
}
</style>
</head>
<body>
<p id="a1">
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
</p>
<p id="a2">
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
</p>
<p id="a3">
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
</p>
<p id="a4">
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但到乃点的
虑到乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考
击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到考虑
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
乃点击欸iOS加快了那你艰苦艰苦的肌肤抵抗力量考虑实际困窘但是考虑到
</p>
</body>
</html>

14、段落浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落浮动</title>
<style type="text/css">
.one{/*设置第一个盒子的样式*/
width: 200px;
height: 100px;
background-color: #FF0000;
float: left;
}
.two{/*设置第二个盒子的样式*/
width: 200px;
height: 100px;
background-color: #00FF00;
float: left;
}
</style>
</head>
<body>
<div class="one">第一个盒子</div>
<div class="two">第二个盒子</div>
<p>默认情况下，网页中的块元素，会以标准流的方式竖直排列，及块元素从上到下一一罗列。但在网页实际排版时，有时需要将块元素水平排列，这就为元素设置浮动属性。</p>
</body>
</html>

15、相对定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background: #ccc;
}
.one,.two,.three{
width: 50px;
height: 50px;
background-color: #AAFFFF;
border: 1px solid #333333;
}
.two{
position: relative;/*设置相对位置*/
left: 50px;/*相对于原来的位置水平偏移50px*/
    top: 30px;/*相对于原来的位置垂直偏移30px*/
}
</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</body>
</html>

16、相对定位:相对于自身的定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位:相对于自身的定位</title>
<style type="text/css">
#box{
width: 400px;
height: 400px;
background: #ccc;
}
#one,#two,#three{
width: 100px;
height: 100px;
background: #00FF00;
border: 1px solid #333333;
}
#two{
position: relative;/*设置一个相对定位*/
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div id="box">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
</body>
</html>

17、静态定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静态定位</title>
<style type="text/css">
/*定义一个大盒子的样式*/
.box{
width: 200px;
height: 200px;
background: #ccc;
}
/*定义一个小盒子的样式*/
.one,.two,.three{
width: 50px;
height: 50px;
background-color: #aaffff;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</body>
</html>

18、z-index只对定位元素有效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index只对定位元素有效</title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: yellow;/*定位元素中的相对定位*/
position: relative;
z-index: 10;
}
.two{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 10px;
bottom: 100px;
z-index: 20;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>


原文地址：https://blog.csdn.net/2403_87427886/article/details/143960387

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • 前端---HTML（一）

    HTML是构建网页的基础语言，它通过标记元素的方式来描述网页结构。理解HTML的基本结构和常用标签是掌握网页开发的第一步。通过标签和属性的组合，开发者可以灵活地控制网页的显示内容、结构、样式及功能，为

    阅读更多2024-11-26
  • Redis的管道操作

    深度剖析redis管道操作原理

    阅读更多2024-11-26
  • 如何做含有identify抓信号的fpga版本（image或者Bit）

    如何做含有identify抓信号的fpga版本（image或者Bit）

    阅读更多2024-11-26
  • 【Python】构建事件驱动架构：用Python实现实时应用的高效系统

    事件驱动架构（Event-Driven Architecture，EDA）是一种基于事件流动进行系统设计的模式，广泛应用于游戏开发、实时监控和分布式系统中。它通过解耦事件的生产者和消费者，提升系统的可

    阅读更多2024-11-26
  • 淘宝架构演化

    LAMP（Linux+Apache+MySQL+PHP）标准架构，初期采用拿来主义，只具备基本功能。数据库：读写分离，MyISAM存储引擎2003年5月—2004年1月。

    阅读更多2024-11-26
  • 基于信号处理的图像算法原理与应用

    本文深入探讨了基于信号处理的图像算法，详细阐述了其原理，包括图像的信号表示、频域分析、滤波等核心概念，并结合多种具体的图像算法如傅里叶变换、小波变换、卷积神经网络等进行原理剖析。同时全面介绍了这些算法

    阅读更多2024-11-26
  • 基于Matlab的图像去噪算法仿真（三）

    从仿真结果可以看出：为验证本文算法的滤波效果，对加入不同噪声的图像进行了滤波测试。本算法相对于其它几种算法其效果都有明显的改进，既能够很好地消除噪声，又能够较好地保持图像边缘细节，而且算法简单，易于实

    阅读更多2024-11-26
  • 公网弹性绑定负载均衡收费吗？

    公网弹性绑定负载均衡收费吗？公网弹性绑定负载均衡（ELB）是收费的。费用主要包括公网IP费、带宽费和负载均衡实例费。其中，带宽费可以按固定带宽或实际使用流量计费，而实例费则根据类型、规格和使用时长来定

    阅读更多2024-11-26
  • 算法编程题-寻找最近的回文数

    本文将对LeetCode 原题 564 寻找最近的回文数进行讲解，并且给出golang语言的实现，该实现通过了所有测试用例且执行用时超过100%的提交，最后给出相关的复杂度分析。

    阅读更多2024-11-26
  • 力扣--LCR 154.复杂链表的复制

    请实现 copyRandomList 函数，复制一个复杂链表。在复杂链表中，每个节点除了有一个 next 指针指向下一个节点，还有一个 random 指针指向链表中的任意节点或者 null。

    阅读更多2024-11-26
自学内容网
Copyright © 2015-2024