CSS box model and object-oriented_html/css_WEB-ITnose
Jun 24, 2016 am 11:54 AM
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 boxSpeaking 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 OOPSpeaking 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 implementationIf 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 <div id="top"> 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.
ConclusionIf 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.

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input?

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <iframe> tag? What are the security considerations when using it?

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element?

What are the best practices for cross-browser compatibility in HTML5?

What is the purpose of the <progress> element?
