current position:Home>CSS notes - Intermediate

CSS notes - Intermediate

2021-08-27 02:55:08 gzming

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;
}

copyright notice
author[gzming],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827025505175n.html

Random recommended