CSS basic summary

CSS introduction

1. What is CSS

  • CSS is a markup language. CSS is mainly used to set the text content (font, size, alignment) of the page, the shape (width, border style, margin) of the picture, as well as the layout and appearance display style of the layout.

2. Role of CSS

  • CSS makes our web pages more colorful and layout more flexible.

  • CSS can beautify HTML, make HTML more beautiful and make page layout simpler.

I Fundamentals of CSS syntax (I)

1. Structure of main parts of CSS * *: selector and declaration style

2. Syntax specification of CSS:

  1. Selectors are html tags used to specify styles, and the specific styles set for the object are in curly braces.

  2. Attributes and attribute values appear as key value pairs.

  3. Attribute is the style attribute set for the specified object, such as font size, text color, etc.

  4. Attributes and attribute values are separated by English colons.

  5. Multiple key value pairs are distinguished by semicolons.

    p {
                color: blue;
                font-size:20px;
            }
    

1. CSS selector

1. Classification of selectors

  • Selectors are divided into two categories: basic selectors and compound selectors.

  • The base selector consists of a single selector.

  • Basic selectors include: label selector, class selector, id selector and wildcard selector.

2. Function of selector

Selector is to select different labels according to different needs.

1.1 label selector

html tag name as selector

  • The tag selector can select all the tags of a certain type.

  • It can quickly set the style for the same type of labels in the page.

  • You cannot design a differentiated style. You can intelligently select all the current labels.

    <body>
        <p>paragraph</p>
        <div>Box</div>
    </body>
    
    p {
                color: aqua;
            }
    div {
                color: blueviolet;
            }
    

Type 1.2 selector

Use class name as selector

  • Select different labels for differentiation, and select one or more labels separately.

  • Class selector use Is represented, followed by the class name

  • Long name class names can be named with -

  • Use English letters for naming

    <body>
        <div class="blue">Black Sweater </div>
        <div class="star-sing">Qilixiang</div>
    </body>
    
     .blue {
                color: blue;
            }
     .star-sing {
                color: chocolate;
            }
    

Use of multiple class names for class selectors

  • You can put some styles (common parts) with the same label into a class

  • These tags can call the public class, and then call their own unique class

    <body>
        <div class="box red">gules</div>
        <div class="box gree">green</div>
    </body>
    
    .box {
        width: 100px;
        height: 100px;
    }
    
    .red {
        background-color: red;
        font-size: 20px;
    }
    
    .gree {
        background-color: green;
        font-size: 30px
    }
    

1.3 id selector

Use id name as selector

  • The id selector can specify a specific style for HTML elements marked with a specific

  • HTML elements use the id attribute to set the id selector, and CSS uses # to define the id selector

  • The id attribute can only appear once in each HTML document

    <body>
        <div id="pink">MichaelĀ·Jackson</div>
        <div>Lau Andy</div>
    </body>
    
    #pink {
        color: pink;
    }
    

The difference between id selector and class selector

  • Class selectors are similar to names. A name can have many people with the same name.
  • id selector is like the id number of everyone.
  • The biggest difference between id selector and class selector is the number of times they are used.
  • Class selectors are most used in modifying styles. id selectors are generally used for the unique elements of the page and are often used with js.

1.4 wildcard selector

  • The wildcard selector is defined with * to indicate that all elements (all labels) in the page are selected

  • Wildcard selectors do not need to be called and automatically use styles for all elements

  • It is only used in special cases, such as clearing the inner and outer margins of all element labels

    * {
      margin: 0;
      padding: 0;
    }
    

2. CSS font properties

  • Define font series, size, thickness, text style, etc.

  • font: weight | size | style | family | ...

2.1 font weight setting font weight

  • Font weight: normal (default) | boder

  • font-weight: 400/700

  • 400 is equivalent to nomal (default) and is not bold

  • 700 is equivalent to bold boder

  • Recommended numbers for development

    h2 {
                font-weight: 400;
                /* font-weight: normal; */
            }
    .bold {
                font-weight: 700;
                /* font-weight: bold; */
            }
    

2.2 font size setting font size

  • In general, you can specify the size of the whole page text for the body

  • The title label is special, and the text size needs to be specified separately

    body {
    	font-size: 18px;
    }
    

2.3 font style setting font style

  • Font style: normal (default) | Italic (italic)

  • Usually we seldom add italics to the text. Instead, we should change the italics label em to a non inclined font

    p {
                font-style: italic;
            }
    em {
                font-style: normal;
            }
    

