Summary of CSS basics from Java programmers to cainiao (17th) (ii)

7. Organization elements (span and Div)

The span and DIV elements are used to organize and structure documents and are often used together with the class and ID attributes.

In this lesson, we will further explore the use of span and DIV, because these two HTML elements are very important to CSS.

• UsespanOrganization elements
• UsedivOrganization elements

Organize elements with span

spanAn element is a neutral element because it does not add anything to the document itself. But in combination with CSS,spanYou can add visual effects to some texts in the document.

Let's use the famous saying Benjamin Franklin:

<P> early morning and early morning make people healthy, wealthy, and intelligent. </P>

If we want to use red to emphasize the benefits of Mr. Franklin's belief that "don't spend a day in sleep", we can use<span>Label to mark each of the above benefits. Then, we willspanSet to the sameclass. In this way, we can define a specific style for this class in the style sheet later.

<P> get up early and get up early<SPAN class = "benefit"> healthy </span>,<SPAN class = "benefit"> rich </span>And<SPAN class = "benefit"> Cong Ying </span>. </P>

The corresponding CSS code is as follows:

span.benefit {color:red;}

Of course, you can also use the IDspanAdd a style to the element. However, as we learned in the previous lesson, if you use ID, you mustspanEach element specifies a unique ID.

Use Div to organize elements

As shown in the preceding example,spanIs limited to a block element, whiledivIt can be used to organize one or more block elements.

Aside from this difference,divAndspanThere is almost no difference in organizational elements. Let's look at an example. We have organized previous Presidents of the United States into two lists based on their respective political camps:

<Div id = "Democrats"><Ul> <li> Franklin D. Roosevelt </LI> <li> Harry S. Potter </LI> <li> John F. Kennedy </LI> <LI> Linda B. Johnson </LI> <li> Jimmy Carter </LI> <li> Bill Clinton </LI> </ul> </div><Div id = "Republicans"><Ul> <li> White D. Eisenhower </LI> <li> Richard Nixon </LI> <li> Geral Ford </LI> <li> Ronald Reagan </Li> <li> George Bush </LI> <li> George W. Bush </LI> </ul> </div>

Here, we can use the same method as the example to process the style sheet:

#democrats {background:blue;}#republicans {background:red;}

8. Box Model

The box model in CSS is used to describe a Rectangular Box formed by HTML elements. The box model also involves adjusting the margin, border, padding, and content for each element. The structure of the box model is displayed:

Box Model in CSS

The figure above may seem a bit theoretical. Well, let's try to use an instance to explain the box model. In our example, there is a title and some text. The HTML code for this example is as follows (from the Universal Declaration of Human Rights ):

