Analysis of the box-sizing attribute in CSS3 (with code)

The content of this article is about the analysis of the box-sizing attribute in CSS3 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Everyone must know the composition of the box model, from the inside to the outside content, padding, border, margin.

There are two standards for the box model, one is the standard model and the other is IE Model.

It is easy to see from the above two figures that in the standard model, the width and height of the box model are only the width and height of the content.

In the IE model, the width and height of the box model are the total width and height of the content, padding, and border.

How to set up two models in css

The CSS3 attribute box-sizing (default value: content-box) is used here

/* 标准模型 */ 
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

content-box: This is the behavior of width and height specified by CSS2.1. Specifying the element's width and height (min/max properties) applies to the box's width and height. The element's padding and border layout and drawing specify the width and height except

border-box: Specify the width and height (min/max properties) to determine the element border box. In other words, specifying the width and height of an element includes specifying padding and border. The width and height of the content are subtracted from their respective sides. The width of the border and padding are calculated from the specified "width" and "height" properties.

Test reference case

The ideal effect and code are as follows :

----

Application bootstrap.min found in projects using bootstrap framework The default box-sizing: border-box; in the .css style will interfere with the width and height of the search box

* {
    -webkit-box-sizing: border-box;    
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
    }

This attribute causes the page to look like:

.input {
    width: 146px;
    height: 36px;
    line-height: 36px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:border-box;
}

At this time, if you want to achieve the desired effect, you must adjust the style to:

.input {
    width: 190px;
    height: 40px;
    line-height: 40px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:border-box;
}

PS Tip: When the width of a container is defined as width:100%;, if you add padding or border, it will overflow the parent container and expand outward.

If you use this style and specify it as box-sizing: border-box;, the padding and border will no longer overflow, but will shrink inward. This effect feels very practical

[Related recommendations: CSS3 video tutorial]

The above is the detailed content of Analysis of the box-sizing attribute in CSS3 (with code). For more information, please follow other related articles on the PHP Chinese website!