2.4 font family setting font family

  • Chinese can be used, English is recommended, and multiple can be defined. The first one is used by default, and the next one is used if there is no one

  • Multiple word fonts can use quotation marks

  • It is often defined in the body tag in development

    h2 {
                font-family: 'Microsoft YaHei '
            }
    body {
                font-family: 'Song style','Microsoft Yahei',tahoma,arial, 'Hiragino Sans GB';
            }
    

2.5 compound writing of font attributes

  • font: font-style font-weight font-size font-family
  • Be sure to write in this format order, separated by spaces
  • If they are all default values, font size and font family must also be retained
font: italic 700 16px 'Microsoft yahei'

3. CSS text properties

  • CSS text properties define the appearance of the text.
  • Such as text color, text alignment, text decoration, text indentation, line spacing, etc

3.1 color setting text color

  • color: word name | hexadecimal | rgb form

  • The most commonly used form in development is hexadecimal form

      div {
                /* color: red; */
                color: #ff008c;    
                /* color: rgb(76, 0, 255); */
                
            }
    

3.2 text align setting text alignment

  • text-align: left | center | right

  • There are three ways to align text: left alignment, right alignment, and center alignment

    h3 {
                text-align: center;
            }
    

3.3 text decoration setting

  • text-decoration: none | underline | overline | line-through

  • Decorative text: the most commonly used are underline and default wireless. Dashes and strikeouts are not commonly used

    h1 {
                text-decoration: underline;
            }
    a {
                text-decoration: none
            }
    

3.4 text indent setting text indent

  • Text indent: pixel distance

  • You can specify the indent pixel or 2em. The distance between the indented two text sizes EM is the relative unit, which is indented relative to the current font size

    p {
                /* text-indent: 20px; */
                text-indent: 2em;
            }
    

3.5 line height setting text line spacing

  • Line height: pixels

  • Text line spacing: composed of text height, top spacing and bottom spacing

  • The height of the text line is equal to the height of the box, which can center the elements in the box vertically

       p {
                line-height: 25px;
            }
    

4. Introduction of CSS

According to the writing position of CSS style, CSS style sheets can be divided into three categories:
1. Internal style sheet (embedded)
2. Inline style sheet (inline)
3. External style sheet (linked)

4.1 internal style sheet

  • Write to the inside of the html page. Is to take out all the CSS code and put it separately in the < style > tag.
  • < style > can theoretically be placed anywhere in an HTML document, but it is generally placed in < head >.
  • In this way, you can easily control the element style setting of the whole current page.
  • The code structure is clear, but it does not completely separate the structure from the style.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <div>Internal style sheet</div>
</body>
</html>

4.2 inline style sheet

  • The inline style sheet is suitable for the case where the style modification is relatively simple and few

  • Use style = "attribute: attribute value" directly in the label

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
    </head>
    <body>
    
        <div style="color: deeppink;font-size: 16px;">Fortunately, it was planted to sing</div>
    
    </body>
    </html>
    

4.3 external style sheet

  • The actual development is an external style sheet, which is suitable for the situation with many styles
  • The style is written into the CSS file separately, and then the CSS file is introduced into the HTML file for use
  1. newly build. css suffix file, write css code to the file

  2. In HTML pages, it is introduced through the link tag css file

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>External style sheet</title>
        
        <link rel="stylesheet" href="07_Of external style sheets css file.css">
    </head>
    <body>
        <div>HTML Responsible for writing HTML Code of,CSS Responsible for writing only CSS Code of</div>
    </body>
    </html>
    

5. Commissioning tools

1. Chrome debugging tool

  1. Open the debugging tool - chrome F12

  2. Elements element

  3. html on the left and css on the right

2. Use the chrom e debugging tool

  1. ctrl + scroll wheel to enlarge the code size
  2. The css style on the right can change the value (keyboard up and down keys or direct input) and view the color
  3. ctrl +0 restores the browser size
  4. If you click the element and find that there is no style import on the right, it is most likely that the class name or style import is wrong
  5. If there is a style, but there is a yellow exclamation mark in front of the style, the style attribute is written incorrectly

II Fundamentals of CSS syntax (II)

1. Emmet syntax

  • Use abbreviations to improve the writing speed of HTML and CSS. vscode has inherited this syntax

1.1 quickly generate html structure syntax

