Study Notes on CSS website layout recording (III)

Chapter 3 CSS webpage layout and positioning

3.1 div

Almost any tag in XHTML can be used for floating and positioning, and div bears the brunt. For other tags, they often have their own purposes, and div elements exist for floating and positioning.

3.1.1 what is div

Div is a container object specially designed for Layout Design in XHTML. In traditional table layout, the layout design of pages is completely dependent on the table object. Today, CSS layout is another layout method. Div is the core object of this layout method. To make a simple layout, you only need to rely on two things: div and CSS. Therefore, CSS layout is called div + css layout.

3.1.2 how to use div

You only need to apply the <div> </div> label to place the content, and then you can apply the div label. However, the div tag sound is an identifier that identifies the content as a block area and is not responsible for other tasks.

In addition to directly adding text to a div tag, you can also add other tags. You can also use multiple divs for nesting. The ultimate goal is to properly identify the content area.

When using div labels, you can add some attributes, such as id, class, align, and style. In the CSS layout method, the align and style attributes should not be written in the div tag of the XHTML page to separate content and performance. Therefore, the final div code can only be in the following two forms:

• <Div id = "id name">... </div>
• <Div class = "class Name">... </div>

3.1.3 understand div

On a page without any CSS application, even if div is applied, there is no actual effect. So how can we understand the great potential of div layout? Try to write two divs for the left and right columns. The Code is as follows:

<Div> left column </div>

<Div> right partition </div>

At this time, the browser can only see the upper and lower lines of text, and does not see any features of the div.

Remember one thing ,. Almost all objects in XHTML are of two types by default:

• Block objects:A block object indicates that the current object is displayed as a square. By default, it occupies the entire row, and other objects can only be displayed in the next row.
• In-line interline object (or Inline element ):Opposite to the block object, it allows the next object to be displayed with a shared row.

Block div indicates that it is not used for line layout similar to text in pages, but for Block Layout of large areas and large areas.

The page effects show that the webpage has no effect except text. The relationship between the two divs is only a front-and-back relationship, and there is no field type similar to the table. Therefore, the div itself has no relationship with the style. Style is implemented by writing CSS.

In the CSS layout, the work to be done can be summarized into two things: one is to mark the content using div, and the other is to compile the necessary CSS style for this div.

3.1.4 coordinate with nested div Structure

Div can be nested at multiple layers to achieve more complex page layout. For example:

<Div id = "header"> header </div>

<Div id = "center">

<Div id = "left"> left column </div>

<Div id = "right"> right column </div>

</Div>

<Div id = "footer"> bottom </div>

In the above Code, an id is defined for each div for identification. You can see the three div objects with the id header, center, and footer. They are in a parallel relationship. In the webpage layout structure, they are placed vertically to the top down.

In the center, a layout of left and right columns is used for the purpose of content. The two divs are in a parallel relationship, and they are both in the center, therefore, they form a nested relationship with the center.

Note:When appropriate, nesting should be used as little as possible to ensure that the browser does not overconsume resources to parse the nested relationship. A simple nested structure is more conducive to understanding and control the layout.

3.1.5 use appropriate objects for Layout

For Web standards, we recommend that you use tags that best conform to the meaning of elements on the page to identify the elements. In the CSS layout, you must use all the tags supported by XHTML as much as possible, so that the web object will have good readability. Through further CSS definition, the style presentation capability is no worse than the table, and there are more style control methods than the table, which reflects the basic advantages of CSS layout.

XHTML labels and functions:

Structure tag	Brief Introduction
Html	Html and elements
Head	Html header Area
Body
Div	Block definition tag
Span	Inter-line block label

	Brief Introduction
DOCTYPE	Specify Document Type
Title	Browser title bar
Link	Link to extended resources
Meta	Meta Information
Vstyle	Style Sheet Area

 

Text Control
P	Section
H1-h6	Title Level 1-6
Strong	Increase emphasis
Em	Emphasis/emphasis
Abbr	Define abbreviations of Text
Acronym	Define Acronyms
Address	Tag contact information
Bdo	Reversed alphabetic order
Blockquote	Block reference content
Cite	Content referenced between lines
Q	Small inter-line references
Code	Source code area
Ins	Edit annotation: insert content
Del	Edit annotation: Delete content
Dfn	Text term comment
Kbd	Text requires keyboard input
Pre	Pre-formatted text
Samp	Example
Var	Text is a variable
Br	Enter

