Css+div (2)

List-style-type:none Remove Bullets

block-level elements: body,ul li,ol li,table,p,h1~h6,div ...

1. The contents of the block-level element, or its background image, are displayed by default in the upper-left corner of the block.

2. Block-level elements, by default, occupy a single line.

How do I use block-level elements for side-by?

Html:

<div id= "D1" > 1<div>

<div id= "D2" >2<div>

Css:

#d1, #d2

{

height:150px;

width:100px;

Border:solid 2px Red;

}

use Float:left to achieve side-by-left floating )

float:right (Floating right )

Clear:borth clear left and right floating

Box model

margin (outer spacing) border (edge) padding ( padding )

In-line elements have <span></span>,<a>

Characteristics:

1. It does not occupy a single line by default.

2. The height and width of the element in the line is not determined by the height and breadth of the CSS, but by the amount of content within it.

Inline elements can become block-level elements with Display:block

Focus: Absolute Positioning (position:absolute) and relative positioning (position:relative)

Absolute positioning: When a block-level element is out of the flow of the document, it does not fill a line, and the float does not work for it. Its orientation is affected by the top and left of the specific page form.

(set a picture that follows the mouse)

Relative positioning: Set the position:relative, indicating that the DIV also has a document flow, there is no de-flow of the document flow, the upper and the left for the top level.

Difference

1. Absolute positioning is truly out of the document stream, leaving the document flow unaffected by the float and document flow. Relative positioning is affected by the flow of documents.

2. Absolute positioning is only affected by the top and left of the specific form, and relative positioning is only affected by top and left of the previous level.

Z-index space Setting (large value above the value is small)

Overflow:auto text is out of scroll bar

Overflow:hide the part of the text beyond the hidden

Overflow:scroll text exceeds or does not exceed all scroll bars

Css+div (2)