Float and the position

The main content

1, Float principle

Float syntax

3. Clear the impact of floating

4. Position

5. Display attributes

Learning goals

Section number knowledge requirements
Section 1 (float) The principle of the float master
The grammar of the flaot master
Clear the effects of floating master
Section 2 (Floating Exercise) Gionee official website layout master
Section 3 (Position) concept To understand
relative master
absolute master
fixed master
Section 4 (Position Exercise) Drop – down list effect master
Stagger the animation effect of two images master
Position text above the picture master
The element animates from below master
Photo wall master
Section 5 (Display) The display properties master

float

Definition of float

The float property defines in which direction the element floats. Traditionally this property has been applied to images to make text surround the image, but in CSS, any element can float. The floating element generates a block-level box, regardless of what element it is.

【 example 1-1】

<div class="box">
<img src="images/img1.gif" alt="Small new"> 
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni quo laboriosam iusto repellat cupiditate accusamus reprehenderit  suscipit officiis quas dolore non sed, temp commodi, repellendus, exercitationem volupta provident?
</div>

Copy the code
img{
width: 200px;
float: left;
}

Copy the code

The effect is as follows:

Floating principle

CSS floats the element out of the flow of the document in a specified direction (moving left or right) until its outer edge touches the border that contains the box or another float box.

In terms of out-of-document flow, document flow is the space occupied by displayable objects in the document when they are arranged, and out-of-document flow is the space taken out of the page.

(1) Float the element out of the document flow (does not occupy a place in the page)

(2) Float is stopped when it hits the border of the parent element or float element

(3) Floats do not overlap

(4) Floating only left and right, no up and down floating

(5) After floating, block-level elements are displayed in the same line, and the width and height of elements in the line can be set

(6) When the element has no width and height set, the width is the content spread

See below, when box 1 floats to the right, it leaves the document flow and moves to the right until its right edge touches the right edge of the containing box:

Again, as box 1 floats left, it leaves the document flow and moves left until its left edge touches the left edge of the containing box. Because it’s no longer in the document flow, it doesn’t take up space and actually covers box 2, making box 2 disappear from the view.

If you move all three boxes to the left, box 1 floats left until it hits the include box, and the other two float left until it hits the previous float box.

As shown in the figure below, if the include box is too narrow to accommodate the three floating elements arranged horizontally, then the other floating blocks move down until there is enough space. If floating elements are of different heights, they can get “stuck” by other floating elements as they move down:

Floating syntax

Clear the effects of floating

When an element is set to float, it leaves the document flow and floats left/right until it hits either the parent element or another floating element, which causes the parent element to collapse.

【 example 1-2】

<div class="box">
	<div class="one"></div>
