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;}注释:当使用 position 属性进行对齐时,请始终包含 !DOCTYPE 声明!如果省略,则会在 IE 浏览器中产生奇怪的结果。
5,inline和block和inline-block
极限X播报 我是内敛元素1..我是内敛元素2我是超链接我是block元素
inline元素设置width,height不管用,block元素设置width,height管用,如果不设置则为浏览器最高宽,高为内容高
把inline元素设置为inline-block后设置宽和高才管用。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
block 此元素将显示为块级元素,此元素前后会带有换行符。