Tab. Div name
2. Tag name + number div*5
3. Parent-child relationship UL > Li
4. Brotherhood div+span
5. If there is a class name or id name, directly pcc or #phh tab key
6. If the generated div class names are in order, the self incrementing symbol can be used$
7. If you want to write content inside the generated tag, {}

1.2 fast generation of css structure syntax

1. You can write the tab after the attribute prompt
2. Rapid metamorphosis, such as w100 h100 lh26

1.3 use of quick format code

1. Format document - shift+alt+f
2. Setting - Search Emmet include
3.settings.json [user] configuration:
"editor.formatOnType":true,
"editor.formatOnSave":true
Once set, crl+s will be automatically formatted after saving

2. Composite selector

  • Compound selectors are built on the basis of basic selectors

  • More efficient and accurate target elements (labels)

  • It consists of two or more basic selectors combined in different ways

  • Common compound selectors include: descendant selector, sub element selector, union selector, pseudo class selector, etc

2.1 offspring selector

  • Inclusive relationship, layer by layer selection

  • Any form of selector can be used as a descendant selector

    ul li {
                color: red;
            }
    
    ul li a {
                color: green;
            }
    
    .ol2 li a {
                color: blueviolet;
            }
    

2.2 sub element selector

  • Only the nearest child element can be selected

    div>a {
                color: red;
            }
    

2.3 union selector

  • You can select multiple groups of labels and define the same style for them at the same time.

  • Usually used for collective statements.

  • Any form of selector can be used as a union selector.

    div,
    p {
                color: red;
            }
    
    div,
    p,
    .home li {
                color: red;
            }
    

2.4 pseudo class selector

  • Use to add effects to some selectors, such as links
  • Use: to express

1. Link pseudo class selector

  1. a: Linkselect a connection that has not been accessed

  2. a:visited select all the links you have visited

  3. a:hover the link over which the mouse rests

  4. a:active select the active link (click the link that does not pop up)

    a:link {
                color: #333;
                text-decoration: none;
            }
    
    a:visited {
                color: orange
            }
    
    a:hover {
                color: aqua;
            }
    
    a:active {
                color: red;
            }
    

    The most commonly used format in development

    a {
    	text-decoration: none;
            }
    a:hover {
    	color: aqua;
    	text-decoration: none;
            }
    

    Precautions for linking pseudo classes:
    1.lvha sequence
    2. Because the link has a default style in the browser, we need to specify a separate style for the link in our actual work

2. focus pseudo class selector

  • The form element used to get the cursor

    input:focus {
                color: aqua;
            }
    

3. CSS display mode

3.1 block elements

Common block elements: h1~h6,div,p,ul,ol,li, etc

Characteristics of block elements:

  • Exclusive row

  • It can control the height, width and inner and outer margins

  • The default width is 100% of the container (parent width)

  • Is a container and box that can release internal or block level elements

    div {
                width: 300px;
                height: 300px;
                background-color: darkorange;
            }
    

    Note: text elements cannot be block level elements. For example, p elements cannot be div elements.

3.2 inline elements

Common inline elements include: a, strong, b, em, i, del, s, ins, u, span, etc

Characteristics of inline elements:

  • Elements in adjacent lines can be displayed on one line

  • The direct setting of width and height is invalid

  • The default width is the width of its own content

  • Inline elements can only hold text or other inline elements

    strong {
                background-color: blueviolet;
            }
    
    span {
                background-color: orangered;
            }
    

    be careful:
    1. No more links can be placed in the link
    2. In special cases, block level elements can be placed in the < a > link, but it is safest to convert the < a > block level mode

3.3 inline block elements

Common inline block elements: input, img, td, textarea

It has the characteristics of both block elements and inline elements

Characteristics of inline block elements:

  • On the same line as the elements in the adjacent line, but there will be a gap between them. Multiple can be displayed on one line

  • The default width is the width of its own container

  • Width, row height and inner and outer margins can be set

      input {
                width: 249px;
                height: 35px;
            }
    

3.4 display mode conversion

In special cases, when the display mode of one element requires the characteristics of another mode, for example, you want < a > to trigger the range element mode conversion

  • Convert to block element: display: block

  • Convert to inline element: display: inline

  • Convert to inline block element: display: inline block

    a {
                width: 300px;
                height: 200px;
                display: block;
            }
    

4.CSS background properties

Background attribute can set background color, background picture, background tile, background picture position, background image fixation, etc

background: background-color | background-image | background-repeat | background-attachment | background-position