By adding color and font information, this example can display the following effects:
This example contains two elements:h1Andp. The box model of these two elements is shown in:
Set the margin for the element
An element has four sides: top, bottom, left, and right.Margin (margin)The distance from the edge of an element to the adjacent element (or document boundary. See the illustration of Lesson 9th.
In the following example, we will learn howbodyElement) defines the margin. Show our requirements for external margins.
The CSS code that meets the preceding requirements is as follows:
body {margin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;}
Or you can use a more elegant abbreviated form:
body {margin: 100px 40px 10px 70px;}
Almost all elements can use the same method as above to set the margin. For example, we can use<p>Margin of text section definition marked:
body {margin: 100px 40px 10px 70px;}p {margin: 5px 50px 5px 50px;}
Set padding for elements
Padding can also be considered as "padding ". This is reasonable because the padding does not affect the distance between elements. It only defines the distance between the element content and the element border.
The following is a simple example to illustrate the use of the padding. In this example, all titles have a background color:
h1 {background: yellow;}h2 {background: orange;}
By setting the padding for the title, you can control how many white spaces are filled around the title text:
h1 {background: yellow;padding: 20px 20px 20px 80px;}h2 {background: orange;padding-left:120px;}
Border
Border can be used for multiple purposes, such as decorative elements or as the dividing line between two things. CSS provides endless options for setting borders.
 
  
 
   
Border-Width
 
   
Border-color
 
   
Border-style
 
   
Examples
 
   
[Border]
 
  
Border Width [border-width]
The Border width is set by CSS.border-widthThe value can be "thin" (thin), "medium" (normal), "thick" (thick), or pixel value. As shown in:
Border color [border-color]
The CSS attribute border-color defines the border color. The value is a normal color value, such as "#123456", "RGB (123,123,123)", and "yellow.
Border style [border-style]
Border styles are available in a variety of ways. Displays the actual display of eight border styles in Internet Explorer 5.5. In this example, we select "gold" as the border color and "thick" as the Border width for all the eight borders. Of course, this is just an example. You can set another color and thickness for the border.
If you do not want a border, you can set it to "NONE" or "hidden ".
Examples
We can combine the CSS attributes of the above three borders to create a variety of changes. For exampleh1,h2,ulAndpAnd other elements define different borders. Although its display effect may not be so beautiful, it shows you the possibility of many changes:
h1 {border-width: thick;border-style: dotted;border-color:gold;}h2 {border-width: 20px;border-style: outset;border-color: red;}p {border-width: 1px;border-style: dashed;border-color: blue;}ul {border-width: thin;border-style: solid;border-color: orange;}
You can also specify specific CSS attributes for the top border, bottom border, right border, and left border. The procedure is as follows:
h1 {border-top-width: thick;border-top-style: solid;border-top-color: red;border-bottom-width: thick;border-bottom-style: solid;border-bottom-color: blue;border-right-width: thick;border-right-style: solid;border-right-color: green;border-left-width: thick;border-left-style: solid;border-left-color: orange;}
[Border]
Like many other attributes, you can also abbreviated the CSS attribute of the border as a border attribute. Let's take an example:
p {border-width: 1px;border-style: solid;border-color: blue;}
Can be abbreviated:
p {border: 1px solid blue;}
Set width [width]
You can usewidthAttribute to set the width of an element, that is, the size in the horizontal direction.
The following is a simple example, which provides us with a box that can accommodate text:
div.box {width: 200px;border: 1px solid black;background: orange;}
Set height [height]
Note that in the previous example, the length of the content in the box determines the height of the box. You can useheightAttribute to set the height of an element. For example, we want to set the height of the box in the above example to 500 pixels:
div.box {height: 500px;width: 200px;border: 1px solid black;background: orange;}
Float)
We can use CSS attributesfloatFloat the element to the left or right. That is to say, float the box and its content to the right or left of the document (or upper-layer box) (see section 9th about the box model ). Clarified its principle:
How to achieve this effect?
The preceding HTML code is as follows:
<div id="picture"></div><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
To make the image float left and surrounded by text, you only need to set the width of the box where the image is located, and then set the CSS attribute.floatSet it to left:
#picture {float:left;width: 100px;}
Another example: Column
Float can also be used to sort data in the document. To create multiple columns, you must usedivTo structure the desired columns:
<div id="column1"><p>Haec disserens qua de re agaturet in quo causa consistat non videt...</p></div><div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p></div><div id="column3"><p>nam nihil esset in nostra potestate si res ita se haberet...</p></div>
Next, we set the column width to "33%" and definefloatAttributes make columns move to the left:
#column1 {float:left;width: 33%;}#column2 {float:left;width: 33%;}#column3 {float:left;width: 33%;}
floatThe attribute value can beLeft,RightOrNone.
Clear attributes
CSS attributesclearUsed to control the behavior of subsequent elements of floating elements.
By default, the successor element moves up to fill the available space that is vacant due to the floating of the previous element. In the previous example, the text is automatically moved to the image of Bill Gates.
clearThe attribute value can beLeft,Right,BothOrNone. The principle is as follows: if a boxclearProperty is set to "both", the top margin of the box will always be under the bottom margin of the floating box (if any) in front.
<div id="picture"></div>class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
To avoid text moving to the image, we can add the following code in CSS:
#picture {float:left;width: 160px;}.floatstop {clear:both;}
Element Positioning
CSS positioning allows you to precisely place an element on the page where you specify it. Joint Use of positioning and floating (see Lesson 13th), you will be able to create multiple advanced and precise la S.
In this lesson, we will discuss the following:
 
  
 
   
How CSS locates
 
   
Absolute Positioning
 
   
Relative positioning
 
  
How CSS locates
Imagine a browser window as a coordinate system:
The principle of CSS positioning is that you can place any box in any position of the coordinate system.
Suppose we want to place a title. By using the box model (see section 9th), the title is displayed as follows:
If we want to place this title 100 pixels above the top of the document and 200 pixels on the left, we can enter the following code in CSS:
h1 {position:absolute;top: 100px;left: 200px;}
The result is as follows:
As you can see, using CSS positioning technology to place elements is very accurate. CSS positioning is much easier than using tables, transparent images, or other methods.
Absolute Positioning
An element with absolute positioning does not obtain any space. This means that no space is left after the element is located.
To absolutely locate the elementspositionSet the attribute valueAbsolute. Then, you can use the attributeLeft,Right,TopAndBottomTo set where to place the box.
For example, if we want to place a box in each of the four corners of the document:
#box1 {position:absolute;top: 50px;left: 50px;}#box2 {position:absolute;top: 50px;right: 50px;}#box3 {position:absolute;bottom: 50px;right: 50px;}#box4 {position:absolute;bottom: 50px;left: 50px;}
 
  
 
   
Display example
 
  
Relative positioning
To relatively locate the elementspositionSet the attribute valueRelative. The difference between absolute positioning and relative positioning lies in the location calculation method.
The relative positioning element is used, and its position isRelative to its original location in the documentCalculated. This means that the relative positioning is to move the element from the original position to the right, left, up or down. When relative positioning is adopted, the corresponding space is obtained.
As an example of relative positioning, we can locate the three images relative to their original locations on the page. Note that these images will be left blank at their original locations in the document.
#dog1 {position:relative;left: 350px;bottom: 150px;}#dog2 {position:relative;left: 150px;bottom: 500px;}#dog3 {position:relative;left: 50px;bottom: 700px;}
Stack layers with Z-Index
CSS can process three dimensions: height, width, and depth. In the previous course, we have learned about the first two dimensions. In this lesson, we will learn how to make different elements hierarchical. In short, it is about the order of element stack.
Therefore, you can specify a number for each element (z-index). The principle is that a large number of elements will be superimposed on a small number of elements.
For example, we are playing poker and have the same hand. We can set one card for each cardz-indexTo indicate this card:
In this example, we use 1-5 consecutive numbers to represent the stacking order, but you can also use five different numbers to achieve the same effect. The key point here is that the size order of numbers is used to reflect the desired stacking order.
The code for the poker card example can be written as follows:
#ten_of_diamonds {position: absolute;left: 100px;top: 100px;z-index: 1;}#jack_of_diamonds {position: absolute;left: 115px;top: 115px;z-index: 2;}#queen_of_diamonds {position: absolute;left: 130px;top: 130px;z-index: 3;}#king_of_diamonds {position: absolute;left: 145px;top: 145px;z-index: 4;}#ace_of_diamonds {position: absolute;left: 160px;top: 160px;z-index: 5;}