Understanding the css3 box model and box-sizing properties-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Understanding the css3 box model and box-sizing properties

高洛峰

Mar 02, 2017 pm 03:16 PM

Each element in the document is depicted as a rectangular box. The purpose of the rendering engine is to determine the size, properties - such as its color, background, border aspects - and the position of these boxes. In CSS, these rectangular boxes are described using the standard box model. This model describes the space occupied by an element. Each box has four borders: margin, border, padding and content.

css3 盒模型以及box-sizing属性了解

In W3C model: total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin- right

In IE model: total width = margin-left + width + margin-right

Introduced the box-sizing property in CSS3, which allows changes The default CSS box model calculates the width and height of elements.

includes two options:

content-box: standard box model, width and height defined by CSS Only contains the width and height of the content. (Default)

border-box: IE box model, the width and height defined by CSS include content, padding and border

Example:

( con1 is set to box-sizing: border-box, con is the default content-box)

<head lang="en">     
    <meta charset="UTF-8">     
    <title></title>     
    <style>     
        .con{width: 100px; height: 100px;background-color:royalblue;     
             border:1px solid red; padding: 10px;}     
        .con1{box-sizing: border-box;}     
    </style>     
</head>     
<body>     
    <p class="con"></p>     
    <p class="con con1"></p>     
</body>

You can clearly see the difference between the two boxes in the console

The box model of the first p is as follows: content-box

css3 盒模型以及box-sizing属性了解

The box model of the second p is as follows: border-box

css3 盒模型以及box-sizing属性了解

The above is all the content of the css3 box model and box-sizing properties that the editor has brought to you. I hope it will be helpful to everyone. Please support the PHP Chinese website~

For more css3 box models and box-sizing attributes, please pay attention to the PHP Chinese website for related articles!

Statement

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

How We Tagged Google Fonts and Created goofonts.comApr 12, 2025 pm 12:02 PM

GooFonts is a side project signed by a developer-wife and a designer-husband, both of them big fans of typography. We’ve been tagging Google

Timeless Web Dev ArticlesApr 12, 2025 am 11:44 AM

Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their

The Deal with the Section ElementApr 12, 2025 am 11:39 AM

Two articles published the exact same day:

Practice GraphQL Queries With the State of JavaScript APIApr 12, 2025 am 11:33 AM

Learning how to build GraphQL APIs can be quite challenging. But you can learn how to use GraphQL APIs in 10 minutes! And it so happens I've got the perfect

Component-Level CMSsApr 12, 2025 am 11:09 AM

When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the

Set Type on a Circle... with offset-pathApr 12, 2025 am 11:00 AM

Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I