4.1 setting the background color

  • Background color: transparent by default | color

    div {
                background-color: pink;
            }
    

4.2 setting background picture

  • Background image: none (default) | url(url)

    div {
                background-image: url(images/logo.png);
            }
    

4.3 setting background tile

  • background-repeat: repeat | no-repeat | repeat-x | repeat-y

    repeat tile (default)
    norepeat (non tiled)
    repeat-x (tile along X axis)
    repeat-y (tile along Y axis)
    You can have both background colors and background tiles

    div {
                background-repeat: no-repeat;  
            }
    

4.4 setting the position of background picture

  • background-position: x y

    You can use location nouns or precise units
    Length percentage | length value composed of floating-point number and unit identifier

1. The parameter is a noun of orientation

  • background-position: top | center | bottom | left |right

    If both specified values are location nouns, the order of the two values is irrelevant, such as left, top and top left
    If only one location noun is specified and the other value is omitted, the second value is centered by default

    div {
                background-position: left center;
            }
    

2. parameters are in exact units

  • background-position: px px

The first must be the x coordinate and the second must be the y coordinate

If only one value is specified, the value must be the x coordinate, and the other is centered vertically by default

div {
            background-position: 100px 10px;
            /* background-position: 100px;  Specify only one value. The value must be the x coordinate, and the y coordinate is center by default*/
        }

3. The parameter is mixed unit

  • Background position: PX position NOUN

    If the two values specified are a mixture of precise units and azimuth nouns, the first value is the x coordinate and the second value is the y coordinate

     div {
                background-position: 100px center;
            }
    

4.5 setting background image fixation

The background attachment property sets whether the background image is fixed or scrolls with the rest of the page
Background attachment parallax scrolling effect can be produced later

  • Background attachment: scroll (default) |fixed

    scroll background image scrolls with object content
    fixed background image fixing

    body {
                background-attachment: fixed;
                /* background-attachment: scroll;  Scroll (default)*/
            }
    

4.6 compound writing of background attributes

Background: background color background image background tile background image scroll background image position

Generally in the order of this agreement

body {
            /* Background attribute compound writing method */
            background: pink url(images/bg.jpg) no-repeat fixed top;

        }

4.7 background translucency

CSS3 provides us with the effect of translucent background color

div {
           background: rgba(0, 0, 0, 0.2);      
        }

The last parameter is alpah transparency, with a value between 0 and 1
Note: background translucency refers to the translucent background of the box, and the contents of the box are not affected

III Three features of CSS

CSS has three major features: cascading, inheritance and priority

1. Lamination

Set the same style to the same selector, and the style will cascade (overwrite) another conflicting style

Principle of lamination:

  • Style conflict, proximity principle

  • If the styles do not conflict, they will not be stacked

    <body>
        <div>The back waves of the Yangtze River push the front waves, and the front waves die on the beach</div>
    </body>
    
    div {
                color: red;
                font-size: 30px;
            }
    
            div {
                color: pink;
            }
    

2. Inheritance

Child labels inherit certain styles of the parent label, such as text color and font size.

Using inheritance can simplify code and reduce the complexity of css style.

<div>
        <p>The back waves of the Yangtze River push the front waves</p>
    </div>
div {
            color: red;
            font-size: 30px;
        }

3. Priority

  • When the same element specifies multiple selectors, priority will be generated

  • If the selectors are the same, cascading is performed

  • If the selector is different, it is executed according to the selector weight

  • Inheritance and * < element selector < class, pseudo class selector < ID selector < inline style selector <! important

    1. Inherit or * 0000

    2. Element selector 0001

    3. Class, pseudo class selector 0010

    4. id selector 0100

    5. Inline style = "" 1000 ""

    6. ! important infinity

    <body>
        <div class="nav" id="emo" style="color: turquoise;">You look good with a smile</div>
    </body>
    
    
    div {
                color: red;
            }
    
            .nav {
                color: orange;
            }
    
            * {
                color: blue !important;
            }
    
            #emo {
                color: green;
            }
    
  • Notes on inheritance weight:

  • The inherited weight is 0. No matter how high the weight of the parent element is, the weight of the child element is 0

    <body>
        <div id="nav">
            <p>You look good with a smile</p>
        </div>
        <a href="#">www.baidu.com</a>
    </body>
    
    #nav {
                color: red;
            }
            
     p {
                color: pink;
            }
    
    body {
                color: purple;
            }
    
  • Superposition of weights

