CSS issues margin Float document flow background graph bottom filled

Today to tidy up the problem of the Web page encountered it

1. Insert the background image and fill the bottom of the div with the entire line.

< style >     Background:url (xxx.jpg) no-repeat;    Background-position:bottom;     background-size:100%; </ style >

Property:

Background-position: The background Position property is used to set the position of the background image, which can only be applied to block-level elements and replacement elements. The replacement elements include IMG, input, textarea, select.

There are two kinds of syntax values: length and keywords.

Length: Sets the horizontal direction value (x axis) and the vertical direction value (Y axis) such as: background-position:10px 20px;

Keywords: top left top Center (upper center), etc., the second value is not set to center by default.

Background-size: Defines the size of the background picture.

Property value 1.length: The first value is width, the second value is height, and if only the first value is set, the second value is automatically converted to "Auto"

2.percentage: Sets the width and height of the picture as a percentage of the parent element, the first value is the width, and the second value is the height. If you set only one value, the second value is set to "Auto".

3.cover: Background map expands fully covered area (unequal)

4.contain: background map extension full coverage area (equal ratio)

2.margin problem

(1) Margin:auto auto; why can't I center vertically?

Up and down auto is not supported because it is difficult to determine the height of the page

(2) The difference between margin and padding

Margin: When you need to add white space outside the border. Need to counteract each other. such as 15px + 20px margin, will get 20px blank.

padding: You need to add white space inside the border. Need equals the sum of the two. such as 15px + 20px padding, will get 35px blank.

(3) The bottom margin on the inline element is not effective.

3.float problem

(1) on the left of the back div to the top Div, the top div text will be wrapped around the drifting div

Related to document flow, see 4

4. Document Flow

is the element layout process, the elements will automatically from left to right, from the top down the flow of the arrangement.

Out-of-document flow is to take elements away from normal layout layouts, while block elements are positioned as drifting elements do not exist. Absolute and floating float in the positioning are out of the document flow.

Partial disregard: Float is out of the flow of the document, and the other boxes ignore the element, but the inline elements inside the box give away the drifting position and surround it.

Complete disregard: Absolute out of the document flow, other boxes including the inside of the box elements will completely ignore the positioned elements.

Margin and float can not be used at the same time Baidu said can ... I haven't found out why, try to explain it again next time.

CSS issues margin Float document flow background graph bottom filled