Opening the box Model

标签：

How Are Elements Displayed?

Every element has a default display property value，

Things get interesting with the inline-block value. Using this value will allow an element to behave as a block-level element, accepting all box model properties (which we’ll cover soon). However, the element will be displayed in line with other elements, and it will not begin on a new line by default.

The Space Between Inline-Block Elements

One important distinction(区别) with inline-block elements is that they are not always touching, or displayed directly against one another. Usually a small space will exist between two inline-block elements. 

Every element on a page is a rectangular box.

Please keep in mind that inline-level elements will not accept the width andheight properties or any values tied to them.

Margins only workhorizontally(水平地)—left and right—on inline-level elements. Padding works on all four sides of inline-level elements; however, the vertical padding—the top and bottom—may bleed into the lines above and below an element.

The margin and padding properties are completely transparent and do not accept any color values. Being transparent, though, they show the background colors of relative elements. For margins, we see the background color of the parent element, and for padding, we see the background color of the element 

Individual Border Sides   border-top, border-right, border-bottom, and border-left.

Border Radius  :

border-sizing:

Developer Tools These tools allow us to inspect an element on a page, see where that element lives within the HTML document, and see what CSS properties and values are being applied to it.

Opening the box Model

标签：

原文地址：http://www.cnblogs.com/goodearth/p/5164969.html