DIV + CSS standardized webpage layout (1), divcss

DIV + CSS standardized webpage layout (1), divcss
1. DIV + CSS definition and advantagesWhat is Div + css?

Div + css is a popular Web page layout technology.

Div to store the data to be displayed (text, chart...), css is used to specify how to display, so as to achieve data and display Mutual Effect

Div + css advantages

• Separation of performance and content
• Concise code, improving page browsing speed
• Ease of maintenance and revision
• Improve the indexing efficiency of search engines on webpages

We can simply understand div + css as follows:

DivIs a container used to store content (text, images, elements.

CssIt is used to specify how the content in the div is displayed, including the position and appearance of the content.

 

2. "meaningless" HTML element div and span

• HTML is only a method for assigning content. Most HTML tags have their meanings (for example, tag p creates a paragraph, and h1 creates a title). HoweverDivAndSpanThe tag does not seem to have any content significance.It sounds as useless as a hammer made of a bubble. But they are widely used when combined with CSS. All you need to remember is that span and div are "meaningless" labels. Their existence is purely an application style, so it does not have any effect when the style sheet fails.
• They are used to combine a large piece of HTML code and give some information to them. Most of them are associated with elements using class attributes and id attributes.The difference between span and div is that span is inline and used in a small inline HTML. The division element is block-level (simply put, it is equivalent to having a broken line before and after it)It is used to combine a large piece of code to provide structure and background elements for a large part of the HTML document, including paragraphs, titles, tables, and other parts, this makes div easy to create different integrated classes.
• All content between the start tag and end tag of a div is used to constitute this block. The features of the elements contained in the block are controlled by the attributes of the div tag, or you can use the style sheet to format the block for control.

3. Box Model of page layout

(1) related attributes of the Box Model

• Margin (outer margin/Border)
• Border (border)
• Padding (padding/padding)

Let's take a look at the figure to understand the role of each attribute:



The preceding attributes are further divided into four directions: Top, right, bottom, and left.

Q: How do I calculate the width, height, and height of a page element?
Answer: actual placeholder size of an element = element size + padding + Border Width
For example, the actual placeholder height of an element = height Attribute + upper/lower padding + upper/lower Border Width

　　

(2) hierarchy of the Box Model

We can understand it through a typical 3D three-dimensional structure diagram of the box model,


From the top down, the hierarchy is as follows:

Layer 3: Box border (border ),
Layer 3: content and padding)
Layer 3: background image)
Layer 3: background color)
Layer 3: margin of the box (margin)

From this hierarchy, we can see that when both the background image and the background color are set
The image is displayed above the background color.

　

4. Declare the CSS attribute of the Box Model

For example:

1 
 

 

 
  
Horizontal and vertical center

 
Horizontal center includes two situations:
Horizontal center of block-level elements: margin: 0px auto;
Horizontal center of text content: text-align: center;

Vertical center:
You can set the height and
The Row Height and style attributes are consistent, for example:
Div {
Width: 400px;
Height: 400px;
Line-height: 400px;/* The Row Height is the same as the div height */
}
5. CSS attributes related to page layout
 
1 # box {/* declares the ID selector named box */2 position: absolute;/* sets the layer to absolute position */3 top: 30px; /* The layer distance from the vertices is 30 pixels */4 left: 100px;/* The layer distance from the left point is 100 pixels */5 width: 300px; /* set the layer width to 300 pixels */6 height: 150px;/* set the layer height to 150 pixels */7 overflow: auto; /* When the content exceeds the range of the layer, the scroll bar */8 z-index: 1 is displayed;/* set the order of the layer to overwrite */9 visibility: visible; /* whether the parent layer is visible or not, the child layer is visible */10}
 
 
6. Positioning Layer Model of Box block boxes-absolute positioning
If you want to set absolute positioning in the layer model for the element, you need to setPosition: absolute(Absolute positioning), the role of this statement will drag elements out of the Document Stream, then, use the left, right, top, and bottom attributes to locate the parent inclusion block with the positioning attribute closest to it. If such a block does not existBrowser window.
The following code moves the div element Px to the right of the browser window and 50 PX down.
1 div{2     width:200px;3     height:200px;4     border:2px red solid;5     position:absolute;6     left:100px;7     top:50px;8 }9 <div id="div1"></div>
 
