1.将内联元素转化为块元素：display：block
2. 将块元素转化为内联元素：display：inline
3.相对定位：相对于元素本身应该在的位置移动（相对于自己）position：relative
4.绝对定位：距离父类（有position样式的父类 body） position：absolute 5.相对于浏览器窗口 position：fixed
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联元素与块元素的转换</title>
<style>
#d1{ 200px;height: 200px;background: red;margin: auto;padding: 50px;display: inline}
#s1{ 100px;height: 100px;background:blue ;margin:10px 20px;padding:10px 30px;display: block}
#d2{ 200px;height: 200px;background:black;display: none;} </style> </head>
<body>
<div id="d1"> wos </div>
<div id="d2"><span id="s1">woc</span></div>
</body>
</html>
相对定位和绝对定位：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#d{ 200px;height: 200px;background: red}
#d1{ 50px;height: 50px;background: blue;position: relative;left: 20px;top: 20px}
#d2{ 50px;height: 50px;background: pink}
#dd{ 200px;height: 200px;background:green;position: relative}
#dd1{ 50px;height: 50px;background: black;position: absolute;left: 20px;top: 50px;}
#dd2{ 50px;height: 50px;background: grey;position: absolute;left: 30px;top: 60px;}
</style>
</head>
<body>
<div id="d">
<div id="d1"></div>874646
<div id="d2"></div>
</div> <div id="dd">
<div id="dd1"></div>
<div id="dd2"></div>
</div>
</body>
</html>