Front-end Learning Notes (1) — CSS /tailwind

Block elements and inline elements

Block occupies a row, you can set the size, row elements in a row, cannot set the length and width

  • A block element

    < H1 >~

    , < P >,

    ,

      , < OL >,

    • , etc
    • An exclusive line
    • Width, height, margin, padding can be controlled
    • The width defaults to 100% of the container (parent width)
    • Is a container, or box, that can hold block-level elements or inline elements
    • Block-level elements cannot be used in literal elements

  • Inline elements

    , , etc

    • Elements in adjacent rows are on a row. Multiple elements can be displayed in a row
    • Setting width and height directly is not valid
    • The default width is the width of its own content
    • Inline elements can only hold text or other inline elements
    • You can’t put links in links, you can put block-level elements, but give<a>Switching block-level mode is safest

  • Inline block elements

    , , < TD >, etc

    • And adjacent inline elements on a line, but there are gaps between them, and a line can display multiple **(inline element characteristics)**
    • The default width is the width of its own content **(inline element characteristics)**
    • Width, height, margin, and padding can all be controlled **(block-level elements)**

  • Display mode conversion

    • Convert to block-level elements ——–display: block

      <a class="block">... </a>Copy the code

    • Convert to the inline element ——–display: inline

      <div class="inline bg-green-500">... </div>Copy the code

    • Convert to the inline block element ——–display: inline-block

      <div class="inline-block bg-green-500">... </div>Copy the code

Principle: If the height of the text is equal to the height of the box, the text can be centered vertically in the current box, and the height of the text in the tailwind can be used as leading-{size}

<span class="inline-block h-24 leading-24 bg-blue-400"> This is a span converted to inline block elements </span>Copy the code

Second, background

1. Background color

Background color is directly implemented using bg-{color}-{amount}, background opacity using bg-opacity-{amount}, and gradient using bg-gradient-{direction}

2. Background image

In the actual development, it is often seen in logo or some decorative small pictures or large background pictures, which is very convenientThe control position

BackgroundImage can be inserted in two ways: ① edit tailwind. Config. js file theme. BackgroundImage to add your own backgroundImage, use the bg-{key} form directly; < span style=”background-image: url(…) The results showed that there was no significant difference between the two methods.

Tips: Page elements can be added with either a background color or a background image, with the background color at the bottom

  • Background tile

    The default is repeatable tiling and can be controlled by bG-repeat \bg-norepeat\bg-repeat-x\bg-repeat-y

  • Background image location

    • Using the azimuth

  • Style =”background-position: parameter 1 parameter 2″

    Parameter 1 is the x direction or coordinate, parameter 2 is the y direction or coordinate, can be mixed, but must be x-y order

    Style =”background-position: center 20px”==> indicates the horizontal center, 20px from the top boundary

  • Background scroll

    Bg-scroll: Scroll along with the object

    Bg-fixed: does not scroll with the object and the background is fixed

Three features of the CSS

  • Cascading sex

    In the Yangtze river the waves behind push on those in front, and those in front die on the sand

    • The same selector with the same style is creating overlay

    • Style conflict, coming from behind

    • Styles do not clash, but become one

  • inheritance

    Dragon born dragon, chicken born chicken, scholar’s children can make holes

    • Child tags inherit certain styles from parent tags, such as text color and font size
    • Inheritable elements include (text-,font-,line- at the beginning of elements, and color attributes)
    • Inheritance of line heights, which can be followed by units but not units, which represent several times the size of text elements

  • priority

    • Same selector, perform cascade

    • The selector is different and executes according to the selector weight

      The selector The weight
      Inheritance or * 0,0,0,0
      Element selector 0,0,0,1
      Class/pseudo-class selector 0,0,1,0
      The ID selector 0,1,0,0
      Inline style=”” 1,0,0,0
      ! Important important infinity

      The smaller the granularity, the larger the weight, the weight will be stacked (stacking does not have carry problems)

4. Box model

Box-border: includes border and padding. Adding border and padding does not affect box size

Box-content: Does not include borders and padding. Adding border and padding affects box size

  • Border border

  • Padding padding

    In box-content mode, if the box itself does not specify width/height, the padding will not expand the box

  • From the outside margin

    ① Set the box horizontal center method: Mx-auto **

    This setting assumes that the box must have a specified width by setting the left and right margins to Auto

    ② The inline element or block element is horizontally centered by adding to its parent elementtext-align:centerCan be

    Text-centers are set directly in tailwind, and the idea is to treat them as text content

    • Margin merging, which can occur when using margin to define the vertical margins of block elements

      Collapse of the vertical margin of a nested block element

      • For two nested parent-child block elements, if both parent elements have a top margin, the parent element will collapse with a larger margin value

        There are three solutions:

        1. Define an upper border for the parent element
        2. Define an inner margin for the parent element
        3. Add for the parent elementoverflow:hiddenTailwind adds it directly to the parent class attributeoverflow-hidden

  • Clear the inner and outer margins

    * {
	padding: 0;
	margin: 0;
}
Copy the code

Five, the floating

Traditional web layout in three ways

  • The standard flow
  • Floating:float-none/left/right
  • positioning

Typical use of float: you can display multiple block-level elements in a row, such as<div>

Essence: multiple block-level elements are arranged vertically to find standard flow, and multiple block-level elements are arranged horizontally to find floating

1. Floating features:

  • Floating elements depart from the standard flow

    Floating boxes no longer remain in their original positions

  • Floating elements are displayed inline and aligned at the top of the elements

  • Floating elements have the properties of inline block elements

    • Inline elements float without converting block levels or inline blocks to set width and height directly
    • If the block-level box has no width set, the default width is the same as the parent, but after adding a float, its size is determined by the content
    • There is no gap between the floating boxes, close together

2. Use policies

To constrain the float, the layout of a web page is usually arranged up and down with the parent box of the standard flow, and then the inner child elements are floated

3. Precautions

  • Floating boxes only affect the standard flow behind them, not the standard flow ahead of them

4. Clear floats

Cause: When all the child elements in a parent box float, the height of the parent box becomes 0, which will cause all the standard streams behind the parent box to move up, affecting the overall layout

Clearing floating is essentially clearing the impact of floating

Policy: close float, only float inside the parent box, do not affect other boxes outside the parent box

  • Extra label method

    Add an empty tag after the last floating child (must be a block-level element) and clear-both inside the class

  • The parent adds overflow-hidden, which is concise but does not show the overflow

  • After pseudo elements

    Additional tag method updated (use the following style for parent elements)

    .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } /*IE6\7 proprietary */.clearfix{*zoom: 1; }Copy the code

  • Double pseudo-element cleanup float

    .clearfix:before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } /*IE6\7 proprietary */.clearfix{*zoom: 1; }Copy the code

A few common modifiers

  • Rounded cornersrounded-{? t/r/b/l/tl/tr/br/bl}-{? none/sm/md/lg/xl/2xl/3xl}
  • shadowshadow-{? sm/lg/xl/2xl/inner/none}