Css problems: the bottom of the margin float Document Stream background image is full, and the marginfloat

Css problems: the bottom of the margin float Document Stream background image is full, and the marginfloat

Let's sort out the problems on the webpage today.

1. Insert a background image and fill the entire row at the bottom of the div.

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

Attribute:

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

There are two syntax values: length and keyword.

Length: Set the horizontal value (X axis) and vertical value (Y axis), for example, background-position: 10px 20px;

Keywords: top left (top left) top center (top center) and so on. The second value is not set to center by default.

Background-size: defines the size of the background image.

Attribute Value 1. length: the first value is the width, and the second value is the height. If only the first value is set, the second value is automatically converted to "auto"

2. percentage: Specify the width and height of the image as the percentage of the parent element. The first value is the width and the second value is the height. If only one value is set, the second value is set to "auto ".

3. cover: full coverage of the background image (unequal ratio)

4. contain: full coverage of the background image (Equal Ratio)

2. margin Problems

(1) margin: auto; why cannot vertical center

Auto up and down is not supported because the height on the page is hard to be determined

(2) differences between margin and padding

Margin: When a blank space is added outside border. To offset each other. For example, the margin of 15px + 20px will be blank with 20px.

Padding: You need to add a blank space on the inside of border. Must be equal to the sum of the two. For example, the padding of 15px + 20px will get a blank space of 35px.

(3) It has no effect on the top and bottom margins of inline elements.

3. float Problems

(1) When the left side of the back div is moved to the top div, the text in the top div will surround the drifting div

It is related to the Document Stream. For details, refer to 4.

4. Document Stream

Is the process of element layout, the elements are automatically arranged from left to right, from top to bottom streaming.

Separated from the document stream, elements are taken away from the general layout. When the block element is located, it is treated as a drifting element that does not exist. The absolute and floating float in the positioning will be separated from the document stream.

Partial disregard: float is separated from the document stream. Other boxes will ignore this element, but the inline element in the box will give way to the drifting position and surround it.

Ignore all: absolute disconnects from the document stream. Other boxes, including inline elements in the box, will completely ignore the positioned elements.

 

 

Margin and float cannot use Baidu at the same time to explain why.