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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

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





HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
