HTML + CSS Study Notes (6)

I. CSS positioning

1. Relative positioning: the position of the current element relative to the previous element. The front and back elements do not overlap each other.

2. Absolute positioning: the exact position of the element must be specified. The default position is the initial position in the upper left corner of the screen.

The positioning type attribute is position. The two values are relative and absolute, which respectively represent relative and absolute positioning. After specifying the positioning type, use the following attributes to provide the specific location;

Left, right, top, bottom

3. Stack sequence: control the stack sequence of elements on the webpage, that is, the vertical position of elements on the screen.

This value is controlled using the Z-index value. The value range is a non-negative integer, 0 is the minimum value, and the value is greater than the upper layer.

Positioning demonstration

2. Margins

1. Margin: margin, which increases the size outside the original element area.

2. Inner filling: padding increases the size of the original element area, but the available area of the element is not changed, that is, the area of the added text is not changed;

One value indicates the four-week value. The two values indicate the upper and lower sides, and the upper and lower sides respectively. Of course, you can also set the value of the specified position: margin-left; padding-bottom.

Exercise results

Iii. Framework

1. Concepts of frameworks

A frame is a rectangular area in a browser window. Each frame displays a webpage, adjacent to the frame of other webpages.

2. Create a framework set

① Create framework set text

<frameset cols="10%,90%"> <frame src="index.html" name="index" /> <frame src="page1.html" name="main" /></frameset>

Here, the window is divided into two parts: the left half side is called index, accounting for 10% of the window width; the right half side is called Main, accounting for 90% of the window width. It should be divided into the upper and lower parts using rows, you can set a fixed value and a remaining value "rows =" 100 ,*""

② Set navigation

For example, index.html is a navigation page. Click the page1 link above to open page1 in the right half of the window.

<a href="page1.html" target="main">page1</a>

The value of target indicates the place where the new webpage is to be opened. Previously, the section named "Main" has been set in the framework text set, so page1 will be opened in the main area.

③ Other attributes

<Frame/> other attributes can be set in the tag.
Marginwidth: sets the margin of the frame.
Marginheight: margin of the frame
Scrolling: whether to display the scroll bar ("yes" or "no ")
Frameborder: whether to display the separation line ("1" indicates yes, "0" indicates no)
Noresize: The Framework size cannot be adjusted.

④ Inline framework

<IFRAME/> accept all the attributes of the frame, which can be placed in the text area of the webpage.

⑤ Frame nesting

Frame display