牛腩之CSS核心内容_html/css_WEB-ITnose

根据牛老师的讲解，CSS的核心内容大致为四个部分：标准流、盒子模型、浮动和定位。

在学习核心内容之前，先来了解两个基本概念：块级元素和行内元素。

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的display属性默认值为“block”，意思是该标签元素为块级元素，而对于span元素来讲，它的默认值为“inline”，即行内元素。

所谓块级元素，就是在显示的时候自动占据一定的矩形空间，可以通过设置其高度、宽度、内外边距等属性，来调整矩形的显示样子；而像span这类的行内元素，则没有自己的独立空间，它是依附于其他块级元素而存在的，因此对行内元素设置高度、宽度等属性，都是没有意义的。

标准流

所谓标准流，就是标签的排列方式。通俗来讲，网页元素的显示顺序就是你在html文件里标签的书写顺序，相当于代码的顺序执行，不加任何控制语句。举个小例子：

盒子模型

所谓盒子模型，就是在网页设计中经常用到的CSS技术所使用的一种思维模型，它的属性包括：content、padding、border和margin。你可以把这种模型在生活中实例化，我们日常生活中见到的各种各样的盒子都具有上面提到的四种属性，因此才叫做盒子模型。标准的盒子模型如下图所示：

那么盒子模型在代码中如何体现，请看下面的例子：

运行结果如下：

我们都知道使用表格来排版网页，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版之后，则通过由CSS定义的大小不一的盒子和盒子的嵌套来编排网页。这种方式代码简洁，便于更新修改，能兼容更多的浏览器，比如PDA设备也能正常浏览，其优势远不止这些，大家有兴趣可以去查找相关信息。

浮动

在CSS中，我们通过float属性实现元素的浮动。具体如何控制元素的浮动与否，请看下面的例子：

首先我们先定义浮动的类选择器

接下来我们来看一个简单的浮动应用：

定位

CSS中的定位分为相对定位和绝对定位。

相对定位就是让这个元素相对于它的起点进行移动。同样对上面例子中未加浮动的代码进行定位测试，我们对元素二进行相对定位，如下：

绝对定位就是让元素的位置与文档的标准流无关，因此不占据空间。绝对定位的元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含快。

同样我们对上面的例子进行改进，来说明绝对定位是什么样的。

以上就是CSS的核心内容了，也许你会觉得很简单，不过就是对一些属性进行设置而已。没错，的确很简单，但是要想做出很好设计，还需要你熟悉很多的东西，加上多多实践的经验，应该可以做出很好的CSS布局。