CSS Properties box-sizing

Source: Internet
Author: User
This article mainly introduces the CSS property Box-sizing,box-sizing property is introduced in CSS3, it is explained that it can specify whether the width and height properties specified with the Height property, respectively, or not contain the padding area inside the element, as well as the width and height of the border.

Before we get to know box-sizing, let's take a little look at the box model, the model is divided into: Standard box model +ie box model. So what's the difference? See the figure below:

The scope of the standard box model can be seen, including margin, border, padding, content, and the Content section does not contain other parts.

The scope of the IE box model can be seen also includes margin, border, padding, content, and the standard box model is different: the content portion of the IE box model contains border and pading.

Of course, the front-end engineer to write the page layout should be a standard box model (need to add the DOCTYPE declaration in the page HTML declaration), tell the browser according to the standard box model to render the page, on the contrary, the page will be based on the browser is not used to parse, IE will use the box model IE to render, FIREFOX and Google will wake up in the standard mode, which is obviously counterintuitive.

So in order for us to write a Web page compatible with each browser, it is best to use the standard box model.

Finish the box model and get to the box-sizing of our CSS property.

Box-sizing three attribute values: Content-box draws the inner margin and border of the element outside the width and height |border-box any padding and borders specified for the element will be drawn within the set width and height |inherit rules should be inherited from the parent element The value of the Box-sizing property; The Box-sizing property allows you to define specific elements that match an area in a specific way.

ie8+ Browser supports Content-box and Border-box;

The FF supports all three values.


<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">  


The width of the box after the Box-sizing property modification is: 770px = 800px-10px-20px;

This means that the inner padding and border are drawn in the already set content box 800 pixels, resulting in a content box width of: 770.

The width of the box after the Box-sizing property is not modified is: 800px;

Box-sizing This property in our front-end development process, make the page layout looks very neat, simple!

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.

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.