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!
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
CSS background-attachment use of the detailed
CSS3 Realization Click to enlarge the animated instance
Using CSS to achieve embossed effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