Table	Brief Introduction
Table	Table
Tr	Line
Td	Cell
Th	Header
Tbody	Table subject
Thead	Table Header
Tfoot	Bottom of table
Col	Table Column
Colgroup	Set of table columns
Caption	Table title

 

List	Brief Introduction
Ul	Unordered list
Ol	Ordered list
Li	LIST ITEMS
Dl	List with description
Dt	Terms in the description list
Dd	Description in the description list

 

 

Form	Brief Introduction
Form	Form Area
Input	Input box
Textarea	Text Box
Select	Drop-down list
Option	Drop-down list items
Optgroup	Drop-down list item set
Button	Button
Label	Tag
Fieldset	Tab
Legent	Tab title

Performance	Brief Introduction
B	Bold
I	Italics
Tt	Typewriter font
Sub	Subscript
Sup	Superscript
Big	Increase
Small	Decrease
Hr	Split line

 

 

Link	Brief Introduction
A	Link
Vbase	Basic link class
Script	Brief Introduction
Script	Script Area
Noscript	Unable to execute script substitution

Images and objects	Brief Introduction
Img	Insert Image
Area	Image hot zone details
Map	Image hot zone
Object	Insert object
Param	Object Parameters

 

All XHTML tag objects are listed above, but not all objects are frequently used.

Use div to set a layout with three sides: header, center, and footer. The basic expression of the three divs is a column layout.

One-column layout is the basis of all la s and the simplest layout form. A column layout is a fixed-width layout style.

By default, if the div width is not set, the div occupies the whole row of space.

3.3 adaptive width of one column

Adaptive Layout is a flexible layout. It can automatically change the width or height of a browser window based on the size of the browser window.

In fact, the div occupies the whole row space by default, that is, the Adaptive Layout with the width of 100%. This setting needs to be changed for a column to adapt to the layout, and the width can be changed from fixed value to percentage value.

　　Center a column with fixed width　

Page Center is a common form of webpage design. In the traditional table layout, the align = "center" attribute of the table is used to center the table, and content is loaded in the cell to center the entire page.

The div itself also supports the align = "center" attribute, which also enables the div to be centered. However, CSS layout is designed to achieve separation of representation and content. align alignment is a style code written in the div attribute of XHTML, which violates the separation principle, therefore, the CSS method should be used to center the content. Center CSS style:Margin: 0px auto;

In addition to using numeric values directly, margin also supports an attribute value called auto. The auto value allows the browser to automatically determine the margin. Here, if you set the left and right margins of the current div to auto, the browser will set the left and right margins of the div to the same, so as to display the center state.

The margin attribute is used to control the object'sTop, right, bottom, left (clockwise rotation)Four margins. When margin uses two parameters, the first parameter indicates the top and bottom margins, and the second parameter indicates the left and right margins.

3.4 fixed width of two columns

Two divs are required for the two-column layout. Use the left and right divs respectively. To implement a two-column layout, you must use another property --Float.

The float attribute is a very important attribute in CSS layout. It is used to control the floating layout of objects. Float options are none/left/right. When float is set to none, the object is not floating. When left is used, the object is floating to the left, and when right is used, the object is floating to the right.

3.5 two-column width adaptive

Like the adaptive width layout setting of a column, the percentage width value is assigned. For example, set the width of the left column to 20% and the width of the right column to 70%. Why didn't I set the right column to 80%?

This is because in the CSS layout, the width of an object is not only determined by the width value. The actual width of an object is composed of attributes such as the width of the object, the margin of the object, the border between the left and right, and the padding.

3.6 adaptive width of two right columns

In practice, sometimes the left column needs to be fixed with a fixed width, and the right column is adaptive according to the browser window size. You only need to set the width value of the left column. The right column does not set any width value, and the right column does not float.

3.7 fixed width center of two columns

For the binary classification center problem, the use of margin: 0px auto; does not seem to be able to achieve the effect. In this case, the div nesting design is required. You can use a center div as the container to place the two divs in the two columns in the container so as to display the two columns in the center. The XHTML code structure is as follows:

<Div id = "layout">

<Div id = "left"> left column </div>

<Div id = "right"> right column </div>

</Div>

The CSS code is as follows:

# Layout {

Margin: 0px auto;

...

}