</div>
<style>
.box{
background-color: pink;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
</style>

Copy the code

Child element. One without float looks like this:

The height of the parent element is separated by the child element

<style>
       .box{
           background-color: pink;
       }
       .one{
           width: 200px;
           height: 200px;
           background-color: red;
           float: left;
       }
</style>

Copy the code

Float the child element as follows:

So when we set float, we clear the float depending on the situation. Here are some common methods:

Sets the height of the parent layout

Set the height of the parent label. You must determine the height of the child layout to calculate the height of the parent label to cover the child layout.

【 example 1-3】

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

Copy the code
<style>
       .box{
           background-color: pink;
           height: 200px;
       }
       .one..two..three{
           width: 200px;
           height: 200px;
           float: left;
       }
       .one{
           background-color: red;
       }
       .two{
           background-color: gold;
       }
       .three{
           background-color: green;
       }
</style>

Copy the code

Apply the clear attribute to the affected element

clear:left | right | both;

【 example 1-4】

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="footer"></div>
Copy the code

<style>
.box{
background-color: pink;
}
.one..two..three{
width: 200px;
height: 200px;
float: left;
}
.one{
background-color: red;
}
.two{
background-color: gold;
}
.three{
background-color: green;
}
.footer{
height: 300px;
background-color: blueviolet;
clear:both;
}
</style>

Copy the code

Before the float was cleared, the height of the box collapsed so that the following divs were overwritten because all three of the box’s children were floated out of the document stream.

Clear the affected div to remove the effects of the float

The effect is as follows:

Overflow clearance float

In this case, the parent layout cannot set the height. Inside the parent tag style: overflow:hidden;

【 example 1-5】

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="footer"></div>

Copy the code
<style>
.box{
background-color: pink;
overflow: hidden;
}
.one..two..three{
width: 200px;
height: 200px;
float: left;
}
.one{
background-color: red;
}
.two{
background-color: gold;
}
.three{
background-color: green;
}
.footer{
height: 300px;
background-color: blueviolet;
}
</style>

Copy the code

The effect is as follows:

An empty div method

After the last floating box, add a new label. Then set clear to clear the float. In this case, the parent layout cannot set the height.

Advantage: popular good understanding. Cons: Added too many tags.

【 example 1-6】

<div class="box">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="clear"></div>
</div>
<div class="footer"></div>
.clear{
clear: both;
}

Copy the code

Pseudo object

Add the pseudo-class After for the parent tag, set the empty content, and use clear:both; In this case, the parent layout cannot set the height.

Advantages: No extra tags need to be added, and can be called globally.

【 example 1-7】

<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="footer"></div>.box::after{ content: ""; display: block; clear: both; }Copy the code

position

define

The position attribute specifies the positioning type of the element.

This attribute defines the positioning mechanism used to establish the layout of the elements. Any element can be positioned, but absolutely or fixed-positioned elements generate a block-level box, regardless of the element’s own type. The relative positioning element is offset relative to its default position in normal document flow (normal document flow, standard document flow).

Elements can be positioned using top, bottom, left and right attributes. However, these properties will not work unless the Position property is set first. They also work in different ways, depending on the positioning method.

The values

Z-index

The z-index property sets the stack order of elements. Elements with a higher stack order will always precede elements with a lower stack order

Auto default. The stack order is the same as the parent element.

Note: Elements can have a negative z-index attribute value.

Note: z-index only works on positioning elements (e.g. Position :absolute;)

This property sets the position of a positioning element along the Z-axis, defined as the axis that extends vertically into the display area. If it is positive, it is closer to the user; if it is negative, it is farther away from the user.

【 example 2-1】

<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>

Copy the code
<style>
.box{
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: Awesome!;
}
.two{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
Left: 100px;
top: 100px;
}
</style>

Copy the code

The effect is as follows:

The position to practice

Drop – down list effect

<div class="nav">
  <ul>
    <li><a href="#">Home page</a></li>
    <li><a href="#">Mobile phone</a>
      <div class="nav-list"></div>
    </li>
    <li><a href="#">accessories</a></li>
    <li><a href="#">service</a></li>
    <li><a href="#">download</a></li>
    <li><a href="#">amigoOS</a></li>
  </ul>
</div>

Copy the code
<style>
.nav{
width: 100%;
height: 61px;
position: relative;
}
.nav li{
float: left;
padding: 20px 26px;
}
.nav a{
color: # 000;
}
.nav-list{
width: 100%;
height: 300px;
background-color: red;
position: absolute;
left: 0;
top: 100%;
display: none;
}
.nav li:hover>.nav-list{
display: block;
}
</style>

Copy the code

Hover over the phone and the div element below is displayed

Stagger the animation effect of two images

<div class="box">
  <div class="img-box">
    <img src="images/28_1514451560910.png" alt="" class="left">
    <img src="images/28_1514451554121.png" alt="" class="right">
  </div>
  <p class="name">Gionee F6</p>
  <p class="desc">5.7-inch HD full screen, four curved body</p>
  <p class="price"><span>selections</span>1399</p>
</div>

Copy the code
.box{
width: 290px;
height: 390px;
background-color: #f2f4f5;
}
.img-box{
width: 290px;
height: 240px;
position: relative;
}
.img-box>img{
width: 120px;
position: absolute;
top:0;
left: 85px;
transition: all .5s
}

.box:hover .left{
left: 55px;
}
.box:hover .right{
left: 115px;
}
.name{
color: #0f0e0e;
height: 24px;
line-height: 24px;
margin-top: 10px;
}
.desc{
color: #9e9e9e;
font-size: 14px;
height: 24px;
line-height: 24px;
margin-top: 3px;
}
.price{
color: #fe6a00;
font-size: 24px;
margin-top: 12px;
}
.price>span{
font-size: 18px;
margin-right: 2px;
}

Copy the code

The effect is as follows:

Position text above the picture

<div class="box">
 <img src="images/28_1514453044261.jpg" alt="">
 <div class="text">
   <p class="name">Wired selfie stick</p>
   <p class="desc">Mini carry, wire control</p>
   <p class="price"><span>selections</span>49</p>
 </div>
</div>

Copy the code
.box{
width: 386px;
height: 343px;
position: relative;
}
.text{
width: 100%;
height: 86px;
position: absolute;
left: 0;
bottom: 21px;
}
.name{
color: #0f0e0e;
height: 24px;
line-height: 24px;
}
.desc{
color: #9E9E9E;
font-size: 14px;
height: 24px;
line-height: 24px;
margin-top: 3px;
}
.price{
color: #f06261;
font-size: 24px;
margin-top: 2px;
}
.price>span{
font-size: 18px;
margin-right: 2px;
}

Copy the code

The element animates from below

<div class="box">
	<div class="hidden"></div>
</div>

Copy the code
.box{
width: 234px;
height: 300px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.hidden{
width: 100%;
height: 76px;
background-color: #ff6700;
position: absolute;
top: 100%;
left: 0;
transition: all .5s;
}
.box:hover>.hidden{
top: 224px;
}

Copy the code

Hover over the box and.hidden comes out from below

The effect is as follows:

Photo wall

<div class="box">
	<img src="images/img1.jpg" alt="" class="img1"/>
</div>

Copy the code
.box{
width: 960px;
height: 450px;
margin: 0 auto;
position: relative;
}
.box>img{
width: 210px;
border: 1px solid #ddd;
padding: 10px;
background-color: #fff;
position: absolute;
transition: all .5s;
}
.img1{
top: 0;
left: 375px;
transform: rotate(5deg);
}
.box>img:hover{
box-shadow: 10px 10px 10px rgba(0.0.0.1);
transform: scale(1.1);
z-index: Awesome!;
}

Copy the code

display

define

The display attribute specifies the type of box the element should generate.

This property is used to define the type of display box generated by the element when the layout is created. For document types such as HTML, using display carelessly can be dangerous because it can violate the display hierarchy already defined in HTML.

The values

value describe
none This element will not be displayed.
block This element is displayed as a block-level element, preceded by a newline character.
inline The default. This element is displayed as an inline element, with no newlines around it.
inline-block Inline block elements.
table-cell This element is displayed as a table cell (similar 和 )
Flex Elastic box model

The difference between similar functions

display:none; And the visibility: hidden; And opacity: 0; And overflow: hidden;

1) display: none; 2) Visibility :hidden; Opacity :0; opacity:0; 4) Overflow :hidden; Overflow part hidingCopy the code

Attributes not reserved for the original location

1) float:;

2) position: absolute;

3) position: fixed;

4) display: none;

homework