By adding color and font information, this example can display the following effects:
This example contains two elements:h1
Andp
. The box model of these two elements is shown in:
Set the margin for the elementAn 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 howbody
Element) 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 elementsPadding 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;}
BorderBorder 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-width
The 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 ".
ExamplesWe can combine the CSS attributes of the above three borders to create a variety of changes. For exampleh1
,h2
,ul
Andp
And 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 usewidth
Attribute 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 useheight
Attribute 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 attributesfloat
Float 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.float
Set it to left:
#picture {float:left;width: 100px;}
Another example: ColumnFloat can also be used to sort data in the document. To create multiple columns, you must usediv
To 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 definefloat
Attributes make columns move to the left:
#column1 {float:left;width: 33%;}#column2 {float:left;width: 33%;}#column3 {float:left;width: 33%;}
float
The attribute value can beLeft,RightOrNone.
Clear attributesCSS attributesclear
Used 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.
clear
The attribute value can beLeft,Right,BothOrNone. The principle is as follows: if a boxclear
Property 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 PositioningCSS 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 locatesImagine 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 PositioningAn 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 elementsposition
Set 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;}
Relative positioningTo relatively locate the elementsposition
Set 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-IndexCSS 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-index
To 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;}