Don't say much. Let's start with the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
width: 600px;
height: 600px;
padding: 15px;
border: 1px solid red;
margin: auto;
}
#first{
height: 180px;
width: 180px;
background-color: pink;
text-align: center;
padding:10px 5px 15px 20px;
position: relative;
left: -7px;
bottom: 8px;
}
#second{
height: 180px;
width: 180px;
background-color: pink;
text-align: center;
position: relative;
left: 402px;
bottom: 212px;
padding:10px 5px 15px 20px
}
#third {
height: 180px;
width: 180px;
background-color: pink;
text-align: center;
padding: 10px 5px 15px 20px;
position: relative;
bottom: 7px;
right: 8px;
}
#fourth{
height: 180px;
width: 180px;
background-color: pink;
text-align: center;
position: relative;
left: 404px;
bottom: 212px;
padding:10px 5px 15px 20px
}
#fifth{
height: 180px;
width: 180px;
background-color: deepskyblue;
text-align: center;
margin: auto;
position: relative;
bottom: 622px;
padding:10px 5px 15px 20px
}
.lianjie{
width: 180px;
height: 180px;
margin: auto;
line-height: 180px;
}
a:hover{
background-color: #3cbda6;
}
</style>
</head>
<body>
<div id="father">
<div id="first"><a class="lianjie" href="">Link one</a></div>
<div id="second"><a class="lianjie" href="">Link 2</a></div>
<div id="third"><a class="lianjie"href="">Link three</a></div>
<div id="fourth"><a class="lianjie"href="">Link four</a></div>
<div id="fifth"><a class="lianjie"href="">Link five</a></div>
</div>
</body>
</html>
This is a not very good example I wrote in the first paragraph of beginner. Forget it, it can be said to be a very poor example, because the code is really lengthy and inefficient. Here is an optimized example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height:100px;
text-decoration: none;
background: #ffa1f2;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #47a4ff;
}
.a2,.a4{
position: relative;
left: 200px;
top:-100px;
}
.a5{
position: relative;
left: 100px;
top:-300px;
}
</style>
</head>
<body>
<div id="box">
<a href="#"Class =" A1 "> link 1</a>
<a href="#"Class =" A2 "> link 2</a>
<a href="#"Class =" A3 "> link 3</a>
<a href="#"Class =" A4 "> link 4</a>
<a href="#"Class =" A5 "> link 5</a>
</div>
</body>
</html>
The obvious difference is that in the second code, remove each div tag and use the a tag class to control the relative position.
Let's analyze the code
#box
Here is the id selector
CSS ID selector
In some ways, ID selectors are similar to class selectors, but there are some important differences.
grammar
First, the ID selector is preceded by a # sign - also known as a checkerboard or pound sign.
See the following rules:
*#intro {
font-weight:bold;
}
Like class selectors, wildcard selectors can be ignored in ID selectors. The previous example can also be written as follows:
#intro {
font-weight:bold;
}
The effect of this selector will be the same.
The second difference is that the ID selector does not refer to the value of the class attribute. There is no doubt that it refers to the value in the ID attribute.
The following is an example of an actual ID selector:
<p id="intro"> This is a paragraph of introduction. </p>
padding property
CSS padding property
Definition and Usage
Padding shorthand property sets all padding properties in one declaration.
explain
This shorthand property sets the width of all the inner margins of an element, or the width of the inner margins on each edge. The inner margins set on non replacement elements in a row do not affect the row height calculation; therefore, if an element has both an inner margin and a background, it may visually extend to other rows and overlap with other contents. The background of an element extends through the inner margin . negative margin values are not allowed.
Note: negative values are not allowed.
Example 1
padding:10px 5px 15px 20px;
The upper inner margin is 10px, the right inner margin is 5px, the lower inner margin is 15px, and the left inner margin is 20px
Example 2
padding:10px 5px 15px;
The upper inner margin is 10px, the right inner margin and the left inner margin are 5px, and the lower inner margin is 15px
Example 3
padding:10px 5px;
The top and bottom margins are 10px and the right and left margins are 5px
Example 4
padding:10px;
All 4 inner margins are 10px
| Default value | Inheritance |
|---|---|
| 0 | no |
border attribute
CSS border properties
CSS border properties allow you to specify the style and color of an element's border.
Border style
The border style property specifies what border to display.
The border style property defines the style of the border
border-style value: none: Default no border dotted: Define a dotted line border dashed: Define a dashed border solid: Define solid border double: Defines two borders. The width and width of the two borders border-width The values are the same groove: Definition 3 D Groove border. The effect depends on the color value of the border ridge: Definition 3 D Ridge border. The effect depends on the color value of the border inset:Define a 3 D The effect depends on the color value of the border outset: Define a 3 D Highlight the border. The effect depends on the color value of the border
Border width
You can specify the width for the border through the border width attribute.
There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em (in px, pt, cm, em, etc.), or use one of three keywords, which are thick, medium (the default) and thin.
Note: CSS does not define the specific width of the three keywords, so one user may set thick ness, medium and thin to 5px, 3px and 2px respectively, while the other user may set them to 3px, 2px and 1px respectively.
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Border color
The border color property sets the color of the border. Colors that can be set:
Name - specifies the name of the color, such as "red"
RGB - specifies an RGB value, such as "rgb(255,0,0)"
Hex - specifies a hexadecimal value, such as "#ff0000"
You can also set the color of the border to "transparent".
Note: border color alone does not work. You must first use border style to set the border style.
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Border - set each edge individually
In CSS, you can specify different sides and different borders:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
The above example can also set a single attribute:
border-style:dotted solid;
The border style attribute can have 1-4 values:
border-style:dotted solid double dashed;
- The top border is dotted
- The right border is solid
- The bottom border is double
- The left border is dashed
border-style:dotted solid double;
- The top border is dotted
- The left and right borders are solid
- The bottom border is double
border-style:dotted solid;
- The top and bottom borders are dotted
- The right and left borders are solid
border-style:dotted;
The four sides are dotted
The above example uses border style. However, it can also be used with border width and border color.
The next a tag belongs to the element selector
CSS element selector
The most common CSS selector is the element selector. In other words, the elements of the document are the most basic selectors.
If you set the style of HTML, the selector will usually be an HTML element, such as p, h1, em, a, or even the HTML itself:
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
Next, let's talk about the movement of five link blocks
Relative positioning is used here.
1, position syntax and structure - TOP
position syntax:
position : static absolute relative
position parameter:
- static: no special positioning. The object follows HTML positioning rules
- Absolute: drag the object out of the document stream, and use the left, right, top, bottom and other attributes for absolute positioning. Its cascade is defined by the css z-index attribute. At this time, the object does not have margins, but still has padding and borders
- relative: it cannot be stacked, but it will offset the position in the normal document flow according to the attributes such as left, right, top and bottom
position description
Setting the positioning method of the object can make it easy for the layout layer to position absolutely and control the box object more accurately.
2, position practical use - TOP
Absolute positioning position is used to locate box objects. Sometimes, it is not easy to use css padding and css margin for relative positioning of several small objects in a layout. At this time, we can easily use absolute positioning. Especially for the irregular layout of several small boxes in a box, it is very convenient for us to use position absolute positioning to layout objects.
Absolute positioning and float floating cannot be used at the same time. For example, some absolute positioning and some css float floating positioning are used in a large box. In this way, IE6 browser will not display these absolute positioning and relative positioning in the enlarged object. This is also IE6 CSS HACK. Note that it is OK not to mix them.
3, Absolute positioning conditions of use - TOP
position:absolute; position:relative absolute positioning is usually defined by the parent, the child defines the position:relative absolute positioning attribute, and the child uses left or right and top or bottom for absolute positioning.
- . divcss5{position:relative} definition, it is usually better to define CSS width and CSS height
Corresponding HTML structure
<div class="divcss5">
<div class="divcss5-a"></div>
</div>
In this way, "divcss5-a" is definitely located in the parent "divcss5" box.
Note that only one definition can be selected for left and right objects, and only one definition can be selected for bottom and top objects.
4, position application case - TOP
Here, DIVCSS5 applies position absolute positioning for your examples. We set an outermost box with a CSS border of red, css width of 400px,css height of 200px, and two boxes inside. In order to absolutely locate the two boxes, the CSS of the first box is named "divcss5-a", with a width of 100px, a background color of black, a height of 100px, and a positioning distance of 10px from the parent, The distance to the left is 10px; The second box CSS class is named "divcss5-b". Its width and height are 50px respectively. The CSS background color is blue. The distance from the parent is 13px and 15px to the right of the parent.
1. css code is as follows
<style>
.divcss5{ position:relative;width:400px;height:200px;
border:1px solid #000}
/* Defining parent position:relative as is considered an absolute positioning declaration */
.divcss5-a{ position:absolute;width:100px;height:100px;
left:10px;top:10px;background:#000}
/* Use the absolute positioning position:absolute style and use left top to position */
.divcss5-b{ position:absolute;width:50px;height:50px;
right:15px;bottom:13px;background:#00F}
/* Use the absolute positioning position:absolute style and use the right bottom to locate the position */
</style>
2. html code snippet
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
5, css absolute positioning Summary - TOP
We usually use position:absolute; position:relative is used for absolute positioning layout, CSS is used to define positioning, DIV is used for HTML layout, pay attention to where position:relative is used and where position:absolute is used for positioning, and don't forget to use the cooperation of left, right, top and bottom to locate the specific position. Absolute positioning if the parent does not use position:relative but directly uses position:absolute absolute absolute positioning, the body tag will be used as the parent. No matter how many layers of DIV structure the object is defined by position:absolute, it will be dragged out for absolute positioning for the parent (reference level). Absolute positioning is very easy to use, but remember not to abuse it. It can be used everywhere. Sometimes, you won't bother to calculate the distance between the top, bottom, left and right. At the same time, CSS code may be bloated. You can use it more empirically and appropriately for the place you want to use it.
In absolute positioning, we can use css z-index to define the overlapping order of css layers.
At the same time, the values of left, right, bottom and top can be obtained by using the (Photoshop) PS slicing tool.