标签：css   web   

从接触B/S到今天才三天，学习了二十几集的牛腩，在web设计的时候学到了CSS的盒子模型，感觉这个东西是真的好，一个简单的盒子理论就把一个网页设计的全部概括了，简直是抽象的一个杰出代表，这里就把自己对盒子的认识写出来，看完后相信大家会觉得盒子其实也就那么回事。

什么叫盒子

说到盒子，鞋盒，饭盒，总之是装东西的东西，所以在web中，他也是指装东西的一个容器。

盒子和OOP的比较

说道web盒子，我们先给大家一些名词：内容（content）、填充（padding）、边框（border）、边界（margin）我们就认为他就是一个盒子，也就是我们网页中要操作的对象，其实他和我们编程是非常的相似的，尤其是我们的面向对象，说道面向对象的基本，大家一定非常熟悉，继承，封装，那么我们来看看这个web这个盒子到底和我们的面向对象有多么的像。

1、OO：面向对象首先是面向对象的编程来实现，而盒子是面向盒子这个对象来写代码。都是对象 方法（）

2、属性和方法：OOP中每个对象都有自己的属性和方法，很好，咱们的盒子有内容（content）、填充（padding）、边框（border）、边界（margin），这就是他们的属性，至于方法，下边的实例中我会给大家呈现出来。

3、继承：这个更是简单，在java中，我们要extends是吗，在CSS中，我们只需要空格就可以，具体怎么实现，请看下边的实现。

盒子的实现和面向对象的实现

如果我们要在网页的顶端放两张图片，一张是我们网站的logo，一张是我们一个链接到我们网页的图片。这个大家应该都很熟悉把，在新浪里边很多都是图片，我们单机就可以进入想要阅读的文章。那么我们先来实现一下这个简单的实现。

    <div id="top">
            <a href="Default.aspx"><img src="images/niunanlogo.jpg" /></a>
            <a href="http://www.tg029.com" target="_blank"><img src="images/tg029logo.gif" /></a>
        </div>

#top{   /*顶部样式*/
  height:120px;
  margin:10px auto 10px auto; /*外边界的上，右，下，左*/
  width:760px;
}

#top img{
    /*顶部图片样式，浮动向左*/
    float:left;
}

那么他和OOP的相同点在哪呢，现在我再给大家实现一个简单的面向对象的例子。

 class Cat
    {
        private string name = "";
        public Cat(string name)
        {
            this.name = name;
        }

        public string shout()
        {
            return "我的名字叫"+name+"喵";
        }

        public void 客户端()
        {
            Cat mimi = new Cat("咪咪");
            MessageBox.show(mimi.shout());

        }
    }

首先他是把顶部设成top,也就是上边的<div id="top">，class Cat写法不一样，但是思想还是一样的。然后我们再看属性，猫的属性有一个name属性，当然也可以有很多，但是咱们的盒子也是有四个属性内容（content）、填充（padding）、边框（border）、边界（margin），大家会问方法呢，猫的方法有shout(),其实在上边的float：left（向左浮动）就是一个方法，如果你还是想找茬的画，例如说继承呢，我怎么没有看到继承，其实上边照样有，top img{}就是一个继承，img这个对象继承了top的属性，而且实现继承只需要top后边加一个空格，然后写img就可以。

结语

如果大家说为什么这篇文章为什么没有CSS盒子的详细讲解，那么不好意思了，我也是刚刚学习，如果大家想学习的更深入的画，那么完全可以去买一本书去看，我只是在初次接触是发现他和我们后台的代码有异曲同工之妙用，都是实现了实现与内容的分离，也就是咱们的组合和聚合原则。而且既然大家有了面向对象的方法，在学习CSS的时候，完全可以按照OO的思想去学习，那么是不是会简单很多呢？这个问题还是等我学习完了再告诉大家吧。

CSS之盒子模型与面向对象

标签：css   web   

原文地址：http://blog.csdn.net/lovemenghaibin/article/details/41148629