CSS Basic Collation

preface

This article tells about:
1. Introduction of the CSS
2. Common units of the CSS
3. The CSS syntax
4. The CSS styles
5. The selector
6. Three features of the CSS
7. The box model
8. floating
9. positioning
10. Flex Flex layout
11. Baseline alignment
12. The fonts icon
13. BFC block-level format context
14. Other problems
If you have any questions, please leave a message to me. I will reply when I see it. If I can’t solve it, we can also discuss and learn together. If you think there is any mistake, please kindly comment and correct me. Thank you very much. I hope to learn and make progress together with you in the future.
The next article will be updated as soon as possible, and the already written article will be modified intermittently in the future as understanding deepens or illustrations are added.
If you find this article helpful, please give it a thumbs-up. Thank you!
Welcome to reprint, please indicate the source.

What is CSS?

Cascading Style Sheets【 Cascading Style Sheets 】
Is a computer language used to represent file styles such as HTML (an application of standard Common Markup Language) or XML (a subset of Standard Common Markup Language). Mainly used to design the style of the web page, beautify the web page, static or dynamic modification of the page element style

Introduction of the CSS

[Inline style]

Has the highest priority and can override other introduced styles that agree with the element
Exists as an attribute of the tag
Large amount of code, low degree of separation, difficult maintenance, high redundancy

“Embedded”

Write in the style tag of head in this HTML
The read speed is faster than the two imports, synchronous

[External chain import]

Create a separate CSS stylesheet externally and import it with the link tag
The external chain style file is loaded asynchronously and is rendered after the synchronization task is completed

【 Import 】

Use within the style tag@import File pathTo introduce
Also available in an external style sheetThe CSS fileStylesheets are introduced in PHP, but they need to be placed at the top of the entire code, otherwise they will be overwritten by later iterations

Common units of the CSS

Absolute unit of length

pxpixel

Unit of relative length

em
- Used in font-size is the font size relative to the parent element, used in other attributes is the font size relative to itself
remFont size of the root element [HTML]
- Mainly used for mobile terminal adaptation
vw1% of window width
vh1% of window height

viewport

role

In the page structure, there is a viewport in the metadata part, which is to enable the page to shrink as the device shrinks when browsing the page on the mobile terminal.

    <! Make page width = device screen width -->
    <! -- Initial scaling value 1.0 -->
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

attribute

width=device-widthPage width equals device width
user-scalable=noBan zoom
Initial - scale = 1.0The initial scale value is 1.0
Maximum - scale = 1.0The maximum zoom value is 1.0
Minimum - scale = 1.0The minimum zoom value is 1.0

The CSS syntax

Division of elements

Block-level elements
- Writing width and height can work
- An exclusive line
  - 【 This characteristic decides 】 arrangement way: up and down arrangement
Inline elements
- Write width does not work, its size is determined by its internal content spread and determined.
- A total of a line
  - [This characteristic determines] arrangement: left and right arrangement
- [Special inline elements]Inline block elements
  - Writing width and height can work
  - A total of a line
  - Arrangement: left and right
- 【 Judgment 】
  - If the test element does not share a row with the inline element, it must be a block-level element
  - If it is in a row, change the width and height of the test element to determine whether it is [unchanged: inline element] or [changed: inline block element].
Summary of element tags
- Inline elements:
  - Span, A, B, strong, I, EM, S, del, U, INS
- Block-level elements:
  - Div, H1-H6, P, ul, LI, OL, DL, DT, DD
- Inline blocks:
  - Img, video, audio

Element property conversion display

Convert to block-level elements
- display:block
- 【 characteristics 】
  1. The parent element is filled without setting the width
  2. The height is not set, depending on how much content can be stretched
Convert to inline elements
- display:inline
Convert to inline block elements
- display:inline-block
Hide the element
1. display:none
  - 【 Disappear completely, take no place 】
2. visibility:hidden [Visibility]
  - The element is still there, occupying the position, but not visible.
3. opacity:% transparency
  - The element is still there, occupying the position, but not visible.
4. z-index [Positioned elements can be controlled by this hierarchy]
  - Margin [Control no content container leaving viewport (no content applies)]
  - Width and height [reduced to 0 (no content applies)]

CSS styles

Clear default styles

Clear margin and padding of global elements

    <style>* {margin:0;
            padding:0;
        }
    </style>
Copy the code

Clear the default style of the list

    <style>
        ul.li{
            list-style:none;
        }
    </style>
Copy the code

Clear the default style for the A tag

    <style>
        a{
            <! -- Delete underline -->
            text-decoration:none;
            <! -- Change font size -->
            font-size:100px;
            <! Clear default font color -->
            color:#333;
        }
    </style>
Copy the code

The commonly used styles

Wide high

        <style>* {height:100px;
                width:100px;
            }
        </style>
Copy the code

The background color

        <style>* {background-color:#fff;
                /* Composite style */
                background:#fff;
                /* Background image */
                background:url("Path");
            }
        </style>
Copy the code

The text

The font-family font
- Multiple fonts can be set, separated by commas, used if there is no font library, use the default if there is none
- If the font name consists of more than one word, enclose it in quotes
```
    <style>* {font-family:Microsoft Yahei;
        }
    </style>
Copy the code
```
The font size – the size
- You can set most of the word numbers in general first, and then set different font sizes individually
```
   <style>* {font-size:16px;
       }
   </style>
Copy the code
```

Color color

Set font color

        <style>* {color:black;
            }
        </style>
Copy the code

Thickness of the font – weight

400->normal
700->bold

900->bolder

    <style>* {/ * * /
            font-weight:400;
            font-weight:normal;
            / * * /
            font-weight:700;
            font-weight:bold;
            More coarse * / / *
            font-weight:900;
            font-weight:bolder;
        }
    </style>
