CSS box model and object-oriented_html/css_WEB-ITnose

It has only been three days since I came into contact with B/S. I have learned more than 20 episodes of brisket and learned the CSS box model during web design. I feel that this thing is really good, a simple box. The theory summarizes all aspects of web design, and is simply an outstanding representative of abstraction. Here I will write down my understanding of the box. After reading it, I believe everyone will feel that the box is actually just that.

Speaking of boxes, shoe boxes, lunch boxes, in short, they are things to hold things, so in the web, it also refers to a container to hold things.

Speaking of web boxes, let’s first give you some nouns: content, padding, border, margin. We think of it as a box, that is It is the object to be manipulated in our web page. In fact, it is very similar to our programming, especially our object-oriented. Speaking of the basics of object-oriented, everyone must be very familiar with it, inheritance, and encapsulation. So let’s take a look at this web How similar is the box to our object-oriented approach.

1. OO: Object-oriented is first implemented by object-oriented programming, and the box is written for the object of the box. They are all Object methods ()

2. Properties and methods: Each object in OOP has its own properties and methods. Very good, our box has content, filling (padding), border (border), and margin (margin), these are their properties. As for the methods, I will show them to you in the example below.

3. Inheritance: This is even simpler. In Java, we need to extend, right? In CSS, we only need spaces. For how to implement it, please see the implementation below.

If we want to put two pictures at the top of the web page, one is the logo of our website, and the other is a picture linking to our web page. Everyone should be familiar with this. In Sina, many of them are pictures, and we can enter the articles we want to read on a single machine. So let's implement this simple implementation first.

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

So what are the similarities between it and OOP, now Let me give you another simple object-oriented example.

 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());        }    }

First of all, he sets the top to top, which is the