CSS之盒子模型與物件導向

標籤：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>

我先簡單的解釋一下，這兩張圖片就是代碼中的niunanlogo.jpg,tg029logo.gif,第一張為logo，第二張為要和新聞有關係的圖片，而新聞的連結是http：//www.tg029.com。接下來我們來對這兩張圖片進行設計。

#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之盒子模型與物件導向