css--Basic Knowledge

First, the box model

The model is as follows:

The box model includes: margin, padding, border, content four parts.

Margin: margin, transparent, can display the parent's background color, and so on.

padding: Padding that shows the background color of the current element itself.

border: Border.

Content: The area where the contents are displayed, and the width of the CSS is the width of the area. However, IE thinks width is Border_left + border_right + paddiing_left + paddiing_right + content.

Ii. Classification of elements:

Block-level (block-level) elements and inline (inline) elements.

• Block-level elements: P, H1~h6, Div, ul,table, OL, etc. Display:block

Each one displays a single line, that is, a newline character before and after the display. Height, row height, and top and bottom margins are controllable; the width defaults to 100% of its container and can be set by itself.

• Inline elements: a,input, label, Select,strong,img, Span, Li, Br. display:inline(display:inline This property can fix the famous IE double floating boundary problem).

Dependency on other block-level elements exists, is based on the semantic level of the basic elements. Does not break the line. and other elements are on one line, high, high, and top and bottom margins are immutable, and the width is the width of the text or picture, which cannot be changed. Its row height can only be set by Line-height.

• Display:inline-block, similar to inline elements, does not wrap, but has a related property of block-level elements such as width height,padding,border,margin.

Http://zhidao.baidu.com/link?url=bm6LggMhY7tfe6OMdva3UPDNEjv6AELojFHMwnSn4nGK3A0re28FMQRQGjWa8jXrruiIxac9nHpmyKwT1zhkua

You can modify its default properties through display. If you are using the inline element as the navigation bar, you can set the block-level element and then set the width.

There is also a mutable element: The element is either a block element or an inline element depending on the context. Includes applets, buttons, iframe, Map, object, script, and so on, as soon as the context is determined to be a block-level element or inline element, it is displayed.

List: http://blog.csdn.net/yuyanqiao/article/details/8554598

css--Basic Knowledge