Home Web Front-end HTML Tutorial CSS box model and object-oriented_html/css_WEB-ITnose

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

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.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

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.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

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

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

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

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

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

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

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: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

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.

See all articles