HTML basics - CSS style sheets, style attributes, format and layout details

1. position : fixed

Locked position (relative to the browser), such as the pop-up window in the lower right corner of some websites.

Example:

2. position : absolute

Absolute Position:

1. The outer layer does not have position: absolute (or relative); then the div is positioned relative to the browser, as shown in b in the following figure (50 pixels from the right border of the browser and 20 pixels from the bottom border).

2. The outer layer has position: absolute (or relative); then the div is positioned relative to the outer border, such as bb in the figure below (50 pixels from the right border of d and 20 pixels from the bottom border of d).

Example:

3. position : relative

Relative position:

As shown in the figure below, it is fixed relative to a certain position of the div that contains this div. If the outer layer does not contain it, then the relative position is fixed relative to the browser.

Example:

4. Layering ( z-index )

Layering in the z -axis direction can be understood as dividing into a stack of papers, with the higher the number of layers, the closer they are to the top.

In the relative example above, we see that aa covers a. This is because the display level of the later-written code is closer to the front. So how can we make a cover aa without changing the order of the code? as follows:

Example:

5. float : left , right

When using Left or right , there is no need to specify the position ( left or top ), it is directly relative to the browser. If the outer part is wrapped, it is displayed at the upper left or upper right position relative to the outer div except for one row.

Additional: 1. overflow: hidden; //Hide the excess part; scroll, display the scroll bar;

<div ></div> //Truncate the flow

2. cursor: the shape of the pointer when the mouse is pointing to it;

3. Translucent effect:

<div class="box">Transparent area<div>

The code in the style sheet is:

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

To sum up the practice example: make part of the format layout of the druba website

HTML code:

Web page operation display effect diagram:

The above article on basic HTML knowledge - detailed explanation of CSS style sheets, style attributes, format and layout is all the content that the editor shares with you. I hope it can give you a reference, and I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658870.html