theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

demo

Browse Source
This commit is contained in:
asd 2021-01-18 18:34:44 +08:00
parent 1c003714c3
commit 9853dbdd91
6 changed files with 144 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
csspress/csspress.zip
View File

Binary file not shown.

52
csspress/demo2/absolute.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 60px;
height: 60px;
}
.box1 {
width: 200px;
height: 200px;
background: yellow;
margin: 20px;
/* position:static */
position: absolute;
}
.box2 {
background: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<p>
<p> 注：这里红色的div是依据 body定位的，而不是根据父元素黄色的div 定位，</p>
<p> 加上position static 后也是根据body 定位，</p>
<p>当父元素的Position声明为 absolute 时，红色会依据父级黄色定位，但是会超脱文档流，影响下面的元素</p>
</p>
</body>
</html>

4
csspress/demo2/position.html → csspress/demo2/fixed.html
View File

@ -23,8 +23,10 @@
} }
.box2 { .box2 {
width: 50px;
height: 20px; height: 20px;
position: fixed;
top: 30px;
width: 100%;
background: red; background: red;
} }
.box3{ .box3{

35
csspress/demo2/relative.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 60px;
height: 60px;
}
.box1 {
background: yellow;
}
.box2 {
background: red;
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div class="box1">暖暖</div>
<div class="box2"></div>
</body>
</html>

54
csspress/demo2/zixiangfujue.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 60px;
height: 60px;
}
.box1 {
width: 200px;
height: 200px;
background: yellow;
margin: 20px;
/* position:static */
position: relative;
}
.box2 {
background: red;
position: absolute;
top: 10px;
left: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<p>
<p> 注：两个div都是绝对定位时，这里红色的div是依据 body定位的，而不是根据父元素黄色的div 定位，</p>
<p> 加上position static 后也是根据body 定位，</p>
<p>当父元素的Position声明为 absolute 时，红色会依据父级黄色定位，但是会超脱文档流，影响下面的元素</p>
</p>
<p>
总结2： 父元素是相对定位 子元素是绝对定位时，不会扰乱整体的布局而且可以使子元素依据父元素边缘定位
</p>
</body>
</html>

BIN
csspress/image-20210118112058180.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB