How to use margin float background image

This time I will show you how to use the margin float background image, and what are the precautions for using the margin float background image. The following is a practical case, let's take a look.

Today let’s sort out the problems encountered when making web pages

1. Insert a background image and place the image at the bottom of p to fill the entire row.

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

　

Attributes:

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 replaced elements. The replacement elements include img, input, textarea, and select.

There are two types of syntax values: length and keyword.

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

Keywords: top left (top left), top center (top center), etc. If the second value is not set, the default is center.

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

Attribute value 1.length: The first value is the width, the second value is the height. If only the first value is set, the second value will be automatically converted to " auto”

##　　　　 2.percentage: Set the width and height of the image as a 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 will be set to "auto".

　　　3.cover: The background image is expanded to fully cover the area (unequal ratio)

##　　　　4.contain：

The background image expands to completely cover the area (equal ratio)

##2.margin problem

##　 (1) margin: auto auto; Why can’t it be centered vertically

Does not support upper and lower auto because it is difficult to determine the height in the page

　 (2) The difference between margin and padding

Margin: When you need to add a blank outside the border. When they need to cancel each other out. For example, a margin of 15px + 20px will result in a 20px margin.

Padding: You need to add blank space inside the border. Need equals the sum of the two. For example, 15px + 20px padding will result in 35px blank space.

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

3.float problem

　(1) When the back p drifts left to the upper p, the text in the upper p will surround the drifting p

Relevant to document flow, see 4

4. Document flow

#　It is during the element typesetting and layout process, the elements will automatically Flow arrangement from left to right and top to bottom.

Detached from the document flow is to take the elements away from the ordinary layout and typesetting, and position the block elements The time is as if the drifting element does not exist. Absolute and floating floats in positioning will break away from the document flow.

## Partially ignored: float is out of the document flow. Other boxes will ignore this element, but the content inside the box will be ignored. The connecting element will leave the drifting position and exist around it.

Completely ignore: Absolute is out of the document flow. Other boxes, including inline elements within the box, will completely ignore the positioned element.

##Margin and float cannot be used at the same time

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Gulp command to generate sprites

Safari browser select drop-down list text is too long and does not wrap Solution
Detailed explanation of BEM syntax

The above is the detailed content of How to use margin float background image. For more information, please follow other related articles on the PHP Chinese website!