<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css布局样式</title>
<style type="text/css">
#first{
width:200px;
height:200px;
border:3px black solid;
position:absolute;
right:100px;
top:100px;
}/*绝对定位*/
#second{
width:200px;
height:200px;
border:3px red solid;
position:relative;
left:100px;
top:92px;/*与绝对定位差8出现同样高度,与其他因素无关*/
}/*相对定位*/
#third{
width:200px;
height:200px;
border:2px blue solid;
position:fixed;
bottom:10px;
right: 10px;
}/*固定定位*/
#third{
</style>
</head>
<body>
<div id="first"></div><!--绝对定位-->
<div id="second"></div>
<span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span><!--相对定位-->
<div id="third"></div>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>
学习html&css的笔记.zip
需积分: 1 201 浏览量
2024-01-05
22:47:42
上传
评论
收藏 16KB ZIP 举报
学习html&css的笔记.zip （25个子文件） 
code_111230 
style.css 22B
10(盒子模型Σ）.html 2KB 2.html 596B 13(垂直居中2).html 679B 7.html 579B 12（水平居中-不定宽块状元素2）.html 450B 8(子选择器》.html 924B 8.3（伪类选择符）.html 935B 5.html 875B 9（文字格式合）.html 1KB 3.html 368B 4.html 1KB 1.html 382B 6.html 2KB 13(垂直居中3).html 746B 8.4（分组选择符）.html 940B 11(css布局 浮动布局）.html 373B 8.1(后代选择器》.html 935B 12（水平居中-不定宽块状元素3）.html 880B 13(垂直居中).html 303B 11(css布局 层布局）.html 2KB 11(css布局 流动布局）.html 977B 11(css布局 流动+浮动）.html 806B 12（水平居中-不定宽块状元素）.html 696B 8.2（通用选择器）.html 852B资源评论
