1. Display mode

• Block level Elements always start with new lines , And stretch as far left and right as possible .
• inline The element does not start on a new line , Occupy only the required width .

Set the element's display Property can change how elements are displayed , But it doesn't change the kind of element . The values are as follows ：

• inline： Show as inline elements .
• block： Display as block level elements .
• none： Hidden elements , And it doesn't take up space .
• hidden： Hidden elements , But it still takes up space .
• inline-block: Be similar to inline, However, it is allowed to set the width and height on the element .

span {
  display: block;
}

2. location

position Property is used to specify how the element is positioned . But the specific location has to be combined top, bottom, left, right Attribute specifies .

The positioning methods are as follows ：

(1) static

The default location method . It is always based on the... Of the page Normal flow Positioning , Not subject to top, bottom, left, right Effect of attributes .

(2) relative

Set the element's top, bottom, left, right Property will cause it to Relative normal position Adjustment , And the rest will not be adjusted to accommodate any space left by the element .

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

(3) fixed

Elements are relative to viewport location , Even if you scroll the page , It's always in the same place .

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

(4) absolute

Element relative to the most recent Locate the ancestor element （ In addition to using static Elements other than ） Positioning . If there is no ancestor , Is relative to the body Positioning , And move with the page scrolling .

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

(5) sticky

At first it's going to be relatively positioned , Until the given offset position is encountered in the viewport , And fix it .

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

Elements overlap

When positioning elements , They can overlap with other elements . z-index Property is used to specify the stack order of elements （ Ahead , Low in the back ）.

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

3. overflow

overflow Used to specify the action to be taken when the content of an element is too large to fit into the specified area ：

• visible： Overflow content is not clipped , Instead, render outside the element box .
• hidden： Overflow content is cropped out , No longer visible .
• scroll： Overflow content is clipped , Also add a scroll bar to see the rest .
• auto： Be similar to scroll, But add a scroll bar only if necessary .

div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: auto;
}

Besides ,overflow-x and overflow-y Property to specify how to handle the left side of the content / Right edge and upper and lower edges ：

div {
  overflow-x: hidden; /*  Hide the horizontal scroll bar  */
  overflow-y: scroll; /*  Add vertical scroll bar  */
}

4. float

float

HTML Standard document flow for a page （ Default layout ） yes ： From top to bottom , From left to right , Line break in case of block level elements .

For the elements float After property assignment , It breaks away from the standard document flow , Float above the standard document stream , Then float left and right relative to the parent element , And a row can contain multiple block level elements . The floating element is in the empty position of the document stream , Filled with subsequent non floating elements .

Floating elements will “ floating ” To the top of the normal element .

float Property value ：

• left： The element floats to the left of its container .
• right： The element floats to the right of its container .
• none： Don't float , Wherever you should be .
• inherit： Inherit the floating mode of the parent element .

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

If an element is higher than the element containing it , And it's floating , So it will “ overflow ” Outside its container . You can add... To the parent element overflow: auto; To solve this problem ：

.clearfix {
  overflow: auto;
}

Remove the floating

clear Property value ：

• left： Floating elements are not allowed on the left side .
• right： Floating elements are not allowed on the right .
• both： Floating elements are not allowed on the left or right .
• none： Allow floating elements on both sides .
• inherit： Inherit the value of the parent element .

When clearing the float , Clear and float should be matched ： If an element floats to the left , The left side should be removed ; Floating elements will continue to float , But the cleared element will be displayed below it .

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}

5. pseudo-classes

Used to define the special state of an element . The grammar is Selectors : pseudo-classes .

div:hover {
  background-color: blue;
}

Mouse movement div Above , Will change the background color to blue .

6. Pseudo elements

Used to set the style of the specified part of the element . The grammar is Selectors :: Pseudo elements .

Such as , Set up p The first character of the text in the element ：

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

7. The opacity

opacity The value range of property is 0.0-1.0. The lower the value , More transparent .

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}