实现 回到顶端图标 的定位效果
postion:fixed fixed 后就是相对于body定位 就会脱离整个文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid black; width: 900px; height: 900px;">
<div style="width: 300px; height: 300px; background-color:indianred;"></div>
<!--;position: fixed;参照整个body不变 bottom: 30px;right: 30px 里左侧下侧 -->
<div style="width: 300px; height: 300px;background-color:cadetblue;position: fixed;bottom: 30px;right: 30px;"></div>
<div style="width: 300px; height: 450px; background-color:yellowgreen;"></div>
</div>
<br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br ><br >
</body>
</html>
效果
relative 不会脱离文档流，相对于自己原来的位置进行定位
一定要注意英文格式符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="border: 1px solid black; width: 300px; height: 300px;">
<div class="in" style=" background-color:red;"></div>
<div class="in" style="background-color:yellow; position:relative;bottom:15px;"></div>
<div class="in" style="width:150px;background-color:blue;"></div>
</div>
</body>
</html>
absolute 脱离文档流，相对于position为非static的父标签定位（标签默认都是static的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="border: 1px solid black; width: 300px; height: 300px; position: relative;">
<div class="in" style=" background-color:red;"></div>
<div class="in" style="background-color:yellow; position:absolute;bottom: 15px;"></div>
<div class="in" style="width:150px;background-color:blue;"></div>
</div>
</body>
</html>
margin 边缘
用途
1
用于标签之间拉开距离 用于设置当前标记距离其他标记的间距
向外作用力 外边距 不会改变原标签的大小
2.
margin-top;margin-bottom;margin-right;margin-left:10px
缩写
一个值 margin:10px;
上下左右间隔都10px
四个值 上右下左依次 顺时针 margin:top right bottom left;
三个值 上 左右 下
两个值 上下 左右
3.对于行内元素需要改变 为行内加块级元素 display:incline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
background-color: black;
}
i{
display: inline-block;
/*margin-bottom: 10px;
margin-left:20px;
margin-right: 20px;
margin-top: 10px;*/
/*margin:10px 20px 10px 20px;*/
/*margin:20px;*/
/*margin:50px 100px;*/
margin: 5px 30px 10px;
background-color: blue;
}
</style>
</head>
<body>
<div style="border: 1px solid red;">河南省高新区</div>
<span>大学</span><i>hello</i><span>大学</span>
<div style="border: 1px solid red;">河南省高新区</div>
</body>
</html>
padding 填充
1
用于标签之间拉开距离 用于设置当前标记距离其他标记的间距
内作用力 内边距 改变原标签的大小
2.
padding-top;padding-bottom;padding-right;padding-left:10px
缩写
一个值 padding:10px;
上下左右间隔都10px
四个值 上右下左依次 顺时针 padding:top right bottom left;
三个值 上 左右 下
两个值 上下 左右
3. padding 可以 直接对行内元素起作用 一般要和maegin 联合 也有display
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
background-color: black;
}
i{
display: inline-block;
background-color:blue;
/*margin: 10px;*/
/*padding: 10px;*/
padding: 10px 30px;
}
</style>
</head>
<body>
<div style="border: 1px solid red;">河南省高新区</div>
<span>大学</span><i>hello</i><span>大学</span>
<div style="border: 1px solid red;">河南省高新区</div>
</body>
</html>
hover 悬浮
1.实现消除下划线 改色 text-decoration: none;
2.鼠标悬浮上后 出现下划线 并且颜色改变
要加一个a:hover 像选择器的东西
text-decoration: underline;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
color:#000000;
}
a:hover{
color:red;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="http:://www.baidu.com">百度</a>
</body>
</html>
选择器
id 标签 class （一般使用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.s1{
font-size: 5px;
}
#p1{
font-size: 15px;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<span class="s1">河南省</span>
<p id="p1">郑州时间</p>
<p>重庆时间</p>
</body>
</html>
分组选择器
各种选择器放在一起，一起实现相同的功能比较方便，比如都放大都斜体
.s1,#p1,p{
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.s1,#p1,p{
font-size: 30px;
}
</style>
</head>
<body>
<span class="s1">河南省</span>
<p id="p1">郑州时间</p>
<p>重庆时间</p>
</body>
</html>
后代选择器
父子标签下 父子选择器构成的一种选择器
body .s1或者span{
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body span{
font-size: 30px;
}
html body p{
color: red;
}
body #p1{
color: yellow;
}
</style>
</head>
<body>
<span class="s1">河南省</span>
<p id="p1">郑州时间</p>
<p>重庆时间</p>
</body>
</html>
通配符选择器*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
color: blueviolet;
}
/*等效于*/
/*html,body,meta,title,style,span,p{
color: blueviolet;
}*/
</style>
</head>
<body>
<span class="s1">河南省</span>
<p id="p1">郑州时间</p>
<p>重庆时间</p>
</body>
</html>
消除边框间隙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*消除默认框的间距*/
*{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<span class="s1" style="border: 1px solid black;">河南省</span>
<p id="p1" style="border: 1px solid black;">郑州时间</p>
<p>重庆时间</p>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看