CSSボックスモデルとオブジェクト指向_html/css_WEB-ITnose

B/S に出会ってからまだ 3 日ですが、Web デザイン中に Brisket のエピソードを 20 回以上学び、これは本当に良いものだと感じています。 Web デザインはまさに抽象化の代表的なものです。これを読んだ後、誰もがこのボックスについての理解を感じられると思います。

箱とは

箱、靴箱、お弁当箱と言えば、要するに物を入れるものなので、Webでは物を入れる容器のことも指します。

ボックスと OOP の比較

Web ボックスについて、まずいくつかの名詞を挙げてみましょう。コンテンツ、パディング、ボーダー、マージンは、Web ページ内にあるものとして考えられます。実際、私たちのプログラミング、特にオブジェクト指向と非常に似ています。誰もがオブジェクト指向、継承、カプセル化の基本に精通しているはずです。それでは、この Web ボックスが私たちとどのような関係があるのか​​を見てみましょう。オブジェクト指向。

1. OO: オブジェクト指向は最初にオブジェクト指向プログラミングによって実装され、ボックスはボックスのオブジェクト用に書かれます。これらはすべて オブジェクト メソッド ()

です。 2. プロパティとメソッド: OOP の各オブジェクトには、独自のプロパティとメソッドがあり、これらはそれぞれの属性です。メソッドについては、以下の例で説明します。

3. 継承: Java ではさらに単純です。CSS では、必要なのはスペースだけです。実装方法については、以下を参照してください。

ボックス実装とオブジェクト指向実装

Web ページの上部に 2 つの画像を配置したい場合、1 つは Web サイトのロゴ、もう 1 つは Web ページにリンクする画像です。 Sina では、多くのものが画像であり、読みたい記事を 1 台のマシンで入力できます。そこで、まずこの簡単な実装を実装してみましょう。

    <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>

簡単に説明しますと、この 2 つの写真はコード内の niunanlogo.jpg と tg029logo.gif で、1 枚目はロゴ、2 枚目はニュースに関連する写真で、ニュースへのリンクは です。 http://www.tg029.com。次に、これら 2 つの写真をデザインします。

#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 を top に設定します。これは、上の

クラス Cat の書き方が異なりますが、考え方は同じです。次に、cat 属性には name 属性がたくさんありますが、このボックスには、content、padding、border、margin という 4 つの属性もあります。実際、上記の float: left (float to the left) はメソッドです。たとえば、継承などの問題を調べたい場合は、実際には、これが表示されます。上記でも、top img{} は継承であり、img オブジェクトは top のプロパティを継承します。継承を実装するには、top の後にスペースを追加して img と記述するだけです。

結論

なぜこの記事に CSS ボックスの詳細な説明がないのか疑問に思われた場合は、申し訳ありませんが、ペイントについて詳しく知りたい場合は、本を購入して読んでください。最初の連絡中に初めて、それがバックエンド コードと同じ目的を持っていることがわかりました。両方とも実装とコンテンツの分離を実現しており、これが結合と集約の原則です。そして、誰もがオブジェクト指向の手法を使用できるようになったので、CSS を学習するときは、OO の考え方に従って学習できるようになり、より簡単になるでしょうか。この問題は勉強が終わったら話します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。