If it is a composite selector, there will be weight superposition, and the weight needs to be calculated

<ul class="nav">
        <li>blue sky</li>
</ul>
ul li {		/* 0001 + 0001 = 0002 */
            color: blue;
        }

        
.nav li {	/* 0010 + 0001 = 0011 */
            color: deeppink;
        }

        
li {		/* 0001 */
            color: red;
        }

IV Three layout modes of CSS

Three cores of web page layout: box model, floating and positioning

1. Box model

Box composition: box frame, box content, inner margin and outer margin

The process of web page layout:

  1. First prepare the relevant web page elements, which are basically boxes.
  2. Use CSS to set the box style, and then place it in the corresponding position.
  3. Put the contents in the box.

The essence of web layout:

Using CSS to put the box

1.1 box frame

The box border can be set with border width, border style and border color.

boder: boder-weight | boder-style | boder-color

  • boder-width: px;

  • boder-style: solid | dashed | dotted

  • Boder color: color;

      div {
                /* Border width */
                border-width: 5px;
                /* Border style */
                border-style: solid;
                /* Border color */
                border-color: pink;
            }
    

The box border has four sides:

  • boder-top,boder-bottom,boder-left,boder-right

Compound writing:

  • boder: boder-width boder-style boder-color;

    div {
                border: 5px dashed blue;
            }
    

Table thin line border: merge two adjacent borders together.

boder-callapse: collapse;

The border affects the actual size of the box

div {
            /* Actual 200 * 200 box (including frame) */
            width: 180px;
            height: 180px;
            border: 10px solid blue;

        }

Solution:
1. When measuring the size of the box, do not measure the frame
2. If the frame is also included in the measurement, you need to subtract the width of the frame from the width/height

1.2 inner margin of box

The content of the box cotent is close to the border by default, and the inner margin can be set at this time

  • padding: padding-top | padding-bottom | padding-left | padding-right

     div {
                width: 200px;
                height: 200px; 
                padding-top: 1px;
                padding-bottom: 1px;
                padding-left: 1px;
                padding-right: 1px;
            }
    

    padding compound writing method:

    div {
                width: 200px;
                height: 200px;
                /*Top, bottom, left and right distance frame 5px*/
                padding: 5px;
                /* The top and bottom are 5px away from the frame, and the left and right are 10px away from the frame*/
                padding: 5px 10px;
                /* The upper distance from the frame is 5px, the left and right distance from the frame is 10px, and the lower distance from the frame is 20px*/
                padding: 5px 10px 20px;
                /*The distance from the top to the frame is 5px, 10px to the right, 20px to the bottom and 30px to the left*/
                padding: 5px 10px 20px 30px;
            }
    

Assign a padding value to the box:

1. There is a distance between the content and the border, and an inner margin is added
2.padding affects the actual size of the box

  • If the box already has a width and height, specifying the inner margin will enlarge the box
  • If the box itself does not specify the width/height attribute, padding will not open the box size
div {
            /* Requirement: add 20px inner margin. The actual size of the box is 200px in width/height*/
            width: 160px;
            height: 160px;
            padding: 20px;
        }

Solution:
If the size of the box rendering is consistent, let the width/height subtract the extra inner margin

Benefits of padding affecting boxes:

  • If the number of words in each module in the box is different
  • It is unreasonable to set the same width for the box
  • The best solution is to set the padding value to open the box
  • In this way, the distance between these modules is equal

1.3 outer margin of box

The margin property is used to set the outer margin. Controls the distance between boxes

  • margin: margin-top | margin-bottom | margin-left | margin-right

    div {
                margin: 20px;
            }
    

    margin compound:

    div {
                margin: 10px;
                margin: 20px 30px;
                margin: 10px 20px 30px;
                margin: 10px 20px 30px 40px;
            }
    

1.4 typical application of outer margin

Horizontal centering of block elements:

1. The width of the box must be set

2. Ensure that the left and right margins of the box are set to auto

div {
	width: 200px;
	height: 100px;
	margin: 0 auto;
}

Horizontal centering of inline elements and inline blocks:

Add text align to the parent element if the inline element and inline block element are horizontally centered

span {
	text-algign: center;
}
img {
	text-algign: center;
}

Collapse of the vertical outer margin of nested block elements
For block elements with two nested relationships (parent-child relationship), the parent element has upper and outer margins, and the child element also has upper and outer margins. At this time, the parent element will collapse the larger margin value

