Web Development Learning Experience-4--CSS box mode and Layout

First, let's talk about the box mode. The so-called box mode isCSSView elements,CSSThink of each single element as a box, as shown in:

 

It is called the box mode because it is very similar to the box in our daily life. We will not talk about it here. Most of the attributes in CSS are used to control content, such as width, height, and color. padding, border, and margin are optional, padding and margin indicate a blank area and can only control its size. border is a visible border that can control its border style, width, and color.

 

The following describes the layout.

Under normal circumstances, the browserHtmlEach element is displayed from start to end. Block elements are arranged from top to bottom, and inline elements are arranged from left to right in the block element. WhileCSSSome attributes of can change the rendering mode. These attributes are described here, mainlyFloatAndPositionAttribute, andClearAttribute to assistFloat,Z-IndexAttribute assistancePosition. These attribute values cannot be inherited.

FloatAttribute positioning:

FloatThe property value can beLeft,Right,None.NoneIt is the default value, indicating that the element is not drifting. the browser displays the element normally. Needless to say. If it is setLeftOrRight, The element is moved to the left or right side. So what is drift?

To put it simply, drift refers to the process of extracting an element from a normal stream and displaying it on the left or right of its parent element.You may not understand this, so let's take a step-by-step look at how the browser is drifting an element.

Suppose we have the followingHtmlTo see the layout more clearly, we add a red border to each part and add an orange background color to the Section,Source codeAs follows:

Html
< Body >
< Div ID = "Header" >
< H1 >
Here is the header. </ H1 >
</ Div >
< Div ID = "Content" >
< Div ID = "Leftbar" >
< Ul >
< Li > Item 1 </ Li >
< Li > Item 2 </ Li >
< Li > Item 3 </ Li >
< Li > Item 4 </ Li >
</ Ul >
</ Div >
< Div ID = "Main" >
< P >
This is the main region. </ P >
< P >
In the light of the sun and the spring, I am at home to share with you my web development learning experience. What kind of spirit is this ?! </ P >
< P >
In the light of the sun and the spring, I am at home to share with you my web development learning experience. What kind of spirit is this ?! </ P >
< P >
In the light of the sun and the spring, I am at home to share with you my web development learning experience. What kind of spirit is this ?! </ P >
</ Div >
</ Div >
< Div ID = "Footer" >
< P >
Here is the foot. </ P >
</ Div >
</ Body >

# Header, # footer, # Content, # leftbar, # Main
{} {
Border:Solid 1px red;
}

P
{} {
Background-color:Orange;
}

 

This section of HTML will be displayed in the browser as follows:

If we setLeftbarSetFloat: Left, width: 20%, It will look like the following:

The above is the principle of float. However, in practice, we usually need a column of leftbar and Main, instead of the main content flowing into the leftbar. Ha, you need to use your brains. What should I do? We can specify margin-left: 20% for Main, as shown below:

We found a problem, that is, leftbar broke through the content area of its parent element. Yes,The drifting element is no longer restricted by its parent element region, or the drifting element does not make its parent element region larger.As a result, footer rendering does not meet our needs. The clear attribute is riding on white horse to help us. Let's add the clear: Left attribute to footer.

At this point, you should be clear about the basic principles of float and clear formatting. How can we discharge pleasing pages? This requires your brains. It is an art of design and design. Understanding the principles is simple, but the art of design is not so easy to learn.

 

Finally, let's briefly talk about position.

Position can be set to the following four values:

Static:Default Value, indicating that the elements are formatted as normal streams.

Absolute:Extract elements from the normal stream and place them inLocation specified on the page(Specified by the top, left, right, and bottom attributes), this element does not have any impact on other elements (this is a big difference from the drifting element ).

Fixed:Extract elements from the normal stream and place them inLocation specified by the browser window(Specified by the top, left, right, and bottom attributes), which enables elements to scroll without Page scrolling and always stay in a certain position of the browser.

Relative:The element is still difficult to be part of the page stream. The browser first schedules all elements in normal mode,At the last moment, the browser offsets the element to a certain position.(Specified by top, left, right, and bottom attributes ). This attribute is rarely used.

If there are several elements with the specified position overlapping, Which of the following is the first and the last? The Z-index attribute will help you in the future. The larger the value, the higher the front.

 

Now, let's talk about html and CSS. From the next article, we will talk about Asp.net. I think the basic applications will be shared by everyone, and I will not be able to find a large pile of books and materials. So, I want to focus on the implementation principles of Asp.net and analyze the sources of Asp.net.CodeWe hope to help you understand the nature of Asp.net. I will assume that you have mastered the basic essence of OO and some design patterns.