Everyone should have at least one dream and one reason to be strong.

Summary of CSS related knowledge, 🙅 is wrong, please tell me oh

1. Introduce CSS stylesheets (write position)

1.1 Inline style (Inline style)

  • The basic syntax is as follows:

    < p style=” margin-top: 1em; margin-bottom: 1em; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; > Content </ tag name > copy code

  • As shown below at 👇 :

    Youth is not always, grasp the love

    Copy the code

  • Note:

    • Style is the attribute of the tag
    • Between the style property and the value:
    • Between groups of attribute values;Separated.
    • Only the current tag and the word tag nested within it can be controlled, resulting in code redundancy

  • Disadvantages:

    • No separation of style and structure is implemented
1.2 Internal Style Sheets (Embedded Style Sheets)

  • The basic syntax is as follows:

    Selector (selected tag) {attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; } div { color: red; font-size: 12px; } Duplicate code

  • Note:

    • The style tag is normally located in the head tag, but it could theoretically be placed anywhere in an HTML document.
    • Type =”text/ CSS “can be omitted in HTML5.
    • You can only control the current page
1.3 External Style Sheets (External Chain)

  • The basic syntax is as follows:

    Copy the code

  • Note:

    • Link is a single tag
    • The link tag needs to be placed in the head header tag, and three attributes of the link tag are specified

attribute

role

rel

Defines the relationship between the current document and the linked document, in this case specifying “stylesheet” to indicate that the linked document is a stylesheet file.

type

Define the type of document to be linked, in this case “text/CSS”, to indicate that the linked external file is a CSS style sheet. We can omit them all

href

Defines the URL of the linked external stylesheet file, which can be a relative or absolute path.

CSS selectors are divided into basic selectors and composite selectors:

2. Basic CSS selector

2.1 Label Selectors:

The tag picker can select all of a class of tags such as all div tags and all SPAN tags, but the disadvantage is that it cannot differentiate the styles.

2.2 Class selector:

You can define individual or identical styles for element objects. You can select one or more labels

  • Grammar:

    • Class name selector

      . Class name {attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; } Duplicate code

    • The label

      Copy the code

  • Pay attention to

    • Class selectors use “. (English dot), followed by the class name (custom, our own name)
    • Long names or phrases can be named using a dash for the selector.
    • Do not use pure numbers, Chinese and other names, try to use English letters to express.
2.3 ID Selector:

The element ID value is unique and can only correspond to a specific element in the document.

  • The usage is basically the same as the class selector.

  • The basic syntax is as follows:

    • The id selector

      Attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; } Duplicate codeCopy the code

    • The label

      <p id="id name "></p> Copy codeCopy the code
2.4 Wildcard selector:

Wildcard selectors are represented by asterisks, asterisks are all tags and they’re the broadest of all selectors, matching all the elements on the page.

  • The basic syntax is as follows:

    • {attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }

    Copy the code

For example, the following code, using the wildcard selector to define CSS styles, clears the default margins for all HTML tags, which are usually set at the beginning of a CSS file, but now also use body, both of which can be 😀

* { margin: 0; /* Define the margin */ padding: 0; /* Define the inner margin */} copy the codeCopy the code

Composite CSS selectors

3.1 Descendant selectors

Action: Select an element or a group of children by placing the outer tag first and the inner tag behind, separated by a space, as shown in 👇 (you can select all h3 tags after class) :

3.2 Child element selectors

The child element selector can only select elements that are children of an element. Note that the child element here is simply the parent child 😄, excluding grandchildren, great grandchildren and so on

3.3 Property selector

Example selectors for selecting tags with special attributes:

<div> <input type="text" name="" id="" value="" /> </div> } Duplicate codeCopy the code

As shown in 👆 : at this point we select the content under div with the type attribute equal to text, so the input box changes color.

3.4 Intersection selector

The intersection selector consists of two selectors, the first of which is a label selector and the second is a class selector. There can be no Spaces between the two selectors, such as div.p.

Ex. :

<div class="int"> <span> Intersection selector </span> </div> Copy code div. } Duplicate codeCopy the code

As shown in 👆 : we select an element with a class name int under div, which changes the background color of the element. (Rarely used in general practice)

3.5 Union selector

A union selector (CSS selector group) is a group of selectors connected by commas. Any type of selector (including tag selector, class class selector ID selector, etc.) can be part of a union selector.

One, p, #test {color: #F00; } indicates that. One and p and #test will all execute red.

3.6 Link pseudo-class selectors

Used to add special effects to certain selectors. For example, you can add special effects to links, such as selecting the first or the NTH element.

Because there are many pseudo-class selectors, such as link pseudo-classes, structural pseudo-classes and so on. Link pseudo-class selectors as follows 👇:

  • A :link /* Unaccessed link */
  • A: This is the first time that we have visited China
  • A :hover /* Mouse move to link */
  • A :active /* Selected link */

In actual work development, we rarely write all four states. Generally, we write as follows:

A {/* a is all the links in the tag selector */ font-weight: 700; font-size: 16px; color: gray; } a:hover {/* :hover is a link to the pseudo-class selector mouse over */ color: red; /* Over the mouse, the original gray to red */} copy the codeCopy the code

4. Block level elements

Common block elements include < H1 >~<h6>, < P >, <div>, <ul>, < OL >, <li>, etc., among which the <div> tag is the most typical block element. Copy the codeCopy the code
  • Characteristics of block-level elements

(1) more overbearing, their own exclusive line 📌

(2) Height, width, margins and margins can be controlled.

(3) The width defaults to 100% of the container’s parent width

(4) is a container and box that can release internal or block-level elements.

  • Note:
    • Only text can make up a paragraph, so you can’t put block-level elements in p, especially div
    • The same goes for the tags H1, H2, H3, H4, H5, H6, DT, which are text block-level tags,You can't put other block-level elements in it.

5. Inline elements

Common inline elements include < A >, <strong>, <b>, <em>, < I >, <del>, < S >, <ins>, <u>, < SPAN >, among which the < SPAN > tag is the most typical inline element. Some places copy code as inline elementsCopy the code
  • Characteristics of inline elements:

(1) The elements in adjacent rows are on one line, and multiple elements can be displayed in one line.

(2) The direct setting of height and width is invalid.

(3) The default width is the width of its own content.

(4) Inline elements can only contain text or other inline elements.

  • You can’t put a link inside a link.
  • Special case A can have block-level elements, but it is safest to switch block-level mode for A.

6. Inline block elements

There are several special tags within inline elements -- <img />, <input />, < TD > -- on which you can set width, height, and alignment attributes. Some sources might call them inline block elements. Copy the codeCopy the code

  • Characteristics of inline block elements:

    (1) and adjacent inline elements (inline blocks) are on a line, but there are gaps between them. More than one line can be displayed

    (2) The default width is the width of its own content.

    (3) Height, line height, margins and margins can be controlled.

7. Label display mode conversion display

Block inline: display:inline;

Inline block: display:block;

Display: inline-block; display: inline-block; The < a > element is normally converted to display:inline-block using display

8. CSS background

background-color: transparent; Set the background color to transparent.

Import image: background-image: url(.. /img/index.png); The URL is not quoted.

9. Position the CSS background

Background-position: x coordinate y coordinate;

In general, large background pictures are horizontally centered, not vertically aligned. As shown in 👇 code:

body{ background-image: url(.. /img/sms.jpg); background-repeat: no-repeat; background-position: center top; } Duplicate codeCopy the code

Position of small icon in box:

Background-position: 10px center; The distance on the x axis is 10px, and the y axis is vertically centered

10. Background attachment

Background attachment explains whether the background is scrolling or fixed. The default is scrolling

background-attachment : scroll | fixed