The effect is as follows:

 
Layer Model-relative positioning
If you want to set relative positioning in the layer model for the element, you need to set position: relative (indicating relative positioning), which determines the element inNormal document flow. The relative positioning process is to generate an element (and the element floats like a layer) in the static (float) mode, and thenPreviously moved,The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes, and the positions before the offset remain unchanged.
The following code moves 50px down from the previous position and 100px to the right;
#div1{    width:200px;    height:200px;    border:2px red solid;    position:relative;    left:100px;    top:50px;}<div id="div1"></div>

:

What is "the position before the offset remains unchanged?
You can do an experiment by adding a span tag to the end of the 19 lines of div tags in the code editor on the right, and writing some text in the tag. The following code:
<Body> <div id = "div1"> </div> <span> the position before the offset remains unchanged, the front div cannot be overwritten. The front div is not offset. </span> </body>
:

It can be seen that, although the div element is offset from the previous position, the previous position of the div element is retained, therefore, the span element is displayed after the position of the div element.
 
Layer Model-fixed Positioning
Fixed: fixed positioning, similar to the absolute positioning type, but its relative moving coordinates are views (Webpage window in the screen. Because the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen, or change the display size of the browser window, therefore, fixed positioning elements are always located at a certain position in the browser window and are not affected by the flow of documents. This is the same as the background-attachment: fixed attributes attribute. The following code comparesBrowser ViewMove 100px to the right and 50px down. The position remains unchanged when you drag the scroll bar.
1 # div1 {2 width: 200px; 3 height: 200px; 4 border: 2px red solid; 5 position: fixed; 6 left: 100px; 7 top: 50px; 8} 9 <p> text. </P> 10... 11
 
 
7. Floating layout of the Box Model
To understand floating attributes, you must first understand what isDocument Stream?
Document Stream:The browser displays elements in html documents in the order they appear,
Arranged from left to right, from top to bottom

The floating attribute is the position attribute in CSS. Its usage is as follows:
Float: float (left, right, none );

Left is left floating, right is right floating, none is the default value indicates not floating
,Sets the floating of an element. The element is moved left or right away from the document stream.
Until its outer margin hits the border of the parent element or the edge of another floating Element
Until

The floating example does not use the floating 3 DIV:
HTML Structure Code:
<Div id = "first"> 1st div </div>
<Div id = "second"> 2nd div </div>
<Div id = "third"> 3rd div </div>

CSS style code:
# First, # second, # third {
Width: 100px;
Height: 50px;
Border: 1px #333 solid;
Margin: 5px;
}

Execution result


Add float: left; to the style;
Execution result


Change the value to float: right and try to see what the right floating effect is.

16. Place product classification DIV, content DIV, and right DIV side by side

HTML Structure Code:

1 <div id = "container"> 2 <div id = "header"> header) </div> 3 <div id = "main"> 4 <div class = "cat"> item classification (cat) </div> 5 <div class = "content"> content </div> 6 <div class = "sidebar"> right side (sidebar) </div> 7 </div> 8 <div id = "footer"> bottom (footer) </div> 9 </div>
 
1 <div id = "container"> 2 <div id = "header"> header) </div> 3 <div id = "main"> 4 <div class = "cat"> item classification (cat) </div> 5 <div class = "content"> content </div> 6 <div class = "sidebar"> right side (sidebar) </div> 7 </div> 8 <div id = "footer"> bottom (footer) </div> 9 </div>
 
CSS style code (added on the basis of section 13th CSS code ):
 1 .cat, .sidebar { 2         float:left; 3         width:20%; 4         height:100%; 5     } 6  .content { 7         float:left; 8         width:60%; 9         height:100%;10     }
 
17. clear

Clear is only valid for block-level elements. It indicates that if the previous element has left or right float, the new line is wrapped.
Value of the clear attribute: rigoal, left, both, and none
Partial content