这一篇其实早就该写了，敲牛腩的时候，只是跟着老师打，没有系统地学习CSS这部分的知识。 从图书馆借了书。 最近，因为想系统地学习这部分的知识，所以今天花了一整天做网页，重新学习了箱子的模型和浮动的知识。 今天我们来谈谈箱子的模型。
当CSS处理页面时，它认为每个元素都包含在一个看不见的盒子中。 盒子模型由内容区域、内容区域周围的空间、内页边距的外部边缘以及将元素与相邻元素分隔开的不可见区域组成。 把盒子模型想象成挂在墙上的画吧。 画是内容，衬里是内侧的空白，画框是框，与相邻画框的距离是外侧的距离。
当然，我们也可以把它当成一个真正的快递柜。 接下来看看箱子的模型图。
盒子模型图
DEMO:不看箱子的模型由这四个部分组成。 其实他一点也不简单。 今天我和他比了一天的力量。 其实网页是由一个个要素组成的，不用说，让我们来看一个小例子。 这个小例子是页面导航的例子，代码如下。
前台代码：nav是标记导航的要素，他能够明确地表示主导航链接的区域，ul是无序列表的结构
nav role='navigation' %--导航--% ul class=' nav Li ' lia href='/' class=' current-page ' home/a/lilia
CSS样式：
pre name=' code ' class=' CSS ' pre name=' code ' class=' html '/*导航栏样式*/. nav Li { border-top :50 px solis /*灰色*/padding:45em 0 .5em；/* 708 */}.nav lia { color : # 292929； 显示：在线块； padding :5 em 1.15 em.5em 1.4 em； 字体故障： sans-serif； 字体权重： 700； text-transform: uppercase； }.nav Lili { border-left :1 px solid # c8c8c8； 显示：在线块； } .navli li:first-child { /*对第一个li使用底边属性，取消左边框，即还原为默认样式*/border-left: none； }
最终效果：
简单讲解：
绿色顶部边框，5像素的粗线表示底部边框为灰色，1像素的细线没有左右边框，分别为7像素和8像素(em为相对长度)，没有全部的内部边距。 内边距被设置为水平线和垂直线分开。 如果没有内侧边界，上下的距离就没有了，太紧凑了。 (如下图所示，外部边距为默认值
3358 www.Sina.com/display 3360 inline-block可以水平显示，并具有块级元素的性质。 没有这个，就没有外面的空白。 其中，em是相对距离，相对是默认字体数值，字体默认为16px，因此，如下图所示，是内侧空白的设定。四个值的顺序根据钟表的针流分别为上、右、下、左字体架。 如果浏览器不支持第一种字体，则可以选择第二种、第三种。 在此设定字体的font-wight :字体的粗细text-transform336660
a元素(链接)讲解：首先设置列表的左窗格。 这是一条1像素的实心灰色线条，两个箭头将水平和垂直左窗格中的设置列表并排显示为行内元素。 并且，具有块内的要素的特征，若最初的LI、即HOME的左框没有display和first-child的设定
今天总结了这个页面的小例子。 在没有接触web开发之前，我认为web排版就像word排版。 实际做了之后，发现没有想象中那么简单。 上面的小例子，其实还涉及很多其他的小知识点。 有兴趣的人可以研究一下。 小例子虽然不花时间，但其实这个页面做了一天，很有成就感。 虽然还有很多不明白的事情。 学习是~记住一点就很开心了！