码迷,mamicode.com
首页 > 其他好文 > 详细

dispaly属性,position属性

时间:2016-10-28 19:45:35      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:top   margin   pre   有用   ast   font   absolute   title   元素   

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属性

标签:top   margin   pre   有用   ast   font   absolute   title   元素   

原文地址:http://www.cnblogs.com/windseek/p/6008833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!