Solve the collapse problem of the vertical outer margin of nested block elements

  • Set border for parent element
  • Set inner margin for parent element
  • Add overflow: hidden to parent element
  • The box with floating, positioning and absolute positioning will not collapse

Clear inner and outer margins:

* {
   padding: 0;
   margin:0
}   

Note: in line elements in order to take care of compatibility, try to set only the left and right inner and outer margins, do not set up the upper and lower inner and outer margins However, it is OK to replace it with block level and inline block elements.

1.5 rounded border

CSS3 adds a rounded border style, and the border radius attribute is used to set the rounded corner of the element's outer border

  • border-radius: length;
boder-radius: 10px;
/* You can also use percentages
border-radius: 20%; */

Four corners of rounded border:

.radius {
            width: 200px;
            height: 200px;
           	border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 40px;
        }

Compound writing method of rounded border:

.radius {
            width: 200px;
            height: 200px; 
            /* Clockwise represents each corner */
            border-radius: 10px 20px 30px 40px;
        }

1.6 box shadow

New box shadow in CSS3
box-shadow: h-shadow | v-shadow | blur | spread | color | inset;

  • h-shadow position of horizontal shadow

  • Position of v-shadow vertical shadow

  • blur ambiguity

  • spread fuzzy range

  • Color color

  • inset changes the outer shadow (default) to the inner shadow

    div:hover {		/* There was no shadow in the original box. When you move the mouse to the box, there is a shadow */
                box-shadow: 10px 10px 10px -2px rgba(0, 0, 0, .3);
            }
    

be careful:
1. The default is the outer shadow, but this word cannot be written, otherwise it will be invalid.
2. The box shadow does not occupy space and will not affect the arrangement of other boxes.
3. If the shadow is set, the first two values must be written. Other optional.

1.7 text shadow

text-shadow: h-shadow | v-shadow | blur color;

div {
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }

2. Floating

float: none | left | right

Floating characteristics:

  • Off standard flow (off standard)

  • Displays in a row and aligns the top of the element

  • Has the properties of inline block elements

  • No position

    1. Any element can float. No matter what the original pattern of elements, adding floating will have similar characteristics to inline block elements.
    2. If the width of the block level box is not set, the default width is the same as that of the parent, but after adding floating, its width is determined according to the content.
    3. There is no gap in the middle of the floating box, which is close to each other.

  • Floating elements are often used with standard flow parents

  • In order to restrict the position of floating elements, the general strategy of our web page layout is:

  • First, the parent elements of the standard flow are used to arrange the upper and lower positions, and then the internal child elements are floating to arrange the left and right positions.

2.1 define float

float: left;

2.2 clear float

Why clear float?

  • In many cases (for example, when there are many products), it is inconvenient to give height to the parent box, but the child box floats and does not occupy a position.

  • Therefore, when the height of the parent box is 0, the following standard flow box will be affected.

  • Since the floating element no longer occupies the position of the source document stream, it will affect the layout of subsequent elements.

Clear the essence of Floating:

  • The essence of clearing floating is to clear the influence caused by floating elements.

  • If the parent box itself has a height, you do not need to clear the float.

  • After floating is cleared, the parent will automatically detect the height according to the floating sub box. If the parent has a height, it will not affect the following standard flow.

Clear floating policy:

  • Closed float. Let the float only affect the inside of the parent box, and do not affect other boxes outside the parent box

There are three ways to clear floating:

1. Additional labeling method

<div class="clear"></div>
.clear {
            clear: both;
        }

2.overflow

overflow: hidden;

3.after pseudo element method

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6,7 proper */
            *zoom: 1;
        }

4. Pseudo element method

.clearfix:before,
.clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

3. Positioning

Positioning allows the box to move freely within a box or fix a position in the screen, and can press other boxes.

  • Positioning methods: static positioning, relative positioning, absolute positioning, fixed positioning and viscous positioning.

3.1 static positioning

  • Static positioning is the default positioning method for elements

  • Static positioning is rarely used in layout

    position: static;
    

3.2 relative positioning

  • Relative positioning is relative to the original position of an element when moving its position.

  • Do not deviate from standard flow

    position: relative;
    

3.3 absolute positioning

  • If there is no ancestor element or the ancestor element is not located, the browser shall prevail

  • If the ancestor element has positioning (relative, absolute and fixed positioning), take the nearest ancestor element with positioning as the reference

  • Absolute positioning no longer occupies the original position (off label)

  • It's usually a son with no father

    position: absolute;
    

