1. 盒子模型
一个盒子模型有内容（content）、边框（border）、间隙（padding）、间隔（margin），4 部分组成；
盒子的实际宽度（或高度）由 content + padding + border + margin 组成；
通过设置 width 与 height 的值能控制 content 的大小，并对于任何一个盒子，都能分别设置4条边框 border、padding、margin；
2. 元素定位
2.1 float 定位
float 属性的参数有 left、right 或默认 none，当设置元素向右向左浮动时，元素回向父元素的左侧或右侧靠近；
例子 1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float 属性</title>
<style type="text/css">
body{
margin: 15px;
font-family: Arial;font-size: 12px;
}
.father{
background-color: #ff0;
border: 1px solid #333;
padding: 25px;
}
.sn1{
padding: 10px;
margin: 5px;
background-color: #ffff00;
border: 1px dashed #333;
float: none;
}
.sn2{
padding: 5px;
margin: 0px;
background-color: #ffd270;
border: 1px dashed #333;
}
</style>
</head>
<body>
<div class="father">
<div class="sn1">float3</div>
<div class="sn2">float4</div>
</div>
</body>
</html>
若 sn1设置了float的值为 right 时，会有如下效果：
2.2 position 定位
position 定位是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置；
position 属性的参数分别有：static、absolute、relative、fixed；
例子 2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position 属性</title>
<style type="text/css">
#father{
background-color: #ffff66;
border: 1px dashed #000;
width: 100%;
height: 100%;
padding: 5px;
}
#bck1{
background-color: #fff0ac;
border: 1px dashed #000;
padding: 10px;
position: relative; /* 相对定位 */
left: 30px;
top: 35px;
}
#bck2{
background-color: #ffbd76;
border: 1px dashed #000;
padding: 10px;
}
</style>
</head>
<body>
<div id="father">
<div id="bck1">reative</div>
<div id="bck2">block2</div>
</div>
</body>
</html>
块1 的position 属性值为 relative，块1现在是相对于页面的相对定位（即在其默认显示的位置上，通过上下左右四个参数设置偏移一定的距离，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置）；
2.3 z-index 空间位置
z-index 属性用于调整定位时重叠的上下位置，即想象页面为 x-y 轴，垂直页面的方向为 z轴，z-index 值大的页面位于其值小的上方；
注意： z-index 属性的值为整数，能是正值或负值；当块被设置了position 属性时，该值便能设置各块之间的重叠高低关系；默认的 z-index 值为 0；当两个块的 z-index 值一样时，将保持原有的高低覆盖关系；
例子 3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index属性</title>
<style type="text/css">
body{
margin: 10px;
font-family: Arial;
font-size: 13px;
}
#b1{
background-color: yellow;
border: 1px dashed #000000;
padding: 10px;
position: absolute;
left: 20px;
top: 30px;
z-index: -1; /* 高低值 -1 */
}
#b2{
background-color: red;
border: 1px dashed #000000;
padding: 10px;
position: absolute;
left: 40px;
top: 50px;
z-index: 0; /* 高低值 0 */
}
#b3{
background-color: greenyellow;
border: 1px dashed #000000;
padding: 10px;
position: absolute;
left: 60px;
top: 70px;
z-index: 1; /* 高低值 1 */
}
</style>
</head>
<body>
<div id="b1">AAAAAAA</div>
<div id="b2">BBBBBBB</div>
<div id="b3">CCCCCCC</div>
</body>
</html>
2.4 文字阴影效果
例子 4：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影效果</title>
<style type="text/css">
body{
margin: 18px;
font-family: 楷体;
font-size: 60px;
font-weight: bold;
}
#b1{
position: relative;
z-index: 1;
}
#b2{
color: red;
/*阴影颜色*/
position: relative;
top: -1.06em;
/*移动阴影*/
left: 0.3em;
z-index: 0;
/*阴影重叠关系*/
}
</style>
</head>
<body>
<div id="father">
<div id="b1">定位阴影效果</div>
<div id="b2">定位阴影效果</div>
</div>
</body>
</html>
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
