When using floating, you will often encounter a very strange thing, that is, applying the float property to a picture, but the picture is higher than the element containing the picture, so the picture overflows. The solution is to clear the float. A simple solution is to set {overflow:auto；; Zoom:1; }

Inline block layout You can use inline block layout, but you should pay attention to some things. The (1)vertical-align attribute will affect the inline-block element, and you can set its value to top；; (2) The width of each column needs to be set; (3) If there are spaces between elements in the HTML source code, there will be gaps between columns.

There are two important box models, ie box model and w3c box model. W3c box model is a standard box model, including margins, borders, padding and content, and the content part does not include anything else. The range of ie box model includes margins, borders, padding and content, but the content part of IE box model includes borders and padding.

The css property of box-sizingbox-sizing is used to change the default css box model and calculate the width and height of elements. Can be used to simulate the behavior of the browser, incorrectly supporting the CSS model. The default value of the box size attribute is content-box, and the measured width and height attributes only include content, excluding borders, padding and margins; Security deposit; The width and height attributes of padding-box include the size of content and padding, excluding borders and margins; ; The width and height properties of border-box include padding and borders, but not margins.

Position has four attribute values: static? Relative? Absolute fixed. Static is the default value of the position attribute, that is, it is arranged in the order of document circulation; Relative will be offset according to the values of top, right, bottom and left. If the relative property is not set, the position of the element will be consistent with the normal document flow. Absolute is a location attribute set according to the parent object of an element (parent element, grandfather element, great-grandfather element, etc.). ), as long as it is not static, the elements are all positioned; Fixed attributes always take the text as the positioning object and are positioned according to the browser window. Even if you drag the scroll bar, its position will not change. Similar background-attachment: fixed.