Wednesday, 15 August 2012

Previous Interview Question Next Interview Question
Home

Box Model Problem resolving "box-sizing"

Box Model : The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.


The box model allows us to place a border around elements and space elements in relation to other elements.


Problems in box model of html occurs when doc type is not declared in IE (quirks mode), or sometimes we need to override the default box model of a browser. Here is the code:

box-sizing:  border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
CSS3 box-sizing can be:
box-sizing: border-box;
box-sizing: content-box;
"box-sizing" in Firefox :
-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;
"box-sizing" in Safari / Chrome:
-webkit-box-sizing: content-box;
-webkit-box-sizing: border-box;
-webkit-box-sizing: padding-box;
"box-sizing" in IE8 :
-ms-box-sizing: border-box;
-ms-box-sizing: content-box;

Previous Interview Question Next Interview Question
Home

0 comments :

Post a Comment