Are you forgetting css2/css3 properties? Puzzle to remember all properties?
Be cool! Don’t be puzzle! No need remember all properties, just reminder your mind that you have file where you may get all css properties. SURPRISED! Yes, you would be surprised. Just, download flowing files and get all css2/css3 properties in one frame.
Don’t pressure yourself 😉 have a great day! 🙂
Are you worried about css box model? puzzle to calculate height, width with border, padding? Let’s think it new way with less complicity. Yes, the element of CSS3 “box-sizing” has broken one of the most complex design patterns of CSS2 and earlier versions. Let’s see how it is actually, how it works, how many browsers support it, etc.
Definition and Usage:
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box or just the content-box which is the default value of the width and height properties.
How it different from Box Model
The “box model” in CSS works like this:
width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box
It’s a little weird, but you get used to it. In IE 6 and earlier, when in “quirks mode,” the box model was treated differently.
width = actual visible/rendered width of box
height = actual visible/rendered height of box
The border and padding values moved inward, cutting into the width/height of the box rather than expanding it. Here is a dramatic example of the difference:
css box model css2 vs css3
CSS Syntax
Property Values
| Value | Description |
|---|---|
| content-box | Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included |
| border-box | The width and height properties (and min/max properties) includes content, padding and border, but not the margin |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Browser Support
Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing
Thank you for reading… have a great day!
Source:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Ruhul's Blog 