Home Web Front-end CSS Tutorial Differences in types of box models in CSS

Differences in types of box models in CSS

Dec 01, 2017 pm 12:00 PM
css the difference

We know that Box model is an important concept in CSS. Only by understanding the box model can you better layout and schedule, but generally speaking, there are two types of box models. , an IE box model and a W3C box model

The scope of the ie box model also includes margin, border, padding, and content. The difference from the standard w3c box model is: the content part of the ie box model includes border and pading.

Example: The margin of a box is 20px, the border is 1px, the padding is 10px, the width of the content is 200px, and the height is 50px.

If interpreted using the standard w3c box model, Then the position that this box needs to occupy is: width 20*2+1*2+10*2+200=262px, height 20*2+1*2*10*2+50=112px, the actual size of the box is: width 1*2+10*2+200=222px, height 1*2+10*2+50=72px;

If you use the ie box model, then the position that this box needs to occupy is: width 20*2 +200=240px, height 20*2+50=70px, the actual size of the box is: width 200px, height 50px.

Selection of box model:

How to choose the "standard w3c box model"? It's very simple, just add the doctype statement at the top of the web page. If you do not add a doctype statement, then each browser will understand the web page according to its own behavior, that is, the ie browser will use the ie box model to interpret your box, and ff will use the standard w3c box model to interpret your box, so the web page is It displays differently in different browsers. On the contrary, if you add a doctype declaration, then all browsers will use the standard w3c box model to interpret your box, and the web page will be displayed consistently in each browser.

PS: The difference between margin and padding in CSS

In CSS, margin refers to the distance between its own frame and the border of another container outside itself, which is the distance outside the container; padding is the container inner distance.

1. padding

1. Syntax structure

(1)padding-left:10px; left inner margin

(2)padding-right:10px; Right padding

(3)padding-top:10px; Top padding

(4)padding-bottom:10px; Lower padding

(5)padding: 10px; Unified padding on all four sides

( 6) padding: 10px 20px; top, bottom, left and right padding

(7) padding: 10px 20px 30px; top, left, and bottom padding

(8) padding: 10px 20px 30px 40px; Top, right, bottom, left padding

2, possible values ​​

(1) length specifies the padding length in specific units

( 2) % The length of the padding based on the width of the parent element

(3) auto The browser calculates the padding

(4) inherit specifies that the padding should be inherited from the parent element

3. Browser compatibility issues

(1) All browsers support the padding attribute

(2) Any version of IE does not support the attribute value "inherit"

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

CSS3 detailed introduction to the translate attribute

CSS3 steps to achieve the rotating halo effect

Detailed introduction to the border-image attribute in Css3

The above is the detailed content of Differences in types of box models in CSS. For more information, please follow other related articles on the PHP Chinese website!

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)

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.

HTML: The Structure, CSS: The Style, JavaScript: The Behavior HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

Monitor Redis Droplet with Redis Exporter Service Monitor Redis Droplet with Redis Exporter Service Apr 10, 2025 pm 01:36 PM

Effective monitoring of Redis databases is critical to maintaining optimal performance, identifying potential bottlenecks, and ensuring overall system reliability. Redis Exporter Service is a powerful utility designed to monitor Redis databases using Prometheus. This tutorial will guide you through the complete setup and configuration of Redis Exporter Service, ensuring you seamlessly build monitoring solutions. By studying this tutorial, you will achieve fully operational monitoring settings

Difference between centos and ubuntu Difference between centos and ubuntu Apr 14, 2025 pm 09:09 PM

The key differences between CentOS and Ubuntu are: origin (CentOS originates from Red Hat, for enterprises; Ubuntu originates from Debian, for individuals), package management (CentOS uses yum, focusing on stability; Ubuntu uses apt, for high update frequency), support cycle (CentOS provides 10 years of support, Ubuntu provides 5 years of LTS support), community support (CentOS focuses on stability, Ubuntu provides a wide range of tutorials and documents), uses (CentOS is biased towards servers, Ubuntu is suitable for servers and desktops), other differences include installation simplicity (CentOS is thin)

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

How to view firewall status in centos How to view firewall status in centos Apr 14, 2025 pm 08:18 PM

The state of the CentOS firewall can be viewed through the sudo firewall-cmd --state command, returning to running or not running. For more detailed information, you can use sudo firewall-cmd --list-all to view, including configured areas, services, ports, etc. If firewall-cmd does not solve the problem, you can use sudo iptables -L -n to view iptables rules. Be sure to make a backup before modifying the firewall configuration to ensure server security.

The difference between laravel and thinkphp The difference between laravel and thinkphp Apr 18, 2025 pm 01:09 PM

Laravel and ThinkPHP are both popular PHP frameworks and have their own advantages and disadvantages in development. This article will compare the two in depth, highlighting their architecture, features, and performance differences to help developers make informed choices based on their specific project needs.

How to build a website in nginx How to build a website in nginx Apr 14, 2025 am 11:21 AM

Using Nginx to build a website is carried out in five steps: 1. Install Nginx; 2. Configure Nginx, mainly configuring the listening port, website root directory, index file and error page; 3. Create website files; 4. Test Nginx; 5. Advanced configuration can be carried out as needed, such as SSL encryption, reverse proxy, load balancing and caching.

See all articles