dispaly属性，position属性
Posted windSeek
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dispaly属性，position属性相关的知识，希望对你有一定的参考价值。
position:absolute;绝对定位相对于父元素（父元素设为relative）
position:relative;相对定位相对于自己
position:fixed;固定定位相对于浏览器
display:inline;行内元素，不换行,text-align:center不起作用
display:block;块级元素，换行，能设置宽高
display:inline-block;能设置宽高,不换行,text-align:center起作用
自适应居中
<div class="title">
<span class="message">等待钣金</span>
<span class="num">12</span>
</div>
.content .title span{position: relative;top:12px;height:15px;line-height: 15px;}
.content .title span:last-child{display:inline-block;font-size: 14px;color:white;border-radius: 15px; background-color:#c19b74;width:27px;}
上下左右自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
position: relative;
width:100px;
height:100px;
background: green;
}
img{
position: absolute;
margin-top: auto;
margin-bottom : auto;
top: 0;
bottom: 0;
height:100%;
}
</style>
</head>
<body>
<div id="test">
<img>
</div>
</body>
</html>
只是对img有用
以上是关于dispaly属性，position属性的主要内容，如果未能解决你的问题，请参考以下文章
HTML代码中如何用POSITION属性来固定一个DIV模块的位置，让其不随滚动条移动？
在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途