Selector priority

Selectors can be divided into:

  • 1. Four major selectors: ID selector, class selector, label selector, wildcard selector.
  • 2. Relation selector: descendant selector (DIV P), descendant selector (div> P), sibling selector [DIV + P,div~ P], intersection selector, union selector
  • 3. Sequence selector:

Selector priority (high to low) :

  • 1.! important
  • 2. Inline style 1000
  • 3. Id selector 100
  • 4. Class selector, pseudo-class, attribute 10
  • 5. Tag, pseudo element 1
Method: m = number of id selectors *100, n = number of classes, attributes, pseudo class selectors *10, I = tag, pseudo-element selector *1M +n+ I Whoever is bigger will use the style of the one who is nearestCopy the code

Pseudo classes and pseudo elements

  • The biggest difference: whether to create elements

  • Pseudo class: to make up for the lack of a selector, add a class to add some styles to the element.

For example, if I add a background color of red to the odd line of the Li tag, the effect of the mouse click, the effect of the mouse on it,

  • A pseudo-class is a selector followed by the pseudo-class name, separated by a colon (:).

  • Pseudo-elements: Essentially create a virtual container with content; Used to add special effects to certain elements. For example, adding a magnification effect to the first text at the end of a line can be used as an element. Pseudo-elements can be either “:” or “::”

//1:link Unvisited node, usually used with a tag :visited visited node, usually used with a tag :hover node :active Currently selected node :first-child first child ([see more about sequence selector]) (HTTPS://juejin.cn/post/6960999913409019918#heading-14)):last-child Last child node :enabled Enabled element, commonly used in forms: Focus Currently taken focus element: Checked checked element, commonly used in forms Checkbox element: Disabled Disabled element, commonly used in forms//2. Common pseudo-elements::before inserts new content before ::after inserts new content after ::first-letter text first letter. Often used to style the first letter of text ::first-line The first line of text. Often used to style the first line of text. Only for block-level elements. ::selection Selected content. Often used in text. ::placeholder. The style used to set the placeholder.Copy the code

Three features of CSS

portal

Block element, inline element, inline block element

A block element

  • Exclusive row, adjustable width and height (content by default), used for layout
  • div p h form ol ul li menu table

Inline elements

  • The width and height cannot be set. The left and right margin+padding can be set. Only text and other inline styles can be placed
  • a span img input button label textarea select
  • Inline elements have default spacing:
    • 1. Reset font – direct parent Settings for inline elementsfont-size:0px;
    • 2. HTML comments – You can also fix this by adding HTML comments between two line elements to tell the browser that the middle is not a line break or a space, but is joined together.

Inline block elements

  • Do not monopolize a line, can set the width and height, default spacing
  • Disadvantages: Gaps between adjacent line blocks (Gap causes: When an element has the property of a line element, the whitespace between elements is parsed. The carriage return line feed is parsed into a single whitespace, which takes up a certain width if the font is not zero, and the spacing varies with the font size)

Box collapse occurs when the number of lines of text inside the box is inconsistent

  • Margin-left: -10px; Font-size: 0; (Can cancel the gap, but will affect the font size of other elements in the parent element box)

Background element

background-clip: border-box;//(default) Clipping background, can go to outer border, inner border, content
background-image: url();// Set the background image
background-repeat:repeat; // By default, tiling is required both horizontally and vertically1. A) background-position B) horizontal// Background image location
Copy the code

The box model

  • The box model includes margin, border, padding and content.

Margin

  • Margin is to control the distance between adjacent boxes. If margin is set, the margin will be folded, that is, the larger one is the dominant one.

Margin application: * The child box is centered —– the child element is centered on the parent element, and margin is set above and below (parent – child) /2; Margin is auto, but setting margin for the child will cause the parent element to collapse, so set overflow: hidden for the parent element; Or set the border attribute to the parent element

  • —- (1) for the left and right margin, if the element itself has no width, the margin negative value will increase the element width; If the element itself has width, it will shift; Margin-left: negative left; (2) Margin-top is negative, regardless of whether the height is set, it will not increase the height, but will produce upward displacement; (3) When margin-bottom is negative, it will not shift, but will reduce its CSS reading height.
  • Font-size :0; font-family: arial, sans-serif;

