div,css常用技术

1,<div></div>一张图作为背景的用法：

必须指定width,height，background属性

.smallCircle{ margin-top: 25px;  margin-left: 40%; width: 10px;height: 10px; background:url(../images/smallCirlce.png) no-repeat;}

2,div 让这个DIV居中布局。

.fdiv{margin: 0 auto;width: 998px;height: 462px;}

3，用position: relative 准确定位

.navbg{height: 100px; position: relative; top: -12px;background: url(../images/nav_02.png) no-repeat center top;}

 

.huodong5 .h_title{color: #02b5ba;font-size: 30px; font-weight:bold;position: relative;left: 141px;top:40px;}
.huodong5 .h_content{width: 494px;height: 196px;position: relative;left:341px;top: 100px; line-height:2.5; font-size:12px; letter-spacing: 2px;}
.huodong5 .h_content .leizhu1{font-size: 14px; color: #02b5ba; font-weight:bold;}

 

这里不推荐用relative，如果实在要用，则父元素相对定位，子 元素用position:absoulte;relative会使元素的宽高不变，

用padding-top取代top，padding-left取代left即可

position:absoulte默认找上层第一个position是absoulte或者relative没找到则相对于body绝对定位

4，父元素相对定位，子元素绝对定位，可以使子元素相对于父元素定位，right是相对于父元素的。

.container
{
	position:relative;
	width:500px;
	height: 20px;
	background-color: antiquewhite;
	left: 50px;
}
.right
{
	position:absolute;
	right:0px;
	width:300px;
	background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="container">
	<div class="right">
	<p><b>注释：</b>当使用 position 属性进行对齐时，请始终包含 !DOCTYPE 声明！如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>
	</div>
</div>

5,inline和block和inline-block

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>极限X播报</title>
<style>
    span{width:500px; height:50px; background-color: aqua; display: inline-block;}
    .a1{display: block;}
</style>
</head>
<body>
    <span>我是内敛元素1</span><span>..我是内敛元素2</span><a class="a1" href="#">我是超链接</a></sp><div>我是block元素</div>
</body>
</html>

inline元素设置width,height不管用,block元素设置width,height管用，如果不设置则为浏览器最高宽,高为内容高

把inline元素设置为inline-block后设置宽和高才管用。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

block 此元素将显示为块级元素，此元素前后会带有换行符。 

posted on 2015-05-18 13:08  防空洞123  阅读(277)  评论(0)  编辑  收藏  举报

导航