There are many web use div + CSS layout of the tutorial, but there are many shortcomings, one is the layout of the CSS model is not clear, it is difficult to understand the relative positioning, floating and other concepts; second, although the shortcomings of "table set table" is avoided, but it brings the disadvantage of "div set div", excessive use of div tag Third, the class is too many, resulting in class disaster.
To use CSS correctly, the basic of CSS is just not enough to understand. Since it is a ramble, I will only talk about four aspects, and finally give the Xkland project as an example.
First, block model in CSS
In the definition of CSS, some HTML tags are displayed by the browser as a block, such as Div, table, p, UL and so on, we call the block element, some HTML tags are displayed in the browser text lines such as a, span, font and so on, we call the inline element. Inline element I'm not going to talk about it here, just talking about the model of the block element.
Each block element can be divided into the context, padding, boder and margin of a few parts, we often say the width and height, usually refers to the context of the width and height (also may be context+padding, specifically related to the browser), padding represents padding between content and borders, and margin represents whitespace outside the border, such as:
These parts can be specified through CSS, of course, CSS can also control the background, so we can use CSS to control the appearance of our page.
Second, the document Flow model in CSS
All the block elements in the HTML document are arranged in the order in which they appear in the document (of course, this is not the case), and each block will have a different row. Such as:
Their corresponding HTML is as follows:
<div id= "Div1" >div1</div>
<div id= "Div2" >div2</div>
<div id= "Div3" >div3</div>
To define their width, height, and borders, we define the following CSS:
#div1{
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
#div2 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
#div3 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
Third, relative positioning and absolute positioning model in CSS
In the document flow, each block element is arranged in a position in the stream, and we can rearrange its position by positioning properties in the CSS. Positioning is divided into relative positioning and absolute positioning, relative positioning is relative to the block element in the document flow position, for example, we can use relative positioning to put div2 to the right of Div1, CSS code is as follows:
#div1{
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
#div2 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
position:relative;
Top: -64px;
left:204px;
}
#div3 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
Here are the effects:
Can see an interesting phenomenon, that is, although we removed the div2, but there is a space between Div1 and Div3, indicating that the relative positioning of the elements will occupy the document flow space, where the div2 is the typical "standing manger not to poop."
Using absolute positioning can also put div2 to the right of DIV1, and absolute positioning will not occupy the document flow space, such as, DIV1 and Div3 there is no space between:
CSS code for DIV2:
#div2{
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
Position:absolute;
top:15px;
left:214px;
}
Absolute positioning is a good thing, you can display the content to any location on the page, but for our programmers, but we can not use too much absolute positioning, because the use of the program dynamically add content to the Div, the size of the div is not known, the location of each div cannot be determined to die.
Iv. floating and purging models in CSS
In CSS, the most difficult to understand is the float and clear meaning. Float can achieve such an effect, that is, a block element that should have been one line, if the float property is defined, then as long as the row space is sufficient, it will run another float element behind the buttocks, and no longer occupy a single row, such as:
Here the DIV2 and DIV3 are defined as floating, the code is as follows: #div2{
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
Float:left;
}
#div3 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
Float:left;
}
So what's the need for clear? This is because the elements of float are the same as the absolutely positioned elements and do not occupy the document space, so if we div2 and Div3 are nested in Div1, and Div2 and DIV3 are defined as floats, because they do not occupy the document space, Set to float after Div2 and Div3 are not part of the DIV1 content , so as the parent element of the Div1 no content fills, do not know the automatic expansion size, so that the Div2 and Div3 will run to the outside of Div1, such as:
The following are their HTML code:
<div id= "Div1" >div1
<div id= "Div2" >div2</div>
<div id= "Div3" >div3</div>
</div>
Here's their CSS code:
#div1{
border: 1px solid # 000099;
height: 60px;
width: 450px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
Because the elements of float do not occupy the document flow space, sometimes the elements will overlap on the float element, here I do not give an example.
In order to solve the above problem, we need to use clear on the element after float, in this case we add an empty paragraph behind Div3 and set it to clear, as follows:
<div id= "Div1" >div1
<div id= "Div2" >div2</div>
<div id= "Div3" >div3</div>
<p class= "Clear" ></p>
The </div>clear property defines the side on which the element is not allowed to appear floating elements. In CSS1 and CSS2, this is achieved by automatically increasing the upper margin for the purge element (that is, the element that has the clear attribute set). In CSS2.1, the clearance space is increased above the outer margin of the element, and the margin itself does not change. No matter what kind of change, the end result is the same,if the declaration is left or right cleared, the element's Sisu border boundary is just below the margin margin of the floating element on that edge。 The following is the CSS code for the newly added empty paragraph:. clear{
Clear:left;
}At this point Div1 has the content P (although it is empty inside p) and clear: left, so that P's Sisu border border is just below the margin of the floating element.
：
Or take my Xkland project as an example to design a complete page. Here is the layout of my welcome.jsp page:
In this page, I completely get rid of the "table set table" mode, and in addition to the top line in a div display logo, advertisment and Appendix Div, the other place does not have div nesting. Minimizing div Nesting is a powerful weapon to understand the meaning of Div, Div represents division, is part of the meaning, that is, only if there is no tag can be a part of the root element when the div is needed. In the above example, the menu bar does not use a div. The menu bar is implemented using a list, because the list is included in the UL tag, so it is not necessary to use a div. The following is the HTML code:<body>
<div id= "Header" >
<div id= "logo" > here shows the contents of id "logo" </div>
<div id= "Appendix" > here to show the contents of the ID "Appendix" </div>
<div id= "advertisment" > here to show the contents of the id "advertisment" </div>
</div>
<ul id= "Menu" >
<li> menu item One </li>
<li> menu item Two </li>
<li> menu item Three </li>
<li class= "Lastmenuitem" > Last menu item </li>
</ul>
<div id= "LoginView" > here to show the contents of the id "LoginView" </div>
<div id= "Catalog" > here shows the contents of ID "Catalog" </div>
<div id= "Search" > here to show the contents of id "search" </div>
<div id= "Newtopics" > here to show the contents of the id "newtopics" </div>
<div id= "Newreply" > here to show the contents of the id "newreply" </div>
<div id= "Hottopics" > here to show the contents of the id "hottopics" </div>
<div id= "Statistics" > here to show the contents of the ID "statistics" </div>
<div id= "Hotgroups" > here to show the contents of the id "hotgroups" </div>
<div id= "Hotusers" > here to show the contents of the id "hotusers" </div>
<div id= "Footer" > here to show the contents of the id "footer" </div>
</body>
Isn't it simple?
The contents of the page beautification and layout are all transferred to the CSS. First, the menu items are implemented using lists, and the general display style for the list is as follows:
How do you make them appear in one line? That's the float property I talked about earlier. We define the following style for the UL ID menu to display the border:
#menu{
border:1px solid #0F54C3;
padding:5px;
margin:0px;
width:804px;
margin:1px 0px;
height:12px;
}
In order to avoid the float element above the bounding box, I did not use clear, but instead defined the Height property of the menu as 12px, and the font on the page was high, and the menu had only one row, so it would not run outside the border. Each menu item in the menu is an Li, and we can define its style by #menu Li {}, which is called the descendant selector, which is a powerful weapon to avoid using too many classes, as you can see from the preceding HTML code that I have only defined classes for the last menu item. Because I don't want the last menu to be followed by a small vertical line, the small vertical line between menu items is done by defining the right border style of Li, and its CSS code is as follows:
#menu Li{
Float:left;
padding-left:10px;
padding-right:10px;
border-right-width:1px;
Border-right-style:solid;
Border-right-color: #0F54C3;
}
#menu. Lastmenuitem {
Border-right-style:none;
}
For so many of the boxes below, in addition to the #nettopics I use absolute positioning to put it on the right side as the main content area, the others are down the document flow, only defined the width, and do not need to define the location.
If we want to beautify the page, for example, add the site-specific images, we can modify #logo, #advertisment, #appendix的css代码, and even when others beautify my site, you can set the three div visible to false, and directly define #header的样式. Here, we simply set the background of the #logo as the logo image and remove the border. Here is the CSS code: #logo{
Float:left;
height:60px;
width:200px;
Background:url (.. /images/xkland_logo.gif) No-repeat left top;
}
For other Div, we also need to add content for them, #loginView这个稍微特殊一点, we need to add the title and form, while the other div is much simpler, just need the title and the list is enough. Here we take #loginview as an example, here is the effect after adding content:
Although the layout is quite complicated, I did not use the table at all. Here is the HTML code: <div id= "LoginView" >
<form name= "Form1" Id= "Form1" method= "Post" action= "" >
<p> User name:
<input class= "TextInput" name= "UserName" type= "text" id= "UserName"/>
</p>
<p> Password:
<input class= "textInput" name= "password" type= "password" id= "password"/>
</p>
<ul>
<li> forgot Password? </li>
<li> New User Registration </li>
<li><input type= "checkbox" name= "checkbox" value= "checkbox"/> Remember me </li>
</ul>
<p class= "Clear" >
<input type= "Submit" name= "submit" value= "Login"/>
</p>
</form>
</div>
As you can see, I use the H3 tag as the title, so as to avoid the additional nesting of a div for the title, the input text box defines the class TextInput to define their style, and the other text content, I use the P tag and UL, Li Tag, from the above can see the strong CSS. Here's their CSS code:
#loginView{
border:1px solid #0F54C3;
width:280px;
margin:1px 0px;
}
H3{
border-bottom-width:2px;
Border-bottom-style:solid;
Border-bottom-color: #0F54C3;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:15px;
margin:0px;
font-size:10.5pt;
}
#loginView P{
margin:3px;
Text-align:center;
}
#loginView form{
margin:0px;
}
. textInput {
border:1px solid #CCCCCC;
Width:15em;
height:12px;
}
#loginView ul {
margin:8px 10px 3px 10px;
}
#loginView ul Li {
Float:left;
width:130px;
height:18px;
}
. Clear {
Clear:left;
}In short, the use of CSS to separate the program and art is the absolute truth, as long as we programmers can output the correct data in the box is enough, so as to minimize the bug of the program, beautify the page to let the interface designer to do it. Of course, we programmers should be able to design the correct division and nesting in HTML, so that the interface designer can find the anchor that defines CSS when designing the interface.
Css-div positioning