Border border

  • Border: width of the border style of the border color of the border;
  • Border-radius: left upper right upper right lower left lower;
  • The ⚪ –border-radius: 50%;
  • Draw the ring – set the border and thenborder-radius: 50%;
  • Draw ellipses – turn them into long boxes andborder-radius: 50%;

Fill in the padding

  • The distance between the content and the border, set using the padding; It is suitable forAll the elementsAnd the value can only be positive.
  • Background extends to the inner margin region by default;
  • The purpose of an inside margin is to separate the content from the border, so if you add a border, it’s usually better to add some inside margin;

. The content of the content

Standard box model and weird box model

// Width =w+padding+border
box-sizing: content-box;/* Default */Width = width + padding + border; Height = height + padding + border; ！！！！！！ The top border is a compound property and writing 50px is invalid and will make the top border non-existent// weird joint model; Width = = = widthbox-sizing: border-box; Width = width; Height =height; Border-box tells the browser that the border and margin values you want to set are contained within width.Copy the code

Float for layout 1

Floating flow is a semi-detached typesetting method from standard flow. If you have two block-level boxes, and the first one floats left, the second box will run underneath the first, and the contents of the second box will not be covered by the first box, but will surround it. Float was also designed to surround images;

  • Only left float, or right float, is placed along the left or right side of its parent container.

Configuration rules

When an element floats left, it is moved out of the normal document flow and then shifted left until it hits the border of the container or another floating element. Until the container is full (or full), then move to the next line.

  • (1) Who floats first in the same direction, who is in front;
  • (2) different directions on the left floating to find left floating, right floating to find right floating;
  • (3). There are three floating boxes, the first two left float, the third right float, float if the first second is not displayed in a row, the third and the second float in a row on the right;

Performance after float

1. Semi-de-scaling — will be separated from the document flow, floating, equivalent to forming a new plane; But at the same time, create a special area that allows only other non-floating flow elements to enter the space (consume width and height) and does not allow text entry to be obscured by floating elements.

2. Word boundaries – floating elements will not block the text in the elements that are not floating, and the text that is not floating will automatically give space to the floating elements. This is the phenomenon of floating element word boundaries;

1. If the width of the parent element can display all the floating elements, the floating elements will be displayed side by side (the total width of the floating box is less than or equal to the width of the parent box); 2. If the width of the parent element is not enough to display all the floating elements, it will start from the last element (already floating) and lean forward until it finds the parent box. 3. If all the floating elements above are not displayed, it will end up to the left or right of the parent element.

Remove the floating

The main reason for clearing floats is to solve the problem of the parent element having an internal height of 0 due to child floats.

  • 1. Extra tag method — Just add an empty tag to the end of the parent elementclear: both;;
  • 2. The parent add overflow trigger landing – overflow for the hidden attribute method | auto | scroll can be implemented. Can clear float, but also overflow hide.
  • 3. After floating – Write the following classes, then add a class to the parent element that needs to be cleared. This works by finding the element that has the ClearFix class, adding an empty block-level element at the end of its content, and then adding an attribute that clears floats to the block-level element.
      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
Copy the code
  • 4. Set at the end of the parent element<br clear="all" />
  • 5. Set the parent elementdisplay:table

Location of web layout 2

The position attribute is used to specify the position of an element on a web page. There are five different positioning methods: absolute positioning, relative positioning, fixed positioning, sticky(sticky), and static (default).

Relative positioning

Relative positioning is to move relative to one’s previous position in the standard flow (static position); It must be used with the top, bottom, left, and right attributes to specify the direction and distance of the offset. left:30px; The box moves 30px to the right based on the left of the box. If it’s negative, it moves to the left.

  • It does not deviate from the standard flow, it will still take up space in the standard flow position, after moving the position may cover the same box. But just because we don’t leave the standard flow, we add the location directly, we don’t have a problem, we position as the parent container.

Application: Fine tuning elements, such as moving them slightly after clicking, or making reference elements for absolute positioning.

Absolute positioning

