[网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
DIV+CSS学习笔记(二)
一、盒子
盒子是很好理解的，关键是运用时要恰当。
盒子的基本概念，一个content（内容），三个属性：padding,border,margin,其中这三个属性又都带有top,right,bottom,left4个位置分属性，注意顺序是从顶，右，底，左算起的。
border的基本属性包括color,width,style,其中style要注意记一下：
none（无）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹线）、ridge（脊线）、inset（内凹线）、outset（外凸线）。
对于各种style的线，火狐浏览器支持得很好，但IE支持得就很不理想了，另外还要注意的是，在给元素设置background-color背景时，IE作用的区或为content+padding,而Firefox则是content+padding+border,当border很粗时，就会特别明显。如果是设置<body>,<body>是很特殊的一个盒子，它的背景会延伸到margin的部分，还有，<boyy>盒子的宽度不是由其内部的内容决定的，而是由浏览器窗口决定的，在设置各种margin时要注意这个问题。
对于设置padding或margin时，如果只设置一个值，表示上下左右4个均为该值；如果设置两个值，前者为上下值，后者为左右值；如果设置三个值，第1个为上值，第2个为左右值，第3个为下值；如果设置为四个值，依次为上、右、下、左值。
经验：当一个盒子设置了背景图像后，默认覆盖的范围是padding和内容组成的范围，并以padding的左上角为基准点平铺背景图象。
二、盒子之间的关系
先看一个例子：
CSS如下：
<style type="text/css">
body{
margin:0 0 0 0;
font-family:宋体;
font-size:12px;
}
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
/* 没有设置边框 */
}
li {
color: black; /* 黑色文本 */
background: #aaa; /* 浅灰色背景 */
margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
list-style: none /* 取消项目符号 */
/* 未设置边框 */
}
li.withborder {
border-style: dashed;
border-width: 5px; /* 设置边框为2像素 */
border-color: black;
margin-top:20px；
}
</style>
BODY如下：
<body>
<ul>
<li>第1个列表的第1个项目内容</li>
<li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
</ul>
<ul>
<li>第2个列表的第1个项目内容</li>
<li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
</ul>
</body>
效果如下：
三、标准文档流
定义：不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
1、块级元素
总是以一个块的形式表现出来，且跟同级兄弟块依次竖直排列，左右撑满。
2、行内元素
比如:文字元素，<strong></strong>,<a></a>都是行内元素，不占用独立区域，仅在其它元素的基础上指出了一定的范围。
四、<div>村记与<span>标记
<div>是一个块级元素，它包围的元素会自动换行，<span>是一个行内元素，在它的前后不会换行，<span>没有结构上的意义，纯粹是应用样式，当基他行内元素都不合适时，就可以使用<span〉元素。
这里还需要注意：<span>村记可以包含于<div>标记中，反之则不行，
五、盒子在标准流中的定位原则
1、行内元素之间的水平margin:当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加第2个元素的margin-left
2、块级元素之间的竖直margin：两个块级元素之间的距离不是margin-bottom加margin-top,而是两者中的较大者，这个现象称为margin的“塌陷”现象。
3、嵌套盒子之间的margin:嵌套形成的两个父子块，其中子块的margin将以父块的content为参考。
这里注意，子div 的margin为负值时，IE会扩大父div区域来装子div,但FoxFire却不会，从而形成“错位”，所以在设计时，最好计算好各自区域的大小。
看看下边的图，分析一下各字母的值，根据上边的代码能分析出来就差不多理解盒子了:
a:由于body的margin设置为0，因此a的值为ul的左margin,15像素。
b:ul的左padding加li的左margin,25像素。
c:第二个li的border,即5px;
d:li的左padding,即10px;
e:计算完其它部分再来计算这里
f:第二个li的border,5px;
g:ul的右padding加上li的右margin,25px;
h:ul的右margin,15px;
i:由于body的margin设置为0，因此，i的值为ul的上margin,15px;
j:ul的上padding加上li的上margin,25px;
k:li的上下margin加上文本的高度，34px;
l:两个li相邻，因此上面的li的下margin和下面li的上margin相遇，发生“塌陷”现象，因此l的值为两者中较大者，而两者相同，l的值为20px;
m:第二个li的border,5px;
n:li的上下padding和两行文字的高度，48px;
o:同m
p:ul的下padding加上li的下margin，25px;
q:两个ul相邻，上面的ul的下margin和下面的ul的上margin相遇，发生“塌陷”现象，因此，q的值为两者中较大者，两者一样，q的值为15px;
