【codecademy summary】html+css box model content

padding

The space between the contents of a box and the borders of a box is konwn as padding.

exmaple:

　　padding: 10px;

or

　　padding: 5px 10px 5px 10px; ( top right bottom left )

or

　　padding: 5px 10px; ( top& bottom left& right)

or

　　padding-top

　　padding-right

　　padding-bottom

　　padding-left

 

-------------------------------------------------------------------------------------------------------------------

margin

The margin refers to the sapce directly outside of the box. We can adjust this spacing with the margin property.

exmaple:

　　margin: 20px;

or 

　　margin: 6px 12px 6px 12px; ( top right bottom left )

or

　　margin: 6px 12px;

or

　　margin-top

　　margin-right

　　margin-bottom

 

When margin: auto is uesd, anelements will center relative to its container. But the width of div must be less than the width of the class body.

 

-------------------------------------------------------------------------------------------------------------------

The code in the example above resets the default margin and padding values of all HTML elements.It is often the first CSS rule in an exernal stylesheet.

exmaple:

　　*{

　　　　margin: 0;

　　　　padding: 0;

　　　}　　

 

-------------------------------------------------------------------------------------------------------------------

dispaly 

Modifying the display property of an element can help achieve a desired layout for a web page. The dispaly property can take on one of four values:

 

　　inline - cause block-level elements(like a div) to behave like an inline element (like a link)

　　block - cause inline elements(like a link)t to behave like a block element (like a div)

　　inline-block - causes block-level elements to behave like an inline element, but retain the feature of a block-level element.

　　none - removes an element form view. The rest of the web page will act as if the element does not exit

 

In the example above, the block-level list items will now behave as inline elemnets. The result will be list items appearing on the same line, like a navigation bar.

-------------------------------------------------------------------------------------------------------------------

visibility

The visibility property can be set to one of the following values:

　　hidden - hides an element.

　　visible - displays an element.

Notice:

What's the difference between display: none and visibility: hidden ?An element with display: none will be completely removed from the web page. An element with visibility:hidden ,however, will nor be visible on the web page, but the space reserved for it will. But all that still can view the contents of the list item by viewing the source code in their browser.

转载于:https://www.cnblogs.com/guangluwutu/p/6552545.html