Box-sizing, css3box-sizing in css3

Source: Internet
Author: User

Box-sizing, css3box-sizing in css3

1. Read throughW3cschoolOn: CSS3 box-sizing attribute _ w3cschool.

2. I don't have a deep understanding of the introduction. I am a person who can just forget it after reading it. Out of self-confidence, I still honestly take the example offline for a look:

<! DOCTYPE html> View Code

Use firebug of Firefox to check the layout and change the box-sizing attribute to content-box (or remove box-sizing, default box-sizing: content-box), as shown in.

After comparison, we found that:

When the box-sizing of the parent element of the class named. container is not set, that is, when the default value is content-box or box-sizing: border-box, there are two situations:

(Parent element of the outermost layer)

 

1) when the box-sizing: border-box of the two sub-elements, the width is 208px, and the border-left-width and border-right-width (both 16px) are calculated) it is PX, that is, half of the width of the parent element, as shown in (the first is the layout chart, and the second is the actual page effect) (that is, half of the parent element width + border-left-width + border-right-width)

 

2) When the box-sizing: content-box of the two sub-elements, the width is 240px, And the padding and margin are excluded, as shown in (the first is the layout chart, the second is the actual page effect ):

 

3. when you set box-sizing: border-box for an element, actually, it makes the actual width = width + padding-left + padding-right + border-left-width + border-right-width, but does not include margin-left and margin-right.

Now, I understand it.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.