3, CSS basic styles

1.CSS   Float

The Float of CSS will move the elements to the left or right, and the surrounding elements will be rearranged.

Other elements after the floating element are displayed around the current floating element.

The horizontal floating of the element means that the element can only move left and right, not up and down.

A floating element moves as far left or right as possible until its outer edge touches the border containing a box or another floating box.

The element after the floating element will surround it.

Elements before floating elements will not be affected.

If the image is floating right, the following text stream will surround it to the left:

Code example 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>float float</title>
  <style>
    div{
      width: 200px;
      height: 200px;
    }
    .box1{
      color: white;
      background-color: green;
      float: left;
    }
    .box2{
      background-color: pink;
    }
    .box3 img{
      width: 40px;
      height:40px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="box1">Directly out of the document stream, but not out of the text stream</div>
  <div class="box2"></div>
  <div class="box3"><img src=".//IMGs / avatar2. PNG "ALT =" image "> I'm a little bird. I can't fly high if I want to fly. I can't find a secret to summon the moon. It's actually ADA, da da da Institute < / div >
</body>
</html>

legend 👇

  2.CSS layout - Overflow

The CSS overflow property can control the addition of scroll bars (ellipsis of single line text, etc.) in the corresponding element interval when the content overflows the element box.

Common attribute values

visible   Default value

The content is not pruned and is rendered outside the element box

overflow:visible ;

hidden

The content is trimmed and the rest is invisible.

overflow:hidden ;

scroll 

The content is trimmed, but the browser displays a scroll bar to see the rest of the content.

overflow:scroll ;

auto

If the content is trimmed, the browser displays a scroll bar to view the rest of the content.

overflow:auto ;

Code example 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>overflow</title>
  <style>
    li{
      width: 200px;
      height: 50px;
      line-height: 30px;
      list-style: none;
      border: 1px solid pink;
    }
    .visible{
      overflow: visible;
    }
    .hidden{
      overflow: hidden;
    }
    .scroll{
      overflow: scroll;
    }
    .auto{
      overflow: auto;
    }
    h4{
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <ul>
    <h4>visible</h4>
    <li class="visible"> visible Default. The content is not trimmed and is rendered outside the element box.</li>
    <h4>hidden</h4>
    <li class="hidden">hidden  The content is trimmed and the rest is invisible.</li>
    <h4>scroll</h4>
    <li class="scroll">scroll  The content is trimmed, but the browser displays a scroll bar to see the rest of the content.</li>
    <h4>auto</h4>
    <li class="auto">auto    If the content is trimmed, the browser displays a scroll bar to view the rest of the content.</li>
  </ul>
</body>
</html>

legend 👇

3.CSS   Position  

The position attribute specifies the location type of the element.

The top of the element that can be used   Top, bottom, left and right attribute positioning

Attribute value:

name

characteristic

static default [negligible]

A document flow object that conforms to normal.

fixed

It has nothing to do with the document flow. It is fixed in the browser window, does not occupy space, and will overlap.

Will be affected   top,   bottom,   left,   right effect.

relative

Normal document flow objects overlap with respect to their previous positions.

In general, relative positioning elements are often used as container blocks of absolute positioning elements (child absolute parent phase).

[will be affected   top,   bottom,   left,   right.]

absolute

Recent located[   position:   static; except] parent element.

It has nothing to do with document flow, does not occupy space, and overlaps.

If an element has no positioned parent element, its position is relative to the current browser window.

[will be affected   top,   bottom,   left,   right.]

sticky

stay   position:relative   And   position:fixed   Switch between positioning.

[will be affected   top,   bottom,   left,   One of the effects of rig.]

4.CSS   Position  

Property specifies the stacking order of an element.

The value is a number. The larger the number, the higher the value will be displayed at the top, and the smaller the number, the lower it will be displayed at the bottom.

Note: it depends on the position attribute. Without the position attribute, the z-index attribute has no effect.

Tags: html5 html css

Posted on Sat, 18 Sep 2021 16:19:48 -0400 by varsha