Well, we are already in the transforming phase of web-designing techniques and getting smarter and convincing properties everyday. As of now, I have gone through many properties of web-designing but I was awestruck by box-sizing.
I have gone through many articles which convinced me that it is a possible replacement of classical box-model. Though, I am not confirming it but yes it has made all of us to think from a new page.
Box-sizing is used to change the algorithm for calculating the width and height of the element.
According to the CSS specification width of the block consists of the content width, the values of the margin, padding and border. The situation is similar with the height of the block. The "box model" in CSS works like this:
width + padding + border = actual width of box
height + padding + border = actual height of box Box-sizing property allows you to modify this algorithm to the width and height specify the size is not content, and block size.
Let's discuss some live examples but before that I would like to you tell you the key features of box-sizing:
Syntax:
box-sizing: content-box | border-box | padding-box | inherit
1. Content-box: The default CSS box model where an element’s width and height only apply to its content area and do not include padding or borders. It gives the actualy size of the content.
2. Border-box: Width and height properties include the padding and border, but not the margin.
3. Padding-box: Width and height properties include the values of the padding, but they ignore margin and border.
4. Inherit: Grasps the values of it's parent element.
Box-sizing is used to change the algorithm for calculating the width and height of the element.
According to the CSS specification width of the block consists of the content width, the values of the margin, padding and border. The situation is similar with the height of the block. The "box model" in CSS works like this:
width + padding + border = actual width of box
height + padding + border = actual height of box Box-sizing property allows you to modify this algorithm to the width and height specify the size is not content, and block size.
Let's discuss some live examples but before that I would like to you tell you the key features of box-sizing:
Syntax:
box-sizing: content-box | border-box | padding-box | inherit
1. Content-box: The default CSS box model where an element’s width and height only apply to its content area and do not include padding or borders. It gives the actualy size of the content.
2. Border-box: Width and height properties include the padding and border, but not the margin.
3. Padding-box: Width and height properties include the values of the padding, but they ignore margin and border.
4. Inherit: Grasps the values of it's parent element.
Example and demo: 1. http://codepen.io/songsfromsea/pen/ahIql
Resources: Here are some helpful resources:
No comments:
Post a Comment