CSS——盒子属性
什么是盒子？
根据页面中元素显示的模式不同，分为块级元素（block）、行内元素（inline）、行内块元素（inline-block）等多种类别。
行内元素
行内元素在页面中的宽高随文本的内容决定，不能设置宽高，并且行内元素中间不能包含块级元素。
a标签、span标签及大部分文字标签都属于行内元素。
块级元素
块级元素在页面中以盒子的形式呈现，默认宽100%，独占一行，并且块级元素可以包含其他各类元素。
段落(p)、标题(h1~h6)、列表(ol，ul，li)等都属于块类元素。
行内块元素
图像(img)则可以认为是行内块元素，呈现为盒子，但不独占一行。
盒子模型
此处说的盒子属性，针对块、行内块以及其他小众的盒子元素有效。
一般的盒子模型由外到内包括：
边距(margin)、边框(border)、填充(padding)和内容(content)，如下图所示。
background(背景)
background-color用于设置盒子的背景颜色，也可通过background-image属性设置背景图片。例：
.bj { background-color: #999; }
body { background-image: url(pbg.gif); }
此外，还可对背景图片进行渐变、拉伸等处理，在这里不在一一展示，读者可自行进行练习，相关属性如下：
需要注意的是，若外层元素和内层元素同时设置了背景，则内层背景优先；若单个元素同时设置了背景色和背景图像，则背景图像优先。
margin(边距)
margin用于设置盒子与其他元素之间的距离，很多盒子都有默认的边距，如body、ul、ol、h1~h6、p等。
margin系列属性如下表所列：
padding(填充)
padding系列属性设定盒子内容与盒子四边的间隔，相关属性如下表所示：
border(边框)
border是margin和padding的分界线。border有粗细，本身也会占据一定的尺寸。
border属性包括线型、粗细、颜色三个分量，常用的border属性如下表所列：
项目2-2——鱼香肉丝3
学完了盒子模型的基础属性，我们再来对鱼香肉丝进行改造吧。
在之前项目2-1的基础上，继续添加背景、边框、填充，最终效果如下：
操作步骤：
-
将项目P02-01.html另存为P02-02.html；
-
创建标签选择符样式body，设置边距为0，并添加背景色和背景图像；
body {
background-image: url(bg2.jpg);
background-repeat: repeat-x;
background-color: #F1F0B8;
margin: 0px;
}
-
该样式设定了页面背景图像横向重复，并设定了背景色。背景色与背景图像衔接。也可以使用背景色渐变，不再赘述；
-
创建标签选择符样式li，设置下边框和上填充：
li {
border-bottom: dashed 1px #050;
padding-top:10px;
}
宽高及box-sizing
width, height
大多数块类元素的默认宽度是100%，高则是适应内容。
也可以通过设定CSS的width和height属性，对盒子的宽高进行设置。如下例所示：
<p.kg>既应用了样式p，又应用了样式.kg。浏览效果显示如下：
box-sizing
默认的盒子宽高仅仅指content区，不包含填充、边框以及边距。
通过box-sizing属性，我们可以修改默认的宽高属性。
box-sizing: content-box表示宽高仅约束content区，在指定宽高之外绘制填充、边框、边距空间，这是默认值。
box-sizing: border-box表示宽高约束content、填充和边框，在指定宽高之内绘制填充和边框。例子如下：
显示效果如下：
背景原点、裁剪和位置
background-origin用于设定背景原点；
background-clip用于设定背景的裁剪范围；
background-position则设置背景起铺位置，也就是在原点基础上的偏移。
默认的背景是从填充开始铺设，即background-origin: padding-box；
如果想要在边框盒子范围铺设，即background-clip: border-box。
可以设定背景的原点和裁剪范围，他们有同样的可选属性值：border-box、padding-box、content-box。
看下面一个例子：
背景原点不必处在裁剪范围之内，背景依旧从原点铺设，只不过裁剪范围之外不显示背景。浏览效果如下图：
项目2-3——倒置元素顺序(负边距)
正常情况下，页面元素依照数据流顺序排列，参考如下代码：
<div.#div01>，<div#div02>，<div03>依次排列，显示效果如下：
此处希望把<#div03>放在最前面显示，同时希望<#div01>优先渲染，因而不能改变数据流顺序。此时，可以尝试使用负边距的方法来完成。操作步骤如下：
1. 修改前述的样式：
#div03{
background:#aaa;
margin-top:-180px;
/*(#div01+#div02+#div03)(height)*/
height:60px;
}
计划以margin-top:-180px将<#div03>提前到<#div01>之前显示；
2. 考虑到在<#container>最上方为<#div03>预留位置，继续修改以下样式：
#container{
background:#f00;
padding:10px;
padding-top:70px;
/*#div01(height)+#container(padding-top)*/
}
浏览效果如下：
上述效果有些奇怪。视觉上看，<#container>仅仅包含了<#div03>，而且，后续的文字紧跟着呈现，与<#div01>产生重叠；
究其原因，缘于<#div03>是<#container>的最后子元素，负边距使<#div03>上移，<#container>也会在<#div03>处结束，后续空间安排给后续元素；
要避免这种情况，可以设置<#container>的下填充或下边距，以便为<#div01>和<#div02>等子元素拓展呈现空间；
3. 继续修改样式：
#container{
background:#f00;
padding:10px;
padding-top:70px;
/*#div01(height)+#container(padding-top)*/
padding-bottom:130px;
/*(#div02+#div03)(height)+#container(padding-bottom)*/
}
最终，浏览效果如图所示。
