内联元素与块元素的转换、相对定位和绝对定位

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{width: 200px;height: 200px;background: red;margin: auto;padding: 50px;display: inline}

 #s1{width: 100px;height: 100px;background:blue ;margin:10px 20px;padding:10px 30px;display: block}  

#d2{width: 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{width: 200px;height: 200px;background: red}  

#d1{width: 50px;height: 50px;background: blue;position: relative;left: 20px;top: 20px}  

#d2{width: 50px;height: 50px;background: pink}

 #dd{width: 200px;height: 200px;background:green;position: relative}

 #dd1{width: 50px;height: 50px;background: black;position: absolute;left: 20px;top: 50px;}

 #dd2{width: 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>

posted @ 2019-04-01 19:32  94554685  阅读(525)  评论(0编辑  收藏  举报