3.8 adaptive width of three floating middle Columns

If you want the left column of a three-column layout to be fixed width and displayed on the left, the right column must be fixed width and displayed on the right, the middle column needs to be in the center of the left and right columns, and automatically adapt according to the spacing between the left and right columns. This layout simply uses the float attribute and percentage value. Therefore, we need to find new ideas to solve the problem.

　　Absolute Positioning

Absolute positioning is implemented through the position attribute. The optional parameters of position are static, absolute, and relative.

For each object on the page, the default position attribute is static. Using position: absolute; will change to the absolute position mode. When this attribute is used, you can use the top, right, bottom, left, or the upper right and lower left distance values to determine the specific location of the object. The CSS code is as follows:

# Layout {

Position: absolute;

Top: 20px;

Left: 0px;

}

When top: 20px is set, it will always be 20 PX above the browser window, and left: 0px; it will ensure that it is 0 px from the left of the browser.

Note: if an object is set with position: absolute;, it is essentially separated from other objects. Its positioning mode does not affect other objects, nor is it affected by the floating positioning of other objects. In a sense, after absolute positioning is used, the object floats on the webpage like a layer. If you use an object after absolute positioning, you do not need to consider its floating relationship. You only need to set the top, right, bottom, and left4 values of the object.

3.9 highly adaptive

In some cases, the height of the object is set to 100%, which cannot be highly adaptive. The CSS code is as follows:

   { :; :; }  { :; :; :; :; }

As in the above Code, height: 100% is set for the # left object. However, the height: 100% of the html and body is also set, which is the key to the highly adaptive problem.Whether the height of an object can be displayed as a percentage depends on the parent object of the object.

　　On the page, # left's parent object is the body. By default, the browser does not give the body a height attribute. Therefore, set # left to height: 100%; it does not produce any effect. However, once height: 100% is set for the body, its child object # height: 100% of left takes effect, which is a highly adaptive problem caused by browser parsing rules.

3.10 Box Model (Box Model)

The box model is a core concept in CSS. Because of browser design, the actual performance of the box model varies with different browsers.

3.10.1 what is a box model?

The box model refers to every element in the CSS layout. It is regarded as a box in the explanation of the browser. The browser uses the box size and floating mode to determine whether the next box is close to display, whether the next line is displayed, or other display methods. Any CSS web page is composed of many boxes of different sizes.

3.10.2 model details

As described above, you only need to understand the width or height of the Box Model to understand the position they occupy in the layout.

In the box model design of CSS, its width and height are provided not only by the value width or height, but by a combination of attribute values. In addition to the width or height value, CSS also provides three attributes: padding, margin, and border, controls the display details of an object.

Summary:The actual space occupied by a box (including margin, border, and padding) is:

• Vertical direction:Height + border-top + border-bottom + margin-top + margin-bottom + padding-top + padding-bottom
• Horizontal Direction:Width + border-left + border-right + margin-left + margin-right + padding-left + padding-right

3.10.3 upper and lower margin overlay (margin overlay)

The spacing between objects is obtained by the final calculated values of the two object's box model. In theory, but there is also a special case, that is, the gap between upper and lower objects. When both objects are in the upper-right relationship and both have the margin attribute, the margin caused by margin is superimposed. For example:

   { :; :; :; :; :; }  { :; :; :; :; :; }

It may be thought that, because object a has a bottom margin of 10 PX and object B has a top margin of 10 PX, their upper and lower distance should be 20 PX. In fact, their upper and lower distances are all 10px. This problem is caused by CSS design. For example, to control a paragraph, multiple p labels form a paragraph. If all these p labels have the property of margin: 10px, the top margin of the first section is 10px, the margin between the first paragraph and the second paragraph is 20 PX, resulting in inconsistent sorting distance.Blank edge superposition rules.

Summary:When the blank side is superimposed, that is, the upper and lower adjacent normal elements, the upper and lower margins are not simply added, but the larger margin value prevails.Once a float attribute is set for an element, the elements are no longer overlapped with blank edges.

About 3.10.4 the margin doubling Problem

　　When the box model object is floating, the left and right margin of a very large object will double. You can set the object'sDisplay: inline;. The display attribute is used to force an object to be parsed in one display mode.

3.11 Float)

Floating is an important theory in CSS layout. CSS web page layout can only exist in two ways: Floating layout and positioning layout. The core of the two positioning methods is beyond the control of the Document Stream.

