1.内联元素与块元素
块元素：明显特征是独占一行，可以设置宽高 maring和padding可以设置
内联元素:不独占一行，无法设置宽高，maring和padding可以设置水平的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联元素与块元素的转换</title>
<style>
#s1{
width: 200px;
height: 200px;
background: red;
margin: auto;
padding: 50px;
/*将块元素转换成内联元素*/
display: inline;
}
#d2{
width: 200px;
height: 200px;
background: yellow;
/*将元素隐藏起来*/
display: none;
}
#s2{
width: 100px;
height: 100px;
background: blue;
/*内联元素无法设置maring与padding竖直方向，可以设置左右*/
margin: 50px 20px;
padding: 10px 30px;
/*将内联元素转换成块元素*/
display: block;
}
</style>
</head>
<body>
<div id="s1">起于凡而非凡</div>
<div id="d2">
<span id="s2">起于凡而非凡</span>
</div>
</body>
</html>
3.绝对定位与相对定位：
相对定位：相对与元素自己本身来移动定位
绝对定位:距离父类(有position样式的父类)...要是没有找到父类，就有默认的body来代替
备注；/*z-index:值后面不要加像素 想让哪个在前面就把哪个的值设大*/
fixed定位相对于浏览器窗口定位 position:fixed;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位/相对定位</title>
<!--相对定位：相对与元素自己本身来移动定位
绝对定位:距离父类(有position样式的父类)...要是没有找到父类，就有默认的body来代替-->
<style>
#zong{
width: 200px;
height: 200px;
background-color: #00FBFF;
}
#d1{
width: 50px;
height: 50px;
background-color:#68FB00;
/*相对定位*/
position: relative;
left: 20px;
bottom:20px;
}
#d2{
width:50px;
height: 50px;
background-color:pink;
}
#zong1{
width: 200px;
height: 200px;
background-color:red;
position: relative;
}
#dd1{
width: 50px;
height: 50px;
background-color:#E0FF00;
left: 20px;
top:50px;
/*绝对定位*/
position: absolute;
/*z-index:值后面不要加像素 想让哪个在前面就把哪个的值设大*/
z-index:100;
}
#dd2{
width:50px;
height: 50px;
background-color:#8900FF;
z-index: 500;
position: absolute;
left: 30px;
top: 60px;
}
</style>
</head>
<body>
<div id="zong">
<div id="d1"></div>
起于凡而非凡
<div id="d2"></div>
</div>
<div id="zong1">
<div id="dd1"></div>
<div id="dd2"></div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/awdsjk/p/10637205.html
时间： 2024-08-01 22:26:21