CSS Usage Summary (1)

1. Adding "height:100%" function in body

body{
height:100%;
Background: #aaa;
}

If not added, the value of the body height is the height at which all elements of the page are reached.

such as: Body Bottom container set "position:absolute; bottom:" Property, according to the idea should be affixed to the bottom of the browser, but the actual effect is actually affixed to the bottom of the body container, not to the bottom of the browser.

This is because the body container does not occupy the entire browser, so the bottom element position:absolute to the bottom of the file stream.

The body Plus "height:100%" This style, specifies the body of the parent element height is 100%, and then specify height:100% in the body, which means to fill the entire window. This makes the bottom element position:absolute to the bottom of the browser.

Such as:

2. Clear floating in CSS

You want to have a picture float to the left of the text block, and you want the picture and text to be contained in another element that has a background color and border. You might write the following code:

"Line box and cleanup" issues in http://www.w3school.com.cn/css/css_positioning_floating.asp

When you add other elements to an element with a background color and border, and the added element property sets the float effect, this may occur when the floating element is out of the flow of the document, so the div within the bounding rectangle does not occupy space, and the outer container is not held open.

Workaround 1:

Set clear in an element surrounded by a background border element, without an existing element to apply cleanup, you need to add an empty element and then clean it up. Is the method introduced on W3.

Disadvantages of doing this:

One is a meaningless div, the second is to use Dojo to do drag & drop, because this div is a byte point of the container Div, if the node is moved, it will cause a typographical bug: If the blue-box div to be displayed is moved to this Div, Because of the clear:both, it will be forced to display in a different line.

Workaround 2:

Add the following CSS effect to the parent element (the background you want to open):

. clearfix:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}

In this way, the Clearfix CSS uses the after pseudo-object,

It adds content from the contents at the end of the element that the clearfix is applied to. A period "." is added here, and its display is set to block, and the height is set to 0;clear set to Both;visibility as hidden. This will achieve the purpose of the open container.

CSS Usage Summary (1)