parameter

role

scroll

The background image is scrolling with the object content

fixed

Background image fixation

11. Background shorthand

Background color Background image address Background tiled background Scroll background position

background: transparent url(image.jpg) repeat-y scroll center top ; Copy the codeCopy the code

12. Translucent background

Alpha is the transparency parameter and ranges from 0 to 1

In the work of a wide range of applications, need to bear in mind

<div class="alpha"></div> .alpha{ width: 200px; height: 200px; Background: rgba (0,0,0,0.2); }Copy the code

13. CSS has three major features

Cascading sex

< div> In the Yangtze River, the waves behind push on the ones in front, and the ones in front die on the sand.

Apply two color styles to the text above: the displayed property is black and pink is overwritten.

inheritance

Inheritance means that the child tag inherits the style of the parent tag

<p> </p> </div> div{color: pink; }Copy the code

As shown in 👆, we do not set the style of p under div, but only set the color of the parent tag div to pink. In this case, P inherits the style of the parent element div, and the color will also be pink

Priorities

Label selector

Formula for calculating weight

Inheritance or *

0,0,0,0

Each element (label selector)

0,0,0,1

Every class, pseudo class

0,0,1,0

Each ID

0,1,0,0

Style =””

1,0,0,0

Each! Important important

Up infinity

Weight calculation example:

  • Div ul li ——> 0,0,0,3
  • Nav ul li ——> 0,0,1,2
  • A: hover — — — — — – > 0,0,1,1
  • The nav a — — — — — – > 0,0,1,1

One thing to note here is that inheritance has a weight of 0

To modify the style, be sure to see if the label is important to hin

1) If selected, use the formula above to calculate the weight. Who listens to who.

2) If not checked, then the weight is 0, because the inherited weight is 0.

This one seems so simple that it’s easy to get confused. Let’s look at the following example: 😄

At this time, we need to determine the style of the content of the p element. P inherits the style of the parent element, but the weight of the inherited element is 0, and the weight of the tag is 1. In addition, since the P tag is not selected, it will show the style of the tag.

If the p tag is selected, the id+ tag selector has a weight of 0101, which is greater than the p tag's weight of 0001, so it appears pink

There is a set of comprehensive problems below, can check whether to master this knowledge point ha

As shown in 👆, what color will the text display? CSS weights are 0021,0101,0101, which excludes blue,

If the second and third weights are the same, we will adopt the principle of proximity, and pink is closer to each other, then the style in the figure above will be displayed as PINK. If the CSS style positions of yellow and PINK are switched, it will be displayed as yellow.

And here’s another one that’s really confusing,

A lot of times, we see a! Important will naturally feel the highest weight, so the above text will be shown in green, but it is not correct.

In the first step, we need to see if the text is selected. If it is not selected, it is inherited, and the weight of inheritance is 0. We can see that the first three text are selected, but the last one is not selected, so we exclude green, green, the weight of the first three are: 0200,0111,0022, so the color should be blue. It’s very important not to confuse

14. Box Model (EMPHASIS on CSS)

The box model consists of the element’s content, border, padding, and margin.

Inner box size calculation:

  • The width of the

    Element Height = content Height + padding + border

  • highly

    Element Width = content Width + padding + border

  • The actual size of the box = the width and height of the content + the inside margin + the border

Below we we through this problem to calculate the actual width and height of the box, refueling 😉

div {

	width: 200px;

        height: 200px;

	border: 1px solid #000000;

	border-top: 5px solid blue;

	padding: 50px;

	padding-left: 100px;

     }
Copy the code

Do you guys have any results? Let’s break them down.

Actual width = Width (200px) + border (2px) +padding (50px) +padding-left (100px) = 352px.

Actual height = height (200px) + border (1px) + border-top (5px) + padding (100px) = 306px.

The left inner margin is set to 100px separately, so the inner margin inside the width is 150px. In the same way, when calculating the height, the border is the same as 6px.