Absolute positioning refers to the positioning of the nearest parent element that has the positioning attribute. Elements with absolute positioning can be positioned using the legt, right, top, bottom orientation attributes relative to the parent reference.

  • 1. Deviating from standard flow.
  • If an absolutely positioned element uses the body as a reference point, then the width and height of the first screen of the page are used as reference points, not the width and height of the entire page.
  • The padding of the parent element is ignored for positioning.
  • Child absolute parent: Child element is positioned in absolute and parent element in relative position.
  • How do I center absolutely positioned elements horizontally? Just set the left of the absolute positioning element :50%; Then set the absolute positioning element’s margin-left: – half the width of the element px; / or transform: translateX (50%); It’s moving half of itself to the left

Fixed position

Offset with respect to the viewport (browser window), that is, the positioning point is the browser window. This results in the element’s position not changing as the page scrolls, as if it were fixed to the page. Top, bottom, left, right.

  • Fixed positioned elements are detached from the standard flow and do not occupy space in the standard flow, so there is no distinction between in-line/block-level/in-line block level.

Sticky (location of adhesion)

Elements can be fixed to the location specified on the page, but are not always fixed there.

  • The positioning position can be set using the top, bottom, left, and right attributes, but this position is a threshold value, meaning that the element will not be fixed until it reaches this threshold.
// The current element is fixed when the distance from the top is 0
        position: sticky;
        top: 0px;
Copy the code

Z-index attribute (controls visibility of positioned elements)

The z-index attribute is specifically used to control the coverage relationship of location flow elements. The default is 0.

  • 1. By default, elements of the location stream override elements of the standard stream;
  • 2. By default, the element written after the location stream overwrites the element written before it
  • 3. If the element of the location stream has z-index attribute set, the element whose Z-index attribute is larger will be displayed above.
  • The parent phenomenonIf the parent element of two elements has z-index set, the z-index of the child element will be invalid. That is, the one whose parent element has a larger Z-index will be displayed above.

Cascading context

Stacking context, a three-dimensional concept in HTML, equivalent to the Z-axis, is used to control the display priority of stacked elements. If an element has a cascading context (i.e., it is a cascading context element), we can understand that the element is “superior” on the Z-axis, which ultimately means that it is closer to the viewer on the screen.

  • The z-axis arrangement of the same stack context elements:

Background or border < Z-index negative < block-level element < floating element < in-line, in-line block element < position Z-index :auto/0 < position Z-index positive

Flex layout for web layout

The parent element sets display:flex to activate the elastic container, and the child element becomes the elastic element. The default properties are as follows:

flex-direction: row; // The main axis runs from left to right.justify-content:flex-start; // Subboxes are arranged from the beginning of the spindle to the end.flex-wrap:nowrap; / / not a newlineflex-shrink:1; / Elements do not stretch in the main dimension, but can shrink.align-items: stretch; // The element is stretched to fill the cross axis size. Child elements do not set heightCopy the code

Set spindle –flex-direction

flex-direction:row ;/* The default starting point of the main axis is left, from left to right */
 flex-direction: column;/* Top to bottom layout */
Copy the code

Spindle alignment (alignment of elements on spindle) –justify-content

/*(initial value); Elements are arranged from the start line of the container. (end of spindle overflows) */
justify-content:flex-start;

/* All child elements are uniformly arranged in the middle, and the left and right divide the extra space (from the main axis and overflow from the end) */
justify-content:center;

/* Align the left and right boxes to the beginning and end of the spindle, then divide the remaining space so that the spacing is equal (the end of the spindle overflows) */
justify-content:space-between;

/* to make the left and right Spaces of each element equal. The middle one does not fold but accumulates (from the main axis to the end) */
justify-content:space-around;

/* Each spacing has the same length and will fold (overflow from the main axis to the end) */
justify-content:space-evenly;

Copy the code

Alignment on the side axisalign-items

  • The align – items are definedAll single row elementsAlignment on the side axis, while the align-self property sets the alignment of a single elastic element.
  • If you set line breaks, you need to control the alignment of all elements on the side axis of multiple linesalign-content
/* Single-line elements (without newlines) aligned on the side axis */
align-items: flex-start | flex-end | center | stretch;

/* Multiple line elements (set newline) aligned on the side axis */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

/* The alignment of a single element element on the side axis */
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
Copy the code

