标签：弹框 htm 美国 编写 index z-index aci 理解 inline
1.文档流文档流，是指盒子按照HTML标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，每个盒子都占据自己的位置。
2.关于定位
我们可以使用css的position属性来设置元素的定位类型，设置如下：
（1）relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
.box01{
background-color: yellow;
position: relative;
left: 50px;
}（2）absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相当于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
（3）fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
（4）static默认值，没有定位，元素出现在正常的文档流种，相当于取消定位属性或者不设置定位属性。
（5）inherit 从父元素继承position属性的值
3.定位元素的偏移
定位的元素还需要用left，right，top，bottom来设置相对于参照元素的偏移值。
代码
<head>
<meta charset="utf-8">
<title>定位例子</title>
<style type="text/css">
.con{
width: 80px;
height: 80px;
background-color: gold;
margin: 50px auto;
position: relative;
border-radius: 14px;
}
.box{
width: 28px;
height: 28px;
background-color: red;
text-align: center;
line-height: 28px;
position: absolute;
left: 70px;
top: -15px;
border-radius: 14px;
}
</style></head>
<body>
<div class="con">
<div class="box">5</div>
</div></body>
代码2
<head>
<meta charset="utf-8">
<title>定位02</title>
<style type="text/css">
.meun{
width: 800px;
height: 100px;
position: fixed; /*fixed内容悬浮在浏览器上*/
top: 0px;
left: 50%;
margin-left: -400px;
/*margin: 50px auto;*/
background-color: gold;
}
p{
text-align: center;
}
.popup{
width: 500px;
height: 300px;
background-color: aqua;
border: 1px solid #000000;
position: fixed;
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -150px;
z-index: 100;
}
.mask{
width: 100%;
height: 100%;
background-color: #000000;
position: fixed;
left: 0;
top: 0;
opacity: 0.5; /*opacity透明度*/
z-index: 98;
}
.pupcon{
display: block; /*调整display值隐藏或显示弹框*/
}
</style></head>
<body>
<div class="meun">菜单</div>
<div class="pupcon">
<div class="popup">
<h2>标题</h2>
</div>
<div class="mask"></div>
</div></body>
4.background属性
是CSS应用较多且重要的一个属性，负责给盒子设置背景图片和背景颜色的，background是一个复合属性，
（1）background-color 设置背景颜色
（2）background-image 设置背景图片地址
（3）background-repeat 设置背景图片如何重复平铺
（4）background-position 设置背景图片的位置
（5）background-attachment 设置背景图片是固定还是随着页面滚动条滚动
推荐用法：background：#000 url(bgimage.gif) no-repeat left center fixed
代码
<head>
<meta charset="utf-8">
<title>背景图定位</title>
<style type="text/css">
.box,.box01{
width: 120px;
height: 160px;
border: 1px solid #000;
background: url("image/夏8.png");
background-position: -150px -60px;
position: absolute;
}
.box{
left: 100%;
}
.boxcon{
height: 162px;
/*border: 1px solid #000;*/
}
.boxcon h1{
display: inline-block;
position: absolute;
left: 50%;
margin-left: -80px;
font-size: 50px;
color: pink;
}
.box02{
width: 620px;
height: 720px;
border: 1px solid #000;
background: url("image/夏8.png");
background-position: -580px -50px;
position: absolute;
left: 50%;
margin-left: -250px;
}
body{
margin: 0px;
}
</style></head>
<body>
<div class="boxcon">
<h1>夏目友人帐</h1>
<div class="box01"></div>
<div class="box"></div>
</div>
<div class="box02"></div></body>
代码2
<head>
<meta charset="utf-8">
<title>雪碧图列表</title>
<style type="text/css">
.list{
list-style: none;
width: 300px;
height: 305px;
margin: 50px auto;
padding: 0;
/*background-color: aqua;*/
}
.list li{ /*类名越长，权重越高*/
height: 60px;
border-bottom: 1px dotted #000;
line-height: 60px; /*垂直居中*/
text-indent: 60px; /*首行缩进*/
background: url("/image/序号.png") no-repeat left 3px;
}
.list .sty02{ /*类的权重值高于标签*/
background-position: 0px -62px;
}
.list .sty03{ /*类的权重值高于标签*/
background-position: 0px -117px;
}
.list .sty04{ /*类的权重值高于标签*/
background-position: 0px -182px;
}
.list .sty05{ /*类的权重值高于标签*/
background-position: 0px -243px;
}
</style></head>
<body>
<ul class="list">
<li class="sty01">美国队长</li>
<li class="sty02">惊奇队长</li>
<li class="sty03">蝙蝠侠</li>
<li class="sty04">海王</li>
<li class="sty05">钢铁侠</li>
</ul></body>
标签：弹框 htm 美国 编写 index z-index aci 理解 inline
原文地址：http://blog.51cto.com/13742773/2334071