15. Block level boxes are horizontally centered

A block-level box can be horizontally centered:

  • Box must specify width
  • Set the left and right margins to Auto

In practice, this method is commonly used for web page layout, and the sample code is as follows:

.header{ 
       width:960px; 
       margin:0 auto;
}
Copy the code

The common way to write it is to write it in any of the following three ways.

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

16. Three mechanisms for CSS layout

Normal flow

Block-level elements have an exclusive row and are arranged from top to bottom;

- Common elements: div, HR, P, H1-H6, ul, OL, DL, form, table Copy codeCopy the code

The elements in the line are arranged in order, from left to right, and wrap when the edge of the parent element is touched.

- Common elements: SPAN, A, I, em, etcCopy the code
floating

The main value of floating is that multiple block-level elements can be displayed in the same row.

Element float is when the element with the float attribute is set

  1. Out of control of standard normal flow
  2. Moves to the specified position.

Selector {float: property value; }

Attribute values

describe

none

Elements do not float (default)

left

Element floats to the left

right

Element floats to the right

The core purpose of our float is to have multiple block-level boxes displayed on the same line. This is also one of the most common layouts we use

A complete web page, is the standard flow + float + positioning complete together.

The float only affects the current or subsequent standard flow boxes, not the preceding standard flow boxes, each standard flow in a separate row.

If there are multiple boxes in a box, if one of the boxes floats, the other brothers should float as well to avoid causing other problems.

Here we look at the following 👇 several cases:

The following div constructs do this:

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>
Copy the code

When box A floats and box B floats, boxes A and B are displayed on the same line. When box A doesn’t float and box B floats, box A is the standard document flow, which is very bossy, it occupies a single line, so box B will follow box A’s reference, box B floats.

Remove the floating

Why should we clear the float ❓

In many cases, it is not convenient to give the height of the parent box, but the child box floating does not occupy the position, notice oh, floating box does not occupy the position. Finally, the parent box height is 0, which affects the standard stream box below, which overlays the intended content.

  • Conclusion:
    • Since the floating element no longer occupies the place of the original document flow, it has an impact on subsequent element typography
    • Not exactly clearing the float, butClear the impact caused by floating.

Clearing floats is mainly to solve the problem of the parent element having an internal height of 0 due to child floats. Once the float is cleared, the parent automatically detects the height based on the float’s child box. The height of the parent does not affect the standard flow below.

Method to clear the float

As shown in the figure below, if the height of the parent element nav box is not set and all the children are set to float, the child element will float outside the normal document flow. The height of the parent element is: 0, which affects the normal document flow, so we will clear the float at this time.

Use this example as a reference for the four ways to clear floats shown below at 👇

1. Extra label method (partition method)

Note that the floating element refers to the last element of the float

The W3C recommends doing this by adding an empty tag at the end of the float element such as < div style= “clear:both” >< /div>.

2. Parent add overflow property method

Can give the parent add: overflow for hidden | auto | scroll can be implemented.

We usually add: overflow: hidden after the parent element style.

Disadvantages: When the content increases, it is easy to cause that the content is not wrapped automatically, so that the content is hidden, and the elements that need to be spilled cannot be displayed.

3. Clear float with after pseudo-element

This approach has more code, but it doesn’t change the structure of the HTML

:after is equivalent to adding a new tag with CSS after the structure.

/* Declare the style of clearing float */. Clearfix :after{content: ""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix{ *zoom:1; /* Ie6, 7 specifically clears float styles */}Copy the code

4. Use double pseudo-element to clear float similar to the third method, insert a box in front and behind the box

.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } Duplicate codeCopy the code
Scenarios where floats need to be cleared:

Clear float said so much, that we when what need to clear float 😄, the following is the need to clear float scene

  1. The parent element has no height
  2. The child element box is floating
  3. Affects the layout of the following elements

Reprinted from juejin. Cn/post / 684490…