CSS box model and object-oriented

CSS box model and object-oriented

I learned more than 20 sets of cool from B/S to today, and learned the CSS Box Model during web design. I feel this is really good, A simple box theory simply sums up the design of a web page. It is an outstanding abstract representative. Here we will write down our understanding of the box, after reading this, I believe that the box is actually the case.

What is a box?

When it comes to boxes, shoe boxes, and lunch boxes, in short, it is something to install, so in the web, it also refers to a container for loading things.

Comparison between box and OOP

Speaking of web boxes, let's give you some terms: content, padding, border, and margin, that is, the object to be operated on our webpage. In fact, it is very similar to our programming. In particular, we are very familiar with the object-oriented basics, inheritance and encapsulation. Let's see how similar the web box is to our object-oriented system.

1. OO: Object-oriented programming is first implemented, while the box is for the box object to write code. AllObject method ()

2. attributes and Methods: in OOP, each object has its own attributes and methods, which are good. Our boxes include content, padding, and border) and Boundary (margin). This is their attribute. As for the method, I will present it to you in the following instance.

3. Inheritance: This is even simpler. in java, do we need extends? In CSS, we only need spaces. For details, see the implementation below.

Box implementation and object-oriented implementation

If we want to put two images at the top of the webpage, one is the logo of our website, and the other is the image we link to our webpage. We should be familiar with this. Many images are in Sina, so we can enter the articles we want to read on a single machine. Let's first implement this simple implementation.

I would like to briefly explain the two pictures in the Code niunanlogo.jpg, tg029logo.gif, the first for the logo, the second for the picture to be related to the news, and the news link is http://www.tg029.com. Next we will design the two images.

# Top {/* top style */height: 120px; margin: 10px auto 10px auto;/* top, right, bottom, left */width: 760px ;} # top img {/* top image style, floating to the left */float: left ;}

Then this is what we achieved.

So where is the similarities between him and OOP? Now I will give you a simple object-oriented example.

Class Cat {private string name = ""; public Cat (string name) {this. name = name;} public string shout () {return "my name is" + name + "meow";} public void client () {Cat mimi = new Cat ("mimi"); MessageBox. show (mimi. shout ());}}

The above is to give simple object-oriented programming. We must declare an object first, and then instantiate it. Then we can call the method, now let's look at how our box is implemented.

First, he sets the top to top, that is, the top. The Cat class is written differently, but the idea is the same. Then let's look at the attributes. The cat attributes have a name attribute. Of course, there can also be many attributes, but our box also has four attributes (content) and pads (padding), border (border), border (margin), you will ask the method, the cat method has shout (), in fact in the top float: left (float to the left) it's just a method. If you still want to find a painting, for example, inheritance, I didn't see inheritance. In fact, there is still above, and top img {} is an inheritance, the img object inherits the top attribute. To implement the inheritance, you only need to add a space behind the top, and then write it to img.

Conclusion

If you say why this article does not have a detailed explanation of the CSS box, I am sorry. I just learned it. If you want to learn more in-depth painting, so I can buy a book to see it. I just found that he and our background Code have the same usage for the first time. They both achieve the separation of implementation and content, that is, our combination and aggregation principles. Since we have an object-oriented method, we can fully learn CSS based on the OO idea, isn't it much simpler? Let us know this question after I finish learning it.