彻底弄懂CSS盒子模式之二
i.先来分析一下这个导航栏要用到多少个盒子，在分析之前我们还是要形成
一种思想：尽量减少和优化XHTML代码，让他们基本上都有语义。这个导航栏最少的盒子实现是：最外边一个大盒子(ul)，这个盒子与1像素高的背景图片等宽，里面又有五个小盒子(li)分别装着每一个导航栏，这个盒子与“勾月”图形等高，导航栏这个盒子里面又装着一个稍小的盒子(a)，这个盒子又装着一个黄色的修饰盒子(a的左边框，这里勉强理解为盒子，因为它不像一般的边框那么细，在网页中看起来像个盒子)和一个有文字的链接盒子(a的内容)。
网页结构代码：
2．现在正式开始做，做之前初始化一下各签标的边界和填充，这里用样式：
3.2．组装最外边的大盒子ul，宽200px,高为自动auto或者干脆不要，背景图片为
bj.jpg，背景纵向重复，用
- 方式引用样式，用到样式：
4.#nav {
background: url(bj.jpg) repeat-y;
width: 200px;
overflow: hidden;
}
5.3．组装每条导航的盒子li，这个盒子与“勾月”图形等高，并把“勾月”图形以
背景形式放在这个盒子的左边，并用15px的填充把盒子内容区块推向正中合适位置（当然你也可以考虑给子级a指定边界属性来实现），并让这个盒子靠左边对齐（因为这个盒子的宽度比外边的大盒子小，如果相等则可以不用考虑对齐方式），这里用到样式float的属性，本人没有写入样式中则取其默认值，样式代码如下：
6.#nav li {
background: url(lan.gif) no-repeat left center ;
height: 35px;
width: 190px;
padding-top:15px;
}
7.
4．组装链接盒子a，这里用到样式： display: block;让链接以块状方式呈现，并为链接安排背景图片，为了安全起见设置背景不重复，垂直居中（如果浏览器出错解释错误，而你的背景又不是纯色的，那么盒子过大导致的背景重复将会影响网页美观），链接文字样式去除下划线，整个盒子右对齐，样式如下：
8.#nav a {
background: url(lanbj2.gif) no-repeat left center;
text-decoration: none;
height: 20px;
width: 155px;
display: block;
float: right;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
}
9.5．组装黄色修饰块盒子(a的左边框，如果又独立用一个盒子来做就不科学了，因
为此方法最简单)，直接给a加入下面一条样式即可，样式代码如下：
10.#nav a {
border-left:10px solid #f90;
}
11.6．最后简单为鼠标移到链接上时，链接风格的改变指定一个样式：
12.#nav a:hover {
background-image: url(lanbj3.gif);
color: #FFFFFF;
}
13.至此完成样式代码编写，上面已给出内容部分的结构代码，把它们结合到网页中就
算是完成本次导航栏的制作。再次感谢本专栏斑竹blankzheng指点优化。
CSS3——盒子模型
在浏览器上运行得网页实际上就是一份HTMＬ文件,这份文件得主体则就是由多个HTML标签所组成, 网页在显示这些标签得时候,会使用盒子模型来计算这些标签该如何显示在网页上。盒子模型得定义里,每个显示在网页上得标签都就是一个矩形对象,这些矩形对象包含了各种显示样式,在浏览器显示网页给用户时,会依照这些显示样式,来决定网页上标签得面积、边距、位置等显示外观。 另外,盒子模型中得矩形对象都包含了一个内容区域,这个内容区域能够容纳其她得矩形对象,盒子模型通过这样一层套一层得方式,将树状结构得标签,展开成为树状结构得矩形对象、浏览器在显示网页给用户时,会依照这个树状结构得矩形对象,来决定矩形对象之间会互相影响得显示外观。 矩形对象得主要得几个样式如下: １。外边距(marｇiｎ):定义了矩形对象与其她矩形对象之间得距离,包括矩形对象与内容区域之间得距离、同一个内容区域内相邻得两个矩形对象之间得距离。 (１)mａrgiｎ得属性内容可以设置为长度、百分比、autｏ等属性、当设置为百分比时,会依照父矩形对象得内容区域大小来作为百分比得计算基数;
当设置为ａuto时,浏览器会参照矩形对象本身、父矩形对象、定位样式等得样式,由浏览器自动配置矩形对象得外边距大小、 (2)外边距合并功能:上下两个相邻得矩形对象之间得外边距会合并,合并后得外边距会以较大得数值作为设置值。 2。边框(bｏｒder):定义边框得框线样式与框线粗细,还有颜色。
3.内边距(paｄding):内边距定义内容区域与边框之间得距离。同样得,其属性值可以就是长度、百分比(同外边距)等。
4。宽度与高度(ｗidth、hｅｉｇht):定义盒子模型得内容区域得大小,其属性可以就是长度、百分比与ａｕｔo等。
CSS盒子模型
CSS基础-盒模型 盒模型 边框属性 ?什么边框? ?边框就是环绕在标签宽度和高度周围的线条 ?边框属性的格式 ?连写(同时设置四条边) ?border: 边框的宽度边框的样式边框的颜色; ?示例代码 ? ? bd+ border: 1px solid #000; ?注意点: ?连写格式中颜色属性可以省略, 省略之后默认就是黑色?连写格式中样式不能省略, 省略之后就看不到边框了?连写格式中宽度可以省略, 省略之后还是可以看到边框?按方向连写(分别设置四条边) ? border-top: 边框的宽度边框的样式边框的颜色;
? border-right: 边框的宽度边框的样式边框的颜色; ? border-bottom: 边框的宽度边框的样式边框的颜色; ? border-left: 边框的宽度边框的样式边框的颜色; ?示例代码 ? ? bt+ border-top: 1px solid #000; ? br+ border-right: 1px solid #000; ? bb+ border-bottom: 1px solid #000; ? bl+ border-left: 1px solid #000; ?按要素连写(分别设置四条边) ? border-width: 上右下左; ? border-style: 上右下左; ? border-color: 上右下左; ?示例代码