牛腩新闻发布系统（三）：CSS盒子模型及其基本内容

导读：

这些天一直在做牛腩的网页，比如什么首页、出错页、新闻内容页等。在学习的不断推进中，一些刚开始理解的不是很好的东西，也逐渐的深刻了起来。下面，就对这一段时间的学习，做一个总结。主要总结内容有：盒子模型，CSS选择器优先级，标准流和浮动。

一、概念把握

【1】盒子模型：

下图就是一个盒子模型的图例（将就着看吧，我也是尽力了！）。别的就不多说，相信这张图，大家都能看懂。主要说一下自己在学习后，对这些概念的理解。

TOP:

margin（边界、留边）：现在看到它，我就想起以前老师讲on和over的区别。当margin-top为0 时，就等于on。也就是说边界为零，紧贴，就像把两个盒子紧紧的贴在一起一样。当margin-top不为0 时，就相当于over了，也就是两个盒子中间有一定得间隔或缝隙。

优点：紧贴在一起的东西当然没有有空隙的东西易于取放，所以，设计好margin-top的值，会易于盒子的取放。

border（边、边框）：就是盒子本身的大小了。如果border值为100px，那么就代表着盒子长100个像素。

padding（衬料、填充）：这个最好理解了，尤其是网淘过瓶瓶罐罐的女性。通常，为了防止盒子里的东西被摔坏，会给垫上一层泡沫或是报纸什么的。而那个被垫上去的东西的长度大小，就是padding的大小。

content（内容）：这是实际物品的大小。比如说包裹中，那个瓶子的大小。

注：1，在实际生活中，一个盒子只能装固定大小的东西，可是，在CSS中，盒子的大小，可以随着content的大小，自动扩充。呃，姑且当压缩袋理解吧！

2，left、right、bottom同理top。

【2】选择器：

1，ID选择器：允许以一种独立于文档元素的方式来指定样式。

2，类选择器：在 CSS 中，类选择器以一个点号显示。

3，HTML选择器：用于来定义一类可以在同一个页面内重复利用的样式，或者自己定义的用于新闻列表的样式，详细的写好链接、列表、边框以及背景等属性，有些人还会习惯把一些常用的属性作为一个类。

【3】标准流

理解：标准流就像是VB过程中的顺序语句一样，写在前面的排在前面显示，写在后面的在后面显示。

例外：加上了浮动等！

注：优先级为：ID>类>HTML。

二、实践学习

1，块级元素<div>；ID选择器和类选择器

样式表设置：

2，行内元素<span>

注：这是通过改块级元素为行内元素实现，也可以通过浮动实现。（前面的同块级元素，只更改样式表）

3，盒子模型

三、学习感受

刚开始看见这个的时候，一点都不知道是啥。用多了吧，老是在写那几个东东，也就大概的知道了点。再一具体总结，就基本明白了。学习，要不断的重复、总结！

我真的是借助网淘玻璃易碎品的经验理解的盒子模型，呃，不管怎么着吧，我觉得还是蛮形象的。