<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
<style>
.box1 {
width: 200px;
height: 100px;
position: relative;
border: 1px Dashed Green;
}
/ * point to beginning class selector is located opposite relative, absolute positioning is absolute,
generally relatively parent class, subclass absolute z-index indicates the stacking order of * /
.box2 {
width: 100px;
height: 50px;
position: Absolute;
border: 1px Dashed Blue;
background-Color: Red;
Z-index: -1;
Top: 20px;
left: 20px;
}
P {
position: Fixed;
Top: 20px;
left:10px
}
.box3, .box4, .box5, .box6, .box7, .box8 {
width: 100px;
height: 50px;
a float: left;
}
.box3, .box6 {
background-Color: Red;
}
.box4, .box7 {
Color-background: Gold;
}
.box5, .box8 {
background-Color: Green;
}
/ * indicates a float floating. The block floating may be moved left or right until it hit the edge of the outer frame includes a frame or the other until the floating box.
Floating elements disposed, flow from the standard (off standard).
Floating elements disposed within the line width can be set high.
Floating block elements arranged in a row can be displayed. * /
/ * P is a tag selector fixed a predetermined position, is located opposite the browser viewport itself * /
</ style>
</ head>
<body>
<div class = "box1">
<div class = " BOX2 "> </ div>
</ div>
<P> The default z-index is 0. Z-index -1 has a lower priority </ p>
<div class = "box3">
I block element. 1
</ div>
<div class = "box4">
I block element 2
</ div>
<div class = "Box5">
I block element 3
</ div>
<span class = "BOX6"> I inline elements. 4 </ span>
<span class = "box7"> I inline element 5 </ span> <-! span is the used combination of rows of elements - ->
<span class = "box8"> I was inline elements 6 </ span>
</ body>
</ HTML>
Layout & css- selector
Guess you like
Origin www.cnblogs.com/emma-zhu/p/11831083.html
Recommended
Ranking