Copy the code

Incline & normal font-style

Tilt italic

Normal,

    <style>* {font-style:italic;
            font-style:normal;
            }
    </style>
Copy the code

Block-level elements are quickly horizontally centered

margin:0 auto;

    <style>
            div{
            margin:0 auto;
            }
    </style>
Copy the code

The high line – height

Three parts: upper space, element, lower space

The spacing is equal, and the elements are in the middle

    <style>
            div{
            line-height:100px;
            }
    </style>
Copy the code

Height the height
- The height is the height of the container
- Coordinate with row height to center elements vertically
  - letLine heightIs equal to theThe containerThe height of the
```
    <style>
            div{
            height:100px;
            }
    </style>
Copy the code
```

Text alignment text-align

Left, center, right

Whatever element it is, it’s the literal element in it, right

    <style>
            p{
            text-align:center;
            }
Copy the code

The first line indentation

Indent the first line of text in a text block.

        <style>
            p{
                <! -- Indent first line, em unit automatically ADAPTS -->
                text-indent:2em;
            }
        </style>
        <body>
            <p>This is a text</p>
Copy the code

Use case

        <style>
            body{<! -- Multiple fonts can be set, separated by commas, if there is no font library, use default -->font-family:"Times New Roman",Times,serif;
                font-family:"宋体"."Regular script".Microsoft Yahei;

                font-size:10px; Normal / / / /font-weight:400px;
                font-weight:normal;
                //加粗
                //font-weight:700px;
                font-weight:bold; More coarse / / / /font-weight:900px;
                font-weight:bolder; // Tilt & return to normalfont-style:italic;font-style:normal;
                color:#eee;
            }
            div{<! -- Fast horizontal center -->margin:0 auto;

            }
            #jvzhong{
                height:300px;
                line-height:300px;

            }
            p{
                line-height:10px;
                text-align:center;
                // text-align:left;
                // text-align:right;
            }
        </style>
        <body>

            <p>This is a text</p>
            <div>The block element is horizontally centered</div>
            <div id="jvzhong">
                <p>Vertical center</p>
            </div>

            
        </body>
Copy the code

Border border

Border: width style color;
- It can also be controlled separately
  - border-width[Separate control width]
  - border-left-width[Separately control the width of each edge]
  - border-style[Separate control style]
    - Solid solid line
    - Dashed line
  - border-color[Separate color control]

        <style>
            div{    
                border:2px solid black;
                border-width:10px;
                border-left-width:10px;
                border-style:dotted;
                border-color:pink;
            }
        </style>
Copy the code

overflow

define
- What happens when content overflows the element box

`overflow:hidden`

