Front end--about background, floating, and positioning

Background. The background display area of the element is in the content area and the inner margin area, and the border is drawn above the background. This means that if the style of the border is dotted, you can see the background between the border voids.

The statements that can set the background are: Background-color, Background-image, Background-position, Background-repeat, Background-attachment, Background-origin and so on.

First of all, the name of the Background-color is set a solid background, the background of the solid color is placed on the bottom of the background, if there is a background pattern then the background of the solid color is placed under the background pattern. The value that it accepts can be either a 16 binary representation or an RGBA representation. But it is more common to set a background picture for the background--background-image, the background image accepts the URL parameter, this parameter can be relative address or absolute address. If multiple URLs are introduced, separate the URLs with commas, and the URLs that are first introduced are always in front. For example, Background-image:url (1.jpg), url (2.jpg), Background-color and background-image, can be applied to both block-level elements and inline elements. If the background picture is small, not fully filled with the elements of the content and padding area, in this case you can set the background picture how to repeat the effect, the corresponding style property is Background-repeat. Background-repeat can be obtained values are repeat, repeat-x, repeat-y, No-repeat. By default, the default value for Background-repeat is repeat, which is repeated both horizontally and vertically. and repetition must start from an image, which is called the original image, which indicates the location of the background image if there is no repeat. It may be anywhere in the background context of the element. The property that sets the location of the original image is background-position. The value of this property can be a keyword (top, left, right) can be a number or a percentage, these values are relative to a reference to achieve, by default, this reference is the boundary of the upper inner border and the border of the inner border. To modify the bounds of this reference, you would use the Background-origin property, which can take the value of three keywords: content-box|border-box|padding-box, these three keywords illustrate the display area of the background respectively, Inside the content area or inside the margin area or inside the bounding area. With the reference boundary, the background-position can calculate the location of the original image based on its own value, which is positioned based on the offset to the left and upper boundary distances, which is the point on the image used to calculate the distance to the boundary. In the Background-position value, the offset point of the value is the upper-left corner of the image. Keyword has no offset point, it is simple to put the entire image completeIn the upper-left or lower-right corner. The offset of the percentage is not fixed, and its offset is calculated according to its own percentage value, which means that the percentage value is applied to both the element and the original image. Background-attachment is very simple, it is set the background image will not follow the document to scroll.

Floating. All elements can float, and once the element floats, he becomes a block-level element, and its width is as narrow as possible. It is one of two ways to get elements out of the document stream, allowing you to display the peers of two block-level elements. As many other places say, when an element floats, it is actually semi-detached from the document stream. The semi-detached document flow here can be understood, first of all, out of the document flow, this means that the floating element in the containing fast content area has no space, the subsequent elements and the content area of the containing block does not feel its existence, so the subsequent elements will be appropriate to occupy its position or the height of the parent element will be changed. And this "half" word means that this floating element is not like locating where the other elements are to be placed, and not having any other effect on the other elements. First, the floating element cannot exceed its containing block (the containing block is its nearest block-level ancestor element), followed by other elements that have an effect on the position of the floating element (especially when floating upward), and the content of the last floating element and other elements can feel each other's existence, so it is semi-detached from the document flow. At the same time all the floating elements in a containing block are in the same document flow, that is, they do not overwrite each other, the padding, border, and margin between them are valid between each other and the margin does not merge.

The floating style is declared as float, and it has only two values that can work: right and left. These two values set the direction in which elements move horizontally, left or right. But this is not to say that it is not moving vertically, a little hand-written example will find that the floating element has a tendency to go up, which means that the floating element by default always move up at the same time, and can not be modified. This is also a bit more complex floating elements, because the floating element treats the preceding element and treats the elements behind it is not the same, and the CSS specification on the floating elements of the upward movement also made a lot of restrictions, there will be different situations. Floating elements can always feel the presence of the preceding element (which is also one of the reasons for semi-detached document flow), such as a floating element with a block-level element above it is not moving up and overwriting that block-level element, instead, subsequent block-level elements do not feel the existence of the float will move past and be covered by floating elements, Of course the content is not overwritten (two reasons for semi-detached document flow). So the floating element behaves like a inline-block to the elements that precede it. If there is no previous element, then the floating element moves up to the content area vertex containing the block (three reasons for semi-detached document flow). It is also important to note that the top of a floating element cannot be higher than the top of all previously floating elements.

Just as 3 floats to the left, 1, 2 to the right, 3 to the top of the floating element above 1 and 2, so even if there is room for 3, he will only be aligned with 2.

Because the float is somewhat out of the flow of the document, the content area of the parent element does not feel its existence, so the height of the parent element may be shorter, and the part of the floating element will run to the outside of the parent element causing unwanted results.

This is the time to use clear attributes. Clear can only be used for block-level elements, in order to not surround the content around the floating elements, so that the floating element for the set of clearly floating content, like a block-level element, is the content of the next line to float. This increases the height of the parent element to be the floating element completely within the parent element. The general notation is to add a style to the parent element. Cleafix::after {content: '. '; Display:block;visiable:hidden;overflow:hidden;height:0;clear:both;}

Positioning. Positioning is relatively clear relative to floating, it is two ways to make elements out of the flow of the document, it is the role of the elements in the position you want to put. In the CSS involved in the location of the general will have a reference, position is no exception, it has a value of three: relative|absolute|fixed, each of the three has a positioning referential. The companion attributes applied to the positioning reference are top, right, bottom, left, and Z-index, which will not work if the position is not set. The meaning of each property is the distance between the position element corresponding to the corresponding edge of the reference, and the value can be negative. Different position not only its reference, but also some of its own unique properties.

First, the positioning method of Position:relative, which is called relative positioning. When an element is set to relative positioning, the element is still not out of the document flow in the document flow, and the parent element's content area and other elements can feel his presence as well as in the normal document flow, the only difference being that its z-index hierarchy is higher than the other elements. At this time, its original position is the positioning reference, set the top, right and other properties are relative to the original position. When the positioned element is offset from its original position, it overwrites its adjacent elements, and the original position space remains there unchanged. This position is generally used as a reference for absolute positioning.

The positioning method of the Position:absolute. This positioning becomes absolute positioning, when an element is set to absolute positioning, this element is completely out of the document flow, the parent element and other child elements do not see its existence, so the parent element may be smaller, and the other elements will occupy his original position, and his own width will become the content width. This time no matter what type of element he was, it is now a block-level element, which is about the same as floating. The positioning reference is the first to locate the ancestor element or root element, so the parent element is set to relative relative to the parent element. The element that is completely out of the flow of the document is not as tied to a floating element as it is where it wants to put it.

The positioning method of position:fixed and absolute is similar, but the reference is the browser window only.

The last point is that sometimes the positioning element is not set wide or high, and in the positioning of the same time set the right, left or top, bottom this property, then this situation will be positioned to widen or pull the element height.

Front end--about background, floating, and positioning