Flex child attributes

  • 1. The flex property is a number indicating how many copies of the current item are in the parent container.
flex:1, // Give only one child to the current row, indicating that the current item occupies the remaining empty room of all the parent elements // If all children are set, the same Flex property, indicating that they are split.Copy the code
  • 2. Does flex-shrink mean shrink
flex-shrink:0; // Indicates no contractionCopy the code
  • 3. The order of attributes

The order attribute is used to change the display order of a single elastic element. The default value is 0.

  • Div can be placed in front of the most important items, and order can be placed in the middle of the display
.item {
  order: <integer>;
}
Copy the code

CSS two-column layout (left constant width + right adaptive)

  • Method 1: Float layout + Margin
  • Method 2: both the left and right boxes are positioned as, the left of the right box is positioned as the width of the box, the right is 0, and stretch
  • Display: flex; display: flex; Set the right adaptive flex:1; This is equal to 100%- left constant width.

Three column layout

1. Grail layout method

Grail layout – fixed width left and right, adaptive three-column layout in the middle, but with the adaptive part loaded first.

  • Step 1: Set the left float for both.
  • Step 2: Fill the parent box and squeeze the middle box
  • Margin-left: 100%, which means that the left box moves 100% of the middle box to the left. Align the left box with the middle box (the position is its position in the standard flow). Then position the left box relative to the left and move the size of the inner fill width to the leftleft: -132px;
  • Step 4: move the right box to the left (margin-left:-130px), then position it to the left (margin-left: 132px;).

2. Double-flying wing layout method

The double wings layout was first proposed by taobao team, which is an optimized solution for the holy Cup layout. A sub-container is set in the middle adaptive box to optimize the opening and positioning of the Grail layout.

  • 1. Add a cover for center, set the width of the cover to 100%, and set the left and right margin for center.
  • 2. Left box, coat, right box set left float
  • 3. Left box moves 100% of parent container left (margin-left: -100%;)
  • 4. The right box moves its width to the left

3. Use Flex

Parent box open the elastic box model, child adaptive box Settings Flex :1; All the remaining space in the row is occupied, and the minimum order value can be added if the adaptive box needs to be loaded first.

4. Use Position

Set margin value for the middle box and squeeze the middle box

Equal layout plus space

1. The float + margin negative

  • 1. Set the percentage width of the child element, float all left, add a left border line, and open the weird box model
  • 2. The parent element takes the negative value of margin-left and moves it to the left, hiding the first border line. Note that you cannot set the width of the parent element, even 100%
  • 3. Clear float — Find an element of class XXX and add a block-level empty element after its content with the property clear: both

2.flex

  • 1. Parent element display: flex; Child element flex: 1;
  • 2. Set the child element to border-left and open the weird box.
  • 3. The parent element margin-left is negative and moves to the left

Centered layout

Horizontal center

  • 1.text-align:center; Text-align :center; Horizontal center can be achieved if the child elements are inline elements, inline block elements, text.
  • 2. A single block-level element (sub-fixed width) is horizontally centeredmargin:0 auto;
  • 3. Multiple block-level elements are horizontally centered: parent element + text-align:center, child element changes to inner block.
  • 4. Positioning (no need for width and height) : the child has no parent phase, the child left is half of the width and height of the parent element (50%), and moves 50% in the opposite direction (use margin negative or deformation).
  • 5. Use Flex, Center for any element

Vertical center

  • 1. For single-line text/in-line element/in-line block-level element: height equals line height; Multi-line text/in-line element/in-line block level element line height: equal to height/ number of lines.
  • 2. The positioning
  • 3.flex

Horizontal and vertical center

  • 1.margin: 100px auto;Margin: sub-height – sub-height ➗2; Left and right adaptive, then the parent box overflow: hidden;
    1. Padding - left and padding - topThe parent box sets a direction of the inner fill, and adds a weird model. (Must know all width and height)
  • 3. Parent localization — the child elements left and top are positioned 50% of the width and height of the parent box, and then the child box moves half of itself backward, using transition or margin negative value.
  • 4. Positioning +margin: auto—- The child must be the parent phase, the four orientation of the child is 0, and the margin is set to auto
  • 5. Flex sets the two-axis axis to center