Content beyond hidden

    <style>
            .text{
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
    </style>
    <body>
        <div class="text">
            <div style="width:100px;">
                <p>I'm a text segment I'm a text segment I'm a text segment</p>
            </div>
        </div>
    <body>
Copy the code

overflow:auto
- Set the content to exceed the scroll bar automatically, if not, the scroll bar will not appear

`overflow:scroll`

overflow:scrollControls horizontal and vertical scroll bars

    <style>
            .text{
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
    </style>
    <body>
        <div class="text">
            <div style="width:100px;">
                <p>I'm a text segment I'm a text segment I'm a text segment</p>
            </div>
        </div>
    <body>
Copy the code

overflow-y:scrollControls the vertical scroll bar

    <style>
        .text{
            width: 200px;    
            height: 200px;    
            /* Vertical scroll bar */
            overflow-y: scroll;           
            }
    </style>    
    <body>    
        <div class="text">   
            <div style="width:100px;">   
                <p>I'm a text segment I'm a text segment I'm a text segment</p>   
            </div>    
        </div>
    <body>    
Copy the code

overflow-x:scrollControls the horizontal scroll bar

    <style>
            .text{
            width: 200px;
            height: 200px;
            /* Horizontal scroll bar */
            overflow-x: scroll;
        }
    </style>
    <body>
        <div class="text">
            <div style="width:100px;">
                <p>I'm a text segment I'm a text segment I'm a text segment</p>
            </div>
        </div>
    <body>
Copy the code

background

Background-color Indicates the background color

usage
- Background - color: color;

Style value

Color name

    <style>
        div{
            background-color:pink;
        }
    </style>
Copy the code

Color hexadecimal value

        <style>
            div{

                /* background-color:#9e9e9e; * /
                /* Can be shortened to three */ if all six values are the same
                /* background-color:#333333; * /
                background-color:# 333;
            }
        </style>
Copy the code

Rgba values

        <style>
            div{
                /* The first three are color values, and the last represents transparency */
                background-color:rgb(128.148.128.0.8);
            }
        </style>
Copy the code

Background-image Indicates the background image

usageBackground - image: url (" path ");

    <style>
        .main{
            background-image:url("Path");
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

Background-size Specifies the size of the background image

usage
- Background - size: high wide;

Style value

`Background-size: the first value px and the second value px`Pixel values

    <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("Path");
            background-size:50px 50px;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

`Background-size: first value % second value %`Percentage of parent elements

    <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("Path");
            background-size:50% 50%;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

`background-size:contain`

In the process of scaling, the background image will not continue to scale as long as either side touches the width or height of the parent element

    <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("Path");
            /* background-size:contain; * /
            /* The background image is no longer zoomed */ as long as either side touches the width or height of the parent element
            background-size:contain;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

`background-size:cover`

When the background image is scaled, it must fill both the width and height of the parent element, but if the scale of the image is not the same as the scale of the box, some images will not appear completely

    <style>
        .main{
            width:100px;
            height:100px;
            background-image:url("Path");
            /* background-size:cover; * /
            /* The background image must be filled with both the width and height of the parent element when zooming, but if the image scale is not the same as the box scale, some images will not appear completely */
            background-size:cover;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

Background-position: Position of the background image
- usage
  - Background-position: horizontal direction vertical direction;
- Horizontal [first value]
  - left On the left side of the
  - center In the middle
  - right On the right side
  - Background-position: the first value px and the second value pxPixel values
  - Background-position: first value % second value %Percentage of parent elements
- Vertical [second value]
  - topAt the top of the
  - centerIn the middle
  - bottomAt the bottom of the
  - Background-position: the first value px and the second value pxpixel
  - Background-position: first value % second value %Percentage of parent elements
```
    <style>
        .main{
            background-image:url("Path");
            /* Pixel value */
            /* background-position:100px 100px; * /
            /* Semantic */
            /* background-position:center center; * /
            /* Percentage */
            background-position:50% 50%;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code
```

`background-repeat`Control picture tiling

no-repeat: no tile
repeat-x: Tile along the horizontal direction

repeat-y: Tiled along the vertical direction

    <style>
        .main{
            background-image:url("Path");
            background-repeat:no-repeat;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

`background-attachment`Controls whether the background follows the scroll bar

Sets whether the background imagefixedorScroll along with the rest of the page
fixed: The background image is always fixed and does not scroll with the scroll bar

scorll: The background image scrolls along with the scroll bar

    <style>
        .main{
            background-image:url("Path");
            /* Pixel value */
            /* background-position:100px 100px; * /
            /* Semantic */
            /* background-position:center center; * /
            /* Percentage */
            background-position:50% 50%;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>
Copy the code

`background`The composite properties

usageBackground position/image size [position followed by slash, no space] whether tiled;

    <! -- background: background position/image size [slash followed by position, no space] whether tiled; -->
    <style>
        .main{
            /* The top of the middle of the pink background is aligned with the parent element with 50% size not tiled */
            background:pink url("Path") center top/50% 50% no-repeat;
        }
    </style>
    <body>
        <div class="main"></div>
    </body>

Copy the code

The selector

The weight

Same weight, see the order of execution
The weight depends on the weight
Composite selector weights are added in terms of multiple base weights
- div>spanThe weight2
- .class>spanThe weight11
- div>span.div>spanIf you want to choose two siblings, this is how two independent wholes are used.

Wildcard selector `*`【 All Elements 】

The weight of0
The widest range and least used, usually used to clear global default styles

    <style>* {margin:0;
            padding:0;
        }
    </style>
Copy the code

Label selector [specified label]

The weight of1
The range ofA class of selected labels

    <style>
        <! Select all ul tags in the page -->
        ul{
            list-style:none;
        }
    </style>
Copy the code

Class selectors`.`[Specified class]

The weight of10
The range ofSelect all tags with the same class
The same tag can have more than one class name separated by a space

    <style>
        .class{
            margin:0;
            padding:0;
        }
    </style>
    <body>
        <div class='class class1 class2'></div>
    </body>
Copy the code

Property selector`[]`The specified element containing an attribute

The weight of10
The range of
1. Select all elements that contain this attribute
2. Select all elements that contain this attribute name & attribute value
3. Select all the elements that contain this attribute name & the element whose value starts with a letter
4. Select all elements that contain this attribute name & the element whose value ends with a certain letter
- When more than one class name is matched, it starts with a letterThe beginning of the first class nameA match that ends with a certain letterThe end of the last class name
1. Select all elements that contain this attribute name & attribute value containing a letter
- This method does not select an element with more than one class name

    <style>
        /* Select all elements with this attribute */
        [index]{
            color:red;

        }
        /* Select all elements with this attribute name and value */
        [index=index1]{
            color:blue;
        }
        /* Select all elements that contain the attribute name and attribute value starting with a letter */
        [class^=a]{
            color:green;
        }
        /* Select all elements that contain the attribute name and attribute value ending with a certain letter */
        [class$=a]{
            color:orange;
        }
        /* Select all elements that contain this attribute */
        [class*=pin]{
            color:pink;
        }
        /* Select all elements that contain this [attribute name & attribute value containing a certain letter] */
        [class*=a]{
            color:black;
        }
    </style>
    <body>
        <div index='index1'>index1</div>
        <div class='apple'>apple</div>
        <div class='banana'>banana</div>
        <div class='pineapple'>pineapple</div>
        <! -- Use attribute selector for multiple class names -->
        <! - left left -- -- >
        <! This item will be selected if the first class name starts with o -->
        <! -- this is selected if the last class name ends with c -->
        <div class='orange a b c'>orange</div>

    </body>
Copy the code

The id selector`#`[Specified ID]

The weight of100
The range ofSelect labels with the same ID
Ids are unique, and duplicate names are not allowed on the same HTML page

    <style>
        #id{
            color:porple;
        }
    </style>
    <body>
        <div id='id'>id</div>
    </body>
Copy the code

Child selectors`>`[Specified child element]

The weight ofNo weight, depending on the base selector collocation
The range ofSelect all the elements that match the parent-child relationship we want
>All base selectors on both sides are optional
- div>spanThe weight2
- .class>spanThe weight11
- div>span.div>spanIf you want to choose two siblings, you use two separate wholes like this

    <style>
        #id>span{
            color:porple;
        }
    </style>
    <body>
        <div id='id' class='class'; >
                <span>span</span>
                <p>p</p>
        </div>
    </body>
Copy the code

Descendant selector`The blank space`[All descendant elements specified]

The weight ofNo weight, depending on the base selector collocation
The range ofSelect all descendants of the parent element that match our needs.
The blank spaceAll base selectors on both sides are optional

    <style>
        #id span{
            color:porple;
        }
    </style>
    <body>
        <div id='id' class='class'; >
                <span>span1</span>
                <p>p
                <span>span2</span>
                </p>
        </div>
    </body>
Copy the code

Packet selector`.`

The weight ofEach base element has its own weight.Use commas to calculate the sum of the weights of an element
- .div1,.div2The weight of10[According to the separate weight of.div]
- .main>.box1,.main>box2The weight of20Use.main>.box1 for separate weights.
The range ofSelect multiple elements that we need
Can beCommon styleExtract, reduce code redundancy, streamline code
The sample

    <style>
    div.span{... }.main>.box1..main>box2{

    }
    </style>

Copy the code

Intersection selector`Unsigned link`

The weight ofNo weight, sum of selector combinations
The range ofSelect the element that has more than one name at a time
Selectors are closely linked to selectors, as indiv#id span.span .p.content

    <style>
        div#id{
            color:porple;
        }
        span.span{
            color:porple;
        }
        .p.content{
            color:porple;
        }

    </style>
    <body>
        <div id='id' class='class'>
                <span class='span'>span</span>
                <p class='p content'> p</p>
        </div>
    </body>
Copy the code

Adjacent sibling selectors`+`

The weight ofNo weight, sum of selector combinations
The range ofSelect all [a label (target label)] adjacent to [a label (coordinate label)] in the page and do not look up

    <style>
        h4+p{
            background-color:porple;
        }
    </style>
    <body>
        <div id='id' class='class'>
                <p> p0</p><! -- Will not be changed -->
                <h4 >h4</h4>
                <p > p1</p><! - the change -- -- >
                <p > p2</p>
                <p > p3</p>
                <h4 >h4</h4>
                <p > p1</p><! - the change -- -- >
                <p > p2</p>
                <p > p3</p>
                <h4 >h4</h4>
                <p > p1</p><! - the change -- -- >
                <p > p2</p>
                <p > p3</p>

        </div>
    </body>
Copy the code

Universal sibling selector`~`

The weight ofNo weight, sum of selector combinations
The range ofSelect all sibling tags (target tags) that are a tag (coordinate tags) in the page, regardless of whether they are adjacent or not, and do not look up

    <style>
        h4~p{
            background-color:porple;
        }
    </style>
    <body>
        <div id='id' class='class'>
                <p> p0</p><! -- Will not be changed -->
                <h4 >h4</h4>
                <p > p1</p><! - the change -- -- >
                <p > p2</p><! - the change -- -- >
                <p > p3</p><! - the change -- -- >
                <h4 >h4</h4>
                <p > p1</p><! - the change -- -- >
                <p > p2</p><! - the change -- -- >
                <p > p3</p><! - the change -- -- >
                <h4 >h4</h4>
                <p > p1</p><! - the change -- -- >
                <p > p2</p><! - the change -- -- >
                <p > p3</p><! - the change -- -- >

        </div>
    </body>
Copy the code

Pseudo class selector`:`

Pseudo-elements are used to set the style of the specified part of the element
a:link a:visited a:hover a:activeCommon pseudo-class selectors
- The principle of love and hate lv(Love) ha(hate)a:link a:visited a:hover a:active
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofThe element that we specify

    <style>
        /* Default state */
        a:link{
            color:red;
        }
        /* Post-access status */
        a:visited{
            color:pink;
        }
        /* * * * * * * * * * * * * * * * * * * *
        a:hover{
            color:orange;
        }
        /* Click on this link status */
        a:active{
            color:black;
        }
    </style>
    <body>
        <div id='id' class='class'>
            <a href="https://www.baidu.com">baidu</a>

        </div>
    </body>
Copy the code

:not() excludes the selector
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofSelect all elements on the page except those to be excluded

    <style>
        div :not(p) {background-color:porple;
        }
    </style>
    <body>
            
        <div id='id' class='class'><! Will be selected -->
            <p > p1</p><! -- Will not be selected
            <h4 >h4</h4><! Will be selected -->
                <div><! Will be selected -->
                    <p>p2</p><! -- Will not be selected
                </div>
        </div>
    </body>
Copy the code

:only-child selector
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofSelect all elements with one child in the page

    <style>
        div:only-child{
            background-color:porple;
        }
    </style>
    <body>
        <! -- Will not be selected
        <div id='id' class='class'>
            <p> p1</p>
            <h4 >h4</h4>
                <! Will be selected -->
                <div>
                    <p>p2</p>
                </div>

        </div>
    </body>
Copy the code

:nth-child() ‘specific row’ selector
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofSelect the element in the [element row we specify] page.
  - digital
  - oddAll odd rows or2n+1
  - evenAll even lines or2n
  - ? nSelect a particular row with some equations, multiples, etc
  - Merge usage
    - Other selectors :nth-child(first)The element in the parent that matches both the first selector and the number of rows, if not, is not selected.

    <style>
        .id :nth-child(3n+1) {background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><! -- Will not be selected
                <p > p1</p><! -- Will not be selected
                <h4  h4 >h4</h4><! -- Will not be selected
                <div><! -- Will not be selected
                    <p>p2</p><! -- Will not be selected
                </div>
                <p>p2</p><! Will be selected -->

        </div>
    </body>
Copy the code

:first-child() ‘Quickly select the first child’ selector
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofSelect the first child of the element we specified on the page.

    <style>
        .id :first-child(){
            background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><! -- Will not be selected
            <p > p1</p><! Will be selected -->
            <h4 >h4</h4><! -- Will not be selected
                <div><! -- Will not be selected
                    <p>p2</p><! -- Will not be selected
                </div>

        </div>
    </body>
Copy the code

:last-child() ‘Quickly select the last child’ selector
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofSelect the last child of the element we specified on the page.

    <style>
        .id :last-child() {background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><! -- Will not be selected
            <p > p1</p><! -- Will not be selected
            <h4 >h4</h4><! -- Will not be selected
                <div><! Will be selected -->
                    <p>p2</p><! -- Will not be selected
                </div>

        </div>
    </body>
Copy the code

:nth-last-child() ‘backward’ selector
- The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
- The range ofSelect the last child of the element we specified on the page.

    <style>
        .id :nth-last-child(3) {background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><! -- Will not be selected
            <p > p1</p><! -- Will not be selected
            <h4 >h4</h4><! -- Will not be selected
                <div><! Will be selected -->
                    <p>p2</p><! -- Will not be selected
                </div>

        </div>
    </body>
Copy the code

:nth-of-type() ‘specific type’ selector
The weight ofThe pseudo-class itself is 10, and the weight of the combination is added
The range ofSelect the number of elements of the specified type in a parent element of the page
- Merge usage
  - Other selectors: nTH-last-of-typeThe reverse order of the parent element that matches the type of that element. 【典型范例】
  - Other selectors :first-of-typeThe first element in the parent element that matches the type.
  - Other selectors :last-of-typeThe last element in the parent element that matches the type.

    <style>
        .id :nth-child(3n+1) {background-color:porple;
        }
    </style>
    <body>
        
        <div id='id' class='class'><! -- Will not be selected
                <p > p1</p><! -- Will not be selected
                <h4  h4 >h4</h4><! -- Will not be selected
                <div><! -- Will not be selected
                    <p>p2</p><! -- Will not be selected
                </div>
                <p>p2</p><! Will be selected -->

        </div>
    </body>
Copy the code

Three features of the CSS

inheritance

Some elements have no attributes set, but can inherit attributes from their ancestors

Cascading sex

The ability of CSS to handle conflicts between different attribute values for the same element and the same attribute is called overlap
[Treatment]
1. So let’s look at the weights
  - Weight is different, see whose power is important to listen to who
  - If the weight is the same, it is determined in accordance with the code execution order

Priority [weight]

The weight grade
- ! Important > Inline Style > ID > Class > Tags > Wildcard > Inheritance > Browser Default
- Pay attention toUse less as far as possible! important 和 Inline style[Because the priority is too high, it is not easy to change when modifying]

`! important`Enforce the use of this style

    <style>
        div{
            / *! Important has the highest priority, so overrides inline styles */
            background-color:pink ! important;
        }
    </style>
    <body>
        <div style="background-color:black;">
        </div>
    </body>
Copy the code

Inline style

    <body>
            <! Inline style has higher priority than inline style, so it overrides the inline lower equal-weight selector -->
        <div style="background-color:black;">
        </div>
    </body>
Copy the code

The box model

Components of a box model

content: Main content area
padding: Element boxes are directly filled with content
border: Border of the element box
margin: Distance between elements

Calculate the total size of the box

Total box width=The content of the width+ 2 *padding+ 2 *border
Total box height=The content of the height+ 2 *padding+ 2 *border

Standard box model

Standard box model:The box - sizing: content - box;
In the standard box model, width and height refer tocontentThe width and height of

IE box model

IE box model:The box - sizing: border - box;
In the IE box model, width and height refer tocontent+padding+borderTotal box width and height

Commonly used attributes

widthThe width of the
- max-widthMaximum width
- min-widthMinimum width

    <style>
        p{
            /* Minimum width */
            min-width:120px;
            /* Maximum width */
            /* max-width:1200px; * /

        }
    </style>
    <body>
        <p>I'm content I'm content I'm content I'm content I'm content I'm content</p>
    </body>
Copy the code

heighthighly
- max-heightMaximum height
- min-heightThe minimum height

    <style>
        p{
            /* Minimum height */
            min-height:120px;
            /* Maximum height */
            /* max-height:1200px; * /

        }
    </style>
    <body>
        <p>I'm content I'm content I'm content I'm content I'm content I'm content</p>
    </body>
Copy the code

`border`A border

In addition to using compound styles, styles in individual directions can be set separately, or they can be controlled by a single value, two values, three values, or four values, just like the padding.

border-styleBorder style

Border - direction - styleSet the border style separately

    <style>
        .main{
            /* Border style */
            /* Can be set separately, or a single value, two values, three values, or four values to control */
            border-style: groove;
            border-top-style: dashed;
            }
    </style>
Copy the code

border-colorBorder color

Border - direction - colorSet the border color separately

    <style>
        .main{
            /* Border color */
            /* Can be set separately, or a single value, two values, three values, or four values to control */
            border-color: teal;
            border-right-color:tomato ;
            }
    </style>
Copy the code

border-widthBorder thickness

Border - direction - widthSet the border thickness separately

    <style>
        .main{
            /* Border width */
            /* Can be set separately, or a single value, two values, three values, or four values to control */
            border-width: 10px;
            border-top-width: 20px;
            }
    </style>
Copy the code

borderBorder composite style

borderSets the border properties composite

    <style>
        .main{
            /* Border composite style */
            border: 30px dashed forestgreen;
            }
    </style>
Copy the code

`The padding and margin`Inside margin, outside margin

Regular order

The four valuesRespectively are:Up, right, down, left
Three valuesRespectively are:Up, left and right, down
Two valuesRespectively are:Up and down, left and right
A valueFor:Up, down, left and right

    <style>
        span{
            background:green;
        /* Four values */
            /* Up, right, down, left clockwise */
            /* padding:10px 50px 100px 200px; * /
            /* margin:10px 50px 100px 200px; * /

        /* Three values */
            /* up, left, right, down */
            /* padding:10px 50px 100px; * /
            /* margin:10px 50px 100px; * /

        /* Two values */
            /* up and down, left and right */
            /* padding:10px 50px; * /
            /* margin:10px 50px; * /

        /* a value of */
            /* Four directions */
            padding:50px;

            display:inline-block;
            border:5px solid gold;
        }
    </style>
Copy the code

floating

Available for all elements

`float`volatility

float:left;Left floating

    <style>
        .contain {
            background-color: pink;
            overflow: hidden;/* Avoid height collapse */
        }
        .contain>.last{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;/* Left float */
            float: right;/* Float right */
            float: none;/* Does not float */      
        }
    </style>
        <body>
            <div class="contain">
                <div class="box1">aaaa</div>
            </div>
        </body>
Copy the code

float:right;Right float
float:none;Does not float. Elements do not float and are displayed where they appear in the text.

The characteristics of

Out of the flow of the document, “no place”, floating elements will continue to move toward the top of the parent element until it hits the border of the parent element or another floating element.
Usually with a parent element, the float position is relative to the parent element
In normal document flow, block-level elements are not set to width and height and default to full parent elements. But once the float is set out of the document flow, it loses the inherited width and height and is determined by its own content
The width and height of inline elements cannot be set, which is determined by their own content. But once you set the float, you can set the width and height, and it works.
Use float, you can achieve text around, except text and text mix, float is not recommended
Float all float, multiple elements, if you want to display them on a line, set them all to float

Problems that might be caused

Parent element height collapse caused by element float:

why
- By default, the height of the parent element in the document flow is supported by the quilt element. When the child element leaves the document flow, it will not be able to support the height of the parent element, which will cause the height of the parent element to collapse. Once the height of the parent element collapses, the position of all elements in the standard flow will move up, resulting in a chaotic layout of the entire page

The solution

Sets the height of the floating element’s parent
- disadvantages: The height is fixed

Add to the parent element of the float element`overflow:hidden`style

This style isOverflow hidden
disadvantages: Out-of-range content is hidden

    <style>
        .contain {
            background-color: pink;
            overflow: hidden;
        }

        .contain>.last..contain>.box1{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
    <body>
        <div class="contain">
            <div class="box1">aaaa</div>
            <div class="last">bbbbb</div>
        </div>
    </body>
Copy the code

Add block-level elements and set the Clear style
- In the parent element of the floating element, append the floating element to the parent elementBlock-level elements, and then set one for the block-level elementclearStyle, which does this:Eliminates floating effects for "left floating element", "right floating element", or "both floating elements together"
- disadvantages: Redundant structure and styles need to be added
```
   <style>
       .last{
           clear: both;
       }
   </style>
   <body>
       <div class="contain">
           <span class="box1"></span>
           <div class="last"></div>
       </div>
   </body>
Copy the code
```

Quick fixed style

You can eliminate the effects of floating by having a fixed set of styles and giving a class name to the parent element of the floating element. This is equivalent to using pseudo-elements and adding a block-level element with a removable float style to the float element, rather than actually adding a block-level element to the structure.

    <style>
        .clearfix::after{
            /* In effect, a block level element is added to the end of the float element with a pseudo-element, and the float effect is cleared with clear */
            content: "";
            font-size: 200px;
            display: block;
            border-top-style: dashed;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        /* This is for IE678 compatibility, can not consider */
        .clearfix{
            *zoom:1;
        }
    </style>` ` `Copy the code

positioning

Static Static positioning

The default is that there is no location and the element appears in normal document flow.
Top, bottom, left, right,z-index declaration does not take effect

Relative positioning

Generates a relatively positioned element that is positioned relative to its normal position. [Reference is its original position]
The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes. Setting is to increase or decrease the distance in a certain direction of their own

The characteristics of

It’s not out of the document stream, it’s still there
The positioned elements are hierarchical, higher than the normal document flow
Usually used as a reference to an absolute position
Position relative to its original position

    <style>
        .div1{
            width:300px;
            height:300px;
            background-color:porple;
        }
        .div2{
            width:100px;
            height:100px;
            background-color:pink;
            /* Relative position: the reference is its original position */
            position:relative;
            left:100px;
            top:100px;
        }
    </style>
    <body>
                
        <div class='div1' class='class'>
            div1
            <div class='div2'>
                div2
            </div>
        </div>
    </body>
Copy the code

Absolute absolute positioning

Generates an absolutely positioned element relative to the first parent element other than the static positioned element
Element position through"left"."top"."right"As well as"bottom"Attribute specification
Element level pass"z-index"Attribute specification
Reference isPosition: relativeorposition:absolute,position:fixed, as long as it is one of the three can be used as absolute positioning reference. But usually”The outermost layer“Is based on relatively located elements.”

The characteristics of

Out of document flow
The hierarchy is higher than normal document flow
Reference must be an “ancestor” element.
When setting up a reference, the browser follows the “nearest rule” of looking up until it finds one. If none is present, use the body as the reference
When looking up, exceptposition:relative;An ancestor element was found to be setPosition: fixedorPosition: absolute“, the element will use the element as a reference and will not look up the Settingsposition:relative;The element of.
After block-level elements are floated and positioned, the width no longer inherits from the parent element, but is determined by the content.
The width and height of inline elements can also be used after positioning.
When you set the absolute width of an element to a percentage, do so relative to the element’s reference, not its parent.

        <style>
            .div1{
                width:300px;
                height:300px;
                background-color:porple;
                border:1px solid black;
                margin-left:20px;
                margin-top:20px;
                /* Relative positioning: as a reference */
                position:relative;
            }
            
            .div5{
                width:120px;
                height:120px;
                background-color:tomato;
                /* Absolute position */
                position:absolute;
                right:100px;
                bottom:200px;
            }
        </style>    
            <div class='div1' class='class'>div1
                <div class='div5'>div5
                </div>
            </div>
Copy the code

Fixed Fixed position

Generates an absolutely positioned element, positioned relative to the browser window. The reference is the body
Element position through"left"."top"."right"As well as"bottom"Attribute specification

Element level pass"z-index"Attribute specification

        <style>
            .div1{
                width:300px;
                height:300px;
                background-color:porple;
                border:1px solid black;
                top:0;
                left:0;
                /* Absolute positioning: fixed in the top left corner of the page */
                position:fixed;
            }
        
        </style>      
            <div class='div1' class='class'>
                div1
            </div>
Copy the code

The hierarchy

z-index
- Adjust the hierarchy of elements that leave the document flow, the higher the value, the higher the hierarchy

other

How do I center an element horizontally and vertically across a screen or a box
- Add a location to the elementposition:absolute;
- left:50%;
- top:50%;
- Margin-left: negative half the width of the box;
- Margin-top: negative half of the height of the box;

        <style>
            body{
                height: 800px;
            }
            .outer{
                width: 100%;
                height: 100%;
                position: relative;
            }
            .center{
                width: 100px;
                height: 100px;
                background-color: tomato;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
            }
        </style>
        <div class="outer">
            <div class="center">
                div
            </div> 
        </div>
Copy the code

Flex Flex layout

compatibility

Internet Explorer 10 and above can be used safely on PC and directly on mobile.

The traditional layout

The traditional layout is based on the box model and is adjusted by position +float +display properties. This is actually not very convenient, for example, vertical center is not very convenient

Elastic layout

Flexible layouts provide maximum flexibility for box models
display:flex;Represents the block level
display:inline-flex;This is the inline block
With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated!
Containers and Items:Once the Flex layout is set for an element, the element becomesFlex containerAll child elements of a container automatically become members of the container, calledproject
Two shaft:Default is horizontal spindle, and vertical cross axis.
- The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end;
- The starting position of the intersecting axis is called cross start and the ending position is called cross end.

The container

Once the Flex layout is set for an element, the element becomesFlex container

Container properties

Control spindle direction`flex-direction`

When set, items are arranged in the specified container axis
Default is landscape [left to right]

    <style>
        div{
            display:flex;
            /* Set the horizontal axis as the main axis */
            flex-direction:row;
            /* Set the vertical axis to the main axis */
            /* flex-direction:column; * /
            /* Set the reverse horizontal axis to the main axis */
            /* flex-direction:row-reverse; * /
            /* Set the reverse vertical axis to the main axis */
            /* flex-direction:column-reverse; * /
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
Copy the code

A newline`flex-wrap`

When set, items wrap after filling the container along the main axis

The default is no line breaks

    <style>
        .list{
            display:flex;
            /* Set the horizontal axis to the main axis */
            flex-direction:row;
            /* Set the vertical axis to the main axis */
            /* flex-direction:column; * /
            /* Set the reverse horizontal axis to the main axis */
            /* flex-direction:row-reverse; * /
            /* Set the reverse vertical axis to the main axis */
            /* flex-direction:column-reverse; * /
            / * * / a new line
            flex-wrap:wrap;
            /* No line breaks */
            /* flex-wrap:nowrap; * /
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
Copy the code

Main axis & newline`flex-flow`[Compound attribute]

The first value represents setting the main axis
The second value indicates whether line breaks are set
The two values are separated by Spaces

    <style>
        .list{
            display:flex;
            flex-flow:column wrap;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
Copy the code

Controls the alignment of items along the main axis`justify-content`“Common”

centerCentered on the main axis
flex-startAlign the beginning of the spindle
flex-endAlign spindle ends
space-betweenAlign items at both ends of the container’s main axis
space-aroundOn the main axis, the space between each item is twice the distance from the container border

space-evenlyOn the main axis, the spacing between each item is the same as the distance between the item and the container border

    <style>
        .list{
            display:flex;
            justify-content:space-between;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
Copy the code

Controls the alignment of items along the cross axes`align-items`“Common”

centerCenter the cross axis
flex-startAlign the beginning of the cross axis
flex-endAlign the end of the cross axis
stretchItems fill the entire cross axis
- If the proportion of the item on the cross axis is not written, or if it is set to Auto, it will occupy the entire cross axis.
baselineBaseline alignment of the first line of text for the project

    <style>
        .list{
            display:flex;
            flex-wrap:nowrap;
            /* Horizontal and vertical center */
            justify-content:center;
            align-items:center;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
Copy the code

Controls the alignment of items along the cross axes`align-content`[Under the premise of multiple axes caused by newline]

centerCenter the cross axis
flex-startAlign the beginning of the cross axis
flex-endAlign the end of the cross axis
space-betweenMultiple spindle items are aligned at both ends of the container cross axis
space-aroundOn the cross axis, the cross axis distance between the two spindles is twice the distance between one of the spindles on the cross axis and the container border
stretchItems fill the entire cross axis
- If the proportion of the item on the cross axis is not written, or if it is set to Auto, it will occupy the entire cross axis.

    <style>
        .list{
            display:flex;
            /* must be on the premise of line breaks, because line breaks cause multiple axis */
            flex-wrap:wrap;
            justify-content:space-between;
            align-content:space-between;
        }
    </style>
    <body>
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </body>
Copy the code

project

All child elements of a container, which automatically become members of the container, are calledproject

Project attributes

Order of itemsorder
- The smaller the value is, the more advanced it is. The default value is 0

Magnification of the projectflex-grow
- The default value is 0, that is, if there is free space, it is not enlarged
- If both are set to 1, they divide the remaining space equally (if any)
- If one of them is 2, it is twice as large as the others

Reduction ratio of the projectflex-shrink
- The default is 1, and all projects are scaled down equally when space runs out
- If one is set to 0, when the space is insufficient, the others shrink, this one does not shrink
- There is no negative

The project occupies the main axis spaceflex-basis
- Defines the main size of the project before allocating extra space.
- The default is Auto, and the size of the project itself can also be set to a fixed value
- Based on this property, the browser calculates whether the main axis has extra space.
Zoom in, zoom out, occupy spindle spaceflex[Compound attribute]
- flex:0 1 auto;[Default value]
- flex:1; Divide the width
- Defines the main size of the project before allocating extra space.
- The default is Auto, and the size of the project itself can also be set to a fixed value
- Based on this property, the browser calculates whether the main axis has extra space.

Baseline alignment

`vertical-align`Baseline alignment

vertical-align:top;Top line alignment,
vertical-align:middle;The midline alignment
vertical-align:baseline;Baseline alignment
vertical-align:bottom;The bottom line is aligned

The fonts icon

It actually loads text, making fewer HTTP requests and consuming more resources to load images than images
It is actually an icon implemented with a style
Iconfont Alibaba vector icon library

Used as a network resource

Find the desired icon in the icon library, one or more, separately or as a whole to generate online links
Write a container and set the corresponding class name
Import the style sheet for the class name and prefix the address with HTTP:

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2558123_r4qonyni5e.css">
    <style>
        .iconfont{
                color: blue;
                font-size:20px;
            }
    </style>
    <body>
        <span class="iconfont icon-buganxingqu"></span>
    </body>
Copy the code

Used as a local resource
1. Find the required ICONS in the icon library, one or more, separately or as a whole to generate a compressed package containing style sheets and font files, download to the local
2. Import the style sheet and font file into the project
3. Write a container and set the corresponding class name
4. Introduce a style sheet with the corresponding class name
```
   <link rel="stylesheet" href="./CSS/iconfont.css">
   <style>
       .iconfont{
               color: blue;
               font-size:20px;
           }
   </style>
   <body>
       <span class="iconfont icon-buganxingqu"></span>
   </body>
Copy the code
```

Block Formatting Contexts (BFC)

It is a separate rendering area that defines the layout of a normal flow block box within that area.
Different BFC’s that don’t interfere with each other when rendering.

The rules

A regular flow block box, in the horizontal direction, must fill the containing block (inheriting the width of the parent element)
Normal flow block boxes, in terms of arrangement, are arranged up and down (characteristic of block-level elements)
Regular flow block boxes, if seamlessly adjacent, perform margin merging (margin penetration, “drop together”)
The automatic height and placement of conventional flow block boxes ignores the float element.

Conditions for BFC generation

Root element: HTML
Floating and positioning elements fixed and absolute positioning
Overflow does not equal visible
Display: Inline-block, table-cell, table-caption;

Frequently asked Questions

Margin value through
Floating elements cause the height of the parent box to collapse

preface

What is CSS?

Introduction of the CSS

[Inline style]

“Embedded”

[External chain import]

【 Import 】

Common units of the CSS

Absolute unit of length

Unit of relative length

viewport

role

attribute

The CSS syntax

Division of elements

Block-level elements

Inline elements

【 Judgment 】

Summary of element tags

Inline elements:

Block-level elements:

Inline blocks:

Element property conversion display

Convert to block-level elements

Convert to inline elements

Convert to inline block elements

Hide the element

CSS styles

Clear default styles

Clear margin and padding of global elements

Clear the default style of the list

Clear the default style for the A tag

The commonly used styles

Wide high

The background color

The text

The font-family font

The font size – the size

Color color

Thickness of the font – weight

Incline & normal font-style

Block-level elements are quickly horizontally centered

The high line – height

Height the height

Text alignment text-align

The first line indentation

Use case

Border border

overflow

define

overflow:hidden

overflow:auto

overflow:scroll

background

Background-color Indicates the background color

usage

Style value

Color name

Color hexadecimal value

Rgba values

Background-image Indicates the background image

Background-size Specifies the size of the background image

usage

Background - size: high wide;

Style value

Background-size: the first value px and the second value pxPixel values

Background-size: first value % second value %Percentage of parent elements

background-size:contain

background-size:cover

Background-position: Position of the background image

usage

Horizontal [first value]

Vertical [second value]

background-repeatControl picture tiling

background-attachmentControls whether the background follows the scroll bar

backgroundThe composite properties

The selector

The weight

Wildcard selector *【 All Elements 】

`overflow:hidden`

`overflow:auto`

`overflow:scroll`

`Background - size: high wide;`

`Background-size: the first value px and the second value px`Pixel values

`Background-size: first value % second value %`Percentage of parent elements

`background-size:contain`

`background-size:cover`

`background-repeat`Control picture tiling

`background-attachment`Controls whether the background follows the scroll bar

`background`The composite properties

Wildcard selector `*`【 All Elements 】

Class selectors`.`[Specified class]

Property selector`[]`The specified element containing an attribute

The id selector`#`[Specified ID]

Child selectors`>`[Specified child element]

Descendant selector`The blank space`[All descendant elements specified]

Packet selector`.`

Intersection selector`Unsigned link`

Adjacent sibling selectors`+`

Universal sibling selector`~`

Pseudo class selector`:`

`a:link` `a:visited` `a:hover` `a:active`Common pseudo-class selectors

`! important`Enforce the use of this style

`width`The width of the

`height`highly

`border`A border

`The padding and margin`Inside margin, outside margin

`float`volatility

Add to the parent element of the float element`overflow:hidden`style

Control spindle direction`flex-direction`

A newline`flex-wrap`

Main axis & newline`flex-flow`[Compound attribute]