3.4 fixed positioning

  • Fixed positioning is the position where the element is fixed in the viewable area of the browser.

  • Application scenario: the position of elements will not change when the browser page scrolls.

  • Fixed positioning out of standard flow

    positon: fixed
    

    Fixed positioning tips: fixed on the right side of the layout Center
    1. Let the fixed positioning box left: 50% go to half of the viewing area of the browser
    2. Make the fixed positioning box margin left: half the width of the layout center and half the width of the layout center

3.5 viscous positioning

  • Hybrid of relative positioning and fixed positioning
  • Move elements with the visual window of the browser as the reference point (fixed positioning feature)
  • Viscous positioning occupies the original position (relative positioning characteristics)
  • One of top, left, right and bottom must be added to be valid
  • Use with page scrolling. Poor compatibility. ie not supported
position: sticky;
top: 0;

3.6 stacking sequence of positioning

When using a positioning layout, boxes may overlap. At this point, you can use z-index to control the order of boxes

Only the positioned box will have the z-index attribute

z-index: 1;

The default is auto. The larger the value, the higher the box.

3.7 centering of absolute positioning

.box {
            position: absolute;
            width: 200px;
            height: 200px;
            /* horizontally */
            left: 50%;
            margin-left: -100px;
            /* Vertical center */
            top: 50%;
            margin-top: -100px;
            background-color: deeppink;
            /* margin: 0 auto; */
        }

Positioning special features:

  • Absolute positioning and fixed positioning are also similar to floating.
  • Absolute or fixed positioning is added to the elements in the line, and the width and height can be set directly
  • Block level elements add absolute or fixed positioning. If the width and height are not given, the default size is the size of the content.
  • A box off the label will not trigger the collapse of the outer margin
  • The combination of floating elements and absolute positioning (fixed positioning) elements will not trigger the problem of outer margin merging

Differences between positioning and floating elements:

  • Absolute positioning (fixed positioning) will completely press the box:
  • Unlike floating elements, they only press the standard flow box below them, not the text in the standard flow box below them
  • Absolute positioning (fixed positioning) will suppress all the contents of the following standard stream
  • The reason why floating won't suppress the text is that the purpose of floating is to make the text surround effect at first.
  • The biggest feature of positioning is the concept of stacking, that is, multiple boxes can be stacked back and forth to display. If the element moves freely in a box, use positioning

3.8 display and hiding of elements

1.display attribute

The display attribute is used to set how an element is displayed

  • display: none | block

    display: none;
    

    display no longer occupies the original position after hiding the element

    display: block; In addition to converting to block level elements, there is also the meaning of display elements

2.visibility attribute

The visibility attribute specifies whether an element should be visible or hidden

  • Visibility: visible | hidden

    visibility: hidden;
    

    visibility hides the element and continues to occupy its original position

3.overflow attribute

The over attribute specifies what happens if the content overflows an element's box

  • overflow: visible | hidden | scroll | auto

    overflow: hidden
    

    Generally, we don't want the overflow content to be displayed, because the overflow part will affect the layout

V Advanced CSS skills

1. Use of Sprite diagram

Use sprite core:

  1. Sprite technology is mainly used for background pictures. Is to integrate multiple small background pictures into a large picture
  2. This big picture is also called sprites sprite
  3. To move the position of the background picture, you can use background position
  4. The moving distance is the x and y coordinates of the target image. The coordinates in the web page are different
  5. Because the general situation is to move up and left, the value is negative
  6. When using sprite images, you need to accurately measure the size and position of each small background image.
background: url(images/sprites.png) no-repeat -182px 0;

2. Use of font icons

  • Font Icon usage scenario: mainly used to display some common and commonly used small icons in web pages
  • Font icon download: https://iconmoon.io

Font Icon reference:

/* Font declaration */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?nqdbnz');
            src: url('fonts/icomoon.eot?nqdbnz#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?nqdbnz') format('truetype'),
                url('fonts/icomoon.woff?nqdbnz') format('woff'),
                url('fonts/icomoon.svg?nqdbnz#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
        }

3.CSS triangle

Set the CSS triangle so that the width and height of the box are 0

width: 0;
height: 0;
border: 10px solid pink;

4. User interface style

  1. Mouse style
  • cursor: default | pointer | move | text | not-allowed

    cursor: default;
    
  • Default: the default mouse style

  • pointer: mouse hand

  • move: mouse movement

  • Text: mouse text style

  • Not allowed: mouse forbidden style

  1. Cancel form outline
