Understanding Cascading Style Sheets Properties

If you want to realize about CSS, you don’t need a lot of skills and cross-browser compatible CSS code, and thoroughly understanding the CSS model is the first thing. The CSS box model is not difficult and is the basic support for all browsers except IE browser under certain conditions. CSS model is responsible for the following:

1. A block level up space
2. Object’s borders
3. Dimensions of the box
4. Position relative to other elements of the page

CSS box model has the following criteria:

1. The object is a rectangle 
2. Its size by width, height, padding, borders, and margins 
3. If the height isn’t set, the height of the box will automatically adapt to the content it contains
4. If the width isn’t set on a non-float type level, the box will fill their parent container (excluding white space of the parent container)

The block-level object is processed, the following precautions should be observed:

1. If you set the width of a box of 100%, it can no longer be set margins, padding, and borders; otherwise, it will break their parent container
2. Adjacent to the vertical margin can cause a collapse of complex problems, causing layout problems
3. Has a relative position and absolute position of an object with different behavior

Here is the basic difference between block-level and inline-level objects:

1. Levels of Block-level object are naturally full of its parent container, so there is no need to set a 100% width property.
2. Initial placement of Block-level object is the upper-left border of its parent container, and to flow at its preceding sibling Block underneath the object (unless you set the float or absolute position).
3. The inline-level object will ignore the width and height settings.
4. The inline-level object you can use the vertical-align property to control the vertical alignment, block-level objects are not allowed.
5. Inline-level below the object will retain some natural spaces, to accommodate the letter ‘g’ kind of out of the down stroke.
6. An inline is set to float objects will block understanding of Floating and Clearing properties.

Achieve a multi-column layout using the float property is the best way; float is a property that will allow you to benefit from. A float to left or right of the object, an object that is set to float, depending on how you set the direction, move to the left or right boundary of its parent container, or float in front of the object’s border, followed by a float object or content trapped in the opposite direction.