定位/内联元素与块元素转换
Posted awdsjk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位/内联元素与块元素转换相关的知识，希望对你有一定的参考价值。
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>
以上是关于定位/内联元素与块元素转换的主要内容，如果未能解决你的问题，请参考以下文章
CSS文档流与块级元素（block）内联元素（inline）