CSS box model and object-oriented_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS box model and object-oriented_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:54:06

Original

1077 people have browsed it

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.

What is a box

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.

Comparison between boxes and OOP

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.

Box implementation and object-oriented implementation

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>

Copy after login

Let me explain briefly. These two pictures are niunanlogo.jpg and tg029logo.gif in the code. The first one is the logo, and the second one is related to the news. The picture, and the link to the news is http://www.tg029.com. Next we will design these two pictures.

#top{   /*顶部样式*/  height:120px;  margin:10px auto 10px auto; /*外边界的上，右，下，左*/  width:760px;}#top img{    /*顶部图片样式，浮动向左*/    float:left;}

Copy after login

Then this is the effect after our implementation

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

Copy after login

The above is about simple object-oriented programming. We must first declare an object, then instantiate it, and then call the method. Now let’s take a look at our How the box is implemented.

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

above. The class Cat is written differently, but the idea is still the same. Then we look at the attributes. The cat attribute has a name attribute. Of course, there can be many, but our box also has four attributes: content, padding, border, and margin. Everyone I will ask about the method. The cat method is shout(). In fact, the float: left (float to the left) above is a method. If you still want to find trouble, for example, inheritance, why don’t I see inheritance? In fact, It is still there above, top img{} is an inheritance, the img object inherits the properties of top, and to implement inheritance, you only need to add a space after top, and then write img.

Conclusion

If you are wondering why this article does not have a detailed explanation of CSS boxes, then I am sorry. I have just learned it. If you want to learn more about painting, you can buy a book. Looking at it, I just discovered that it has the same purpose as our backend code in the first contact. They both realize the separation of implementation and content, which is our principle of combination and aggregation. And now that everyone has the object-oriented method, when learning CSS, you can learn it according to OO ideas. Will it be much simpler? I’ll tell you this issue after I finish studying.