outline: none;
  1. Cancel text field drag
resize: none;
  1. Picture, form, and text alignment

Solve the default blank gap at the bottom of the picture

There will be a blank gap at the bottom of the picture because the block elements in the line will be aligned with the baseline of the text

  • vertical-align: baseline | top | middle | bottom

    vertical-align: middle;
    
  • Baseline: baseline alignment

  • top: top alignment

  • middle: center alignment

  • Bottom: align bottom

  1. Single line overflow text display ellipsis
white-space: nowrap;		/* 1.Force one line display */
overflow: hidden; 			/* 2.Overflow hiding */
text-overflow: ellipsis;	/* 3.The overflow part is displayed with an ellipsis */
  1. Multi line overflow text display ellipsis
overflow: hidden;			
text-overflow: ellipsis;
display: -webkit-box;			/* Elastic box model display */
-webkit-line-clamp: 3;			/* The third line of text overflows and displays an ellipsis */
-webkit-box-orient: vertical;	/* Center text vertically */
  1. Clever use of negative margin

Achieve the effect of 1 + 1 = 1

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 120px;
            border: 1px solid red;
            /* Move the margin of each box to the left -1px just to press the border of the adjacent box */
            margin-left: -1px;
        }
  1. The wonderful use of text floating around
  • When you add a float to a box, the text surrounds the floating element
  • Adding a float does not suppress the text
  1. Clever use of inline block elements
  • The intra row block element itself has its own point distance, and then the width and height can be set. The parent element is only after text align: Center

  • The block elements in the inner row are aligned horizontally and centered.

  1. Clever use of CSS triangle
width: 0;
height: 0;
 /* The upper, lower and left borders are transparent */
border-color: transparent #fff transparent transparent;           
  1. CSS initialization
  • The default values of some tags are different in different browsers. In order to eliminate the differences of HTML text rendering in different browsers. Take care of browser compatibility, so you need to initialize CSS.

height: 0
border: 10px solid pink

4. User interface style

  1. Mouse style
  • cursor: default | pointer | move | text | not-allowed

    cursor: default;
    
  • Default: the default mouse style

  • pointer: mouse hand

  • move: mouse movement

  • Text: mouse text style

  • Not allowed: mouse forbidden style

  1. Cancel form outline
outline: none;
  1. Cancel text field drag
resize: none;
  1. Picture, form, and text alignment

Solve the default blank gap at the bottom of the picture

There will be a blank gap at the bottom of the picture because the block elements in the line will be aligned with the baseline of the text

  • vertical-align: baseline | top | middle | bottom

    vertical-align: middle;
    
  • Baseline: baseline alignment

  • top: top alignment

  • middle: center alignment

  • Bottom: align bottom

  1. Single line overflow text display ellipsis
white-space: nowrap;		/* 1.Force one line display */
overflow: hidden; 			/* 2.Overflow hiding */
text-overflow: ellipsis;	/* 3.The overflow part is displayed with an ellipsis */
  1. Multi line overflow text display ellipsis
overflow: hidden;			
text-overflow: ellipsis;
display: -webkit-box;			/* Elastic box model display */
-webkit-line-clamp: 3;			/* The third line of text overflows and displays an ellipsis */
-webkit-box-orient: vertical;	/* Center text vertically */
  1. Clever use of negative margin

Achieve the effect of 1 + 1 = 1

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 120px;
            border: 1px solid red;
            /* Move the margin of each box to the left -1px just to press the border of the adjacent box */
            margin-left: -1px;
        }
  1. The wonderful use of text floating around
  • When you add a float to a box, the text surrounds the floating element
  • Adding a float does not suppress the text
  1. Clever use of inline block elements
  • The intra row block element itself has its own point distance, and then the width and height can be set. The parent element is only after text align: Center

  • The block elements in the inner row are aligned horizontally and centered.

  1. Clever use of CSS triangle
width: 0;
height: 0;
 /* The upper, lower and left borders are transparent */
border-color: transparent #fff transparent transparent;           
  1. CSS initialization
  • The default values of some tags are different in different browsers. In order to eliminate the differences of HTML text rendering in different browsers. Take care of browser compatibility, so you need to initialize CSS.

Tags: Front-end css css3

Posted by leetcrew on Thu, 14 Apr 2022 22:55:04 +0930