3.11.1 Document Flow)

Document Stream is an important concept for browsers to parse web pages. For An XHTML web page, any element under the body element forms one by one according to its order.Upper/lower relationshipThis is the document stream. Document Stream is the default display rule of the browser.

3.11.2 floating location

The purpose of floating positioning is to break the default display rules of the Document Stream, and display according to the layout requirements. This requires the use of the float attribute.

3.11.3 Clear floating)

Cleanup is another useful tool in floating. This requires the clear attribute to reject floating in a certain direction. One way to clean up is to clear one side, such as clear: left; To clear floating objects on the left side. Another way is to, when many elements are floating, suddenly you need to start another line. In this case, you can create a blank div tag and use the clear: both; attribute to set that the left and right sides of the div are not floating.

3.11.4 when to choose floating Positioning

When the website needs to have a strong adaptability to resolution and content size, it needs to adopt floating positioning. Floating positioning can move the layout to a window, rather than a fixed position in the window. Therefore, it is mainly designed for non-fixed web pages.

　　1. center layout

The center of an element is relative to its left and right sides. If the width of the browser window is not fixed, you need to use div for a long time and use auto settings for the left and right margin to make the element center floating.

　　2. horizontal width percentage Scaling

If there is a two-column width Adaptive Layout, when the width of the left column cannot be fixed, the position of the right column cannot be fixed. Therefore, the right column must float to the right of the left column, to adapt to the changing width of the left column.

　　3. attributes such as margin, padding, and border must be used.

Floating layout can precisely control the positional relationship between objects by controlling the border and spacing of objects. Considering that the margin of each object is different, if you need to use margin to control the object placeholder, floating positioning is also required.

3.12 absolute and relative positioning

3.12.1 absolute positioning

After position: absolute is used, the object starts absolute positioning. absolute positioning is mainly achieved by setting the margin values in the top, right, bottom, and left directions of the object. Once an object is absolutely positioned, it is completely separated from the document stream and floating model and exists independently of other objects. The CSS code is as follows:

    { :; :; :; :; :; :;  }   { :; :; :;  }   { :; :; :;  }

At this time, the position of the elements B and d is determined by the top value (top margin) and left value (left margin). They are separated from the floating of a and c, float on the screen.

　　Depth (z-index)

Because the positions of elements B and d are determined by their margins, there is a problem, that is, overlapping elements. In this case, you can set the z-index attribute of the object to set its overlapping order, that is, the order of the z axis. The CSS code is as follows:

{:;:;:;:;}{:;:;:;:;}

When the z-index attribute is not set at the beginning, the d element is located above the B element. After using the z-index attribute, You can reset their z-axis sequence.

Note:Take the value of z-index as the standard, and the level of the struct object is above the small value object.

3.12.2 relative positioning

In fact, relative positioning is an extension of floating positioning and absolute positioning. The relative positioning keeps the set element relative to its original position, without damaging the information of its original position. Position: relative;

　　Relative location with no placeholder

When the object uses position: relative;, although the object is relatively located, its original placeholder information still exists in the Document Stream and floating object. If you want to achieve absolute positioning, and completely independent from other objects, you can also perform relative positioning, you can use a group of positioning combinations. The XHTML code is as follows:

      a 　 b 　 c 　 d 

The CSS code is as follows:

   { :;　 :; :; :; :; }  { :; :; :; :; :; :; }  { :; :; :; }

As you can see, B has been relatively positioned in sight and has no space occupied. Both c and d move to the right of. The reason for achieving this effect lies in the combination of relative positioning and absolute positioning. Here, the absolute position of position: relative; is set for the divGroup object, but its top and left values are not set. Therefore, divGroup can still be used as a floating object. At the same time, the positioning method of object B is changed from position: relative; To position: absolute; absolute positioning. Although it is changed to absolute positioning, the parent level is relative positioning, therefore, the absolute positioning here is relative to the parent level, rather than absolute positioning for the browser.

3.12.3 when to choose absolute and relative positioning

Absolute and relative positioning are not common in practical applications. Values exist in some special situations.

Absolute positioning is used to set all settings on the webpage, and does not require the use of attributes such as margin, padding, and border for control. Generally, some of the following designs will be used.

• Irregular Webpage Design
• Design on the screen
• Interactive Design