1. Display: None, opCity: 0, visibility: hidden

All three can hide elements, the difference being:

features display: none visibility: hidden opcity: 0
Occupy the space Does not take up space, modification will cause rearrangement redraw Take up space, element is invalid, modify only redraw Take up space, elements transparent, modify only redraw
Child node inheritance No inheritance, no child element exists Inheriting, you can make the child element visible by setting the child element visibility:visible Inheritance, but it cannot be redisplayed by setting opacity: 0 as a child
event Element does not exist and cannot be fired Unable to trigger Can trigger
The transition animation Element does not exist, setting is invalid invalid effective

PS:

  • Reflow: When part (or all) of a page needs to be rebuilt due to changes in element size, layout, hiding, etc. This is called backflow (some might call backflow rearrangement or rearrangement). Each page needs to be refluxed at least once, the first time the page loads
  • Repaint: When some elements on a page need to update their properties, such as background-color, which only affect the appearance and style of the elements but not the layout.
  • Other methods to hide elements
    • Set the position attribute to Fixed (absolute, relative), and set left and top with sufficient negative distances
    • Use the cascading z-index to place the element at the bottom;
    • Set hight: 0 and overflow: hidden;
    • Text-indent: -9999px hides the text.

2. BFC

2.1 define

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements.

2.2 rules

  • The internal boxes are placed vertically, one after the other.
  • The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.
  • The left outer border of each box is immediately adjacent to the left border of the containing block, even for floating elements.
  • The region of the BFC does not overlap with the float box.
  • A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements and vice versa.
  • When calculating the height of the BFC, the floating child element also participates in the calculation.

2.3 create

  • ⭐ ️The root element (<html>)
  • ⭐️ Float element (float of element is not None)
  • ⭐️ Absolute position element (element position is absolute or fixed)
  • ⭐️ Overflow Computed values (Computed) are not visible block elements
  • ⭐️ inline block elements (display of elements is inline-block)
  • ⭐️ Table cells (display for elements is table-cell, default for HTML table cells)
  • Table title (display element as table-caption, HTML table title default to this value)
  • Anonymous table cell elements (element display is table, table-row, table-row-group, table-header-group, table-footer-group) (HTML, respectively Default properties for table, row, tBody, thead, tfoot) or inline-table)
  • The element whose display value is flow-root
  • Contain an element whose contain value is Layout, Content, or paint
  • ⭐️ Elastic elements (display is a direct child of flex or inline-flex elements)
  • Grid elements (display is grid or a direct child of the inline-grid element)
  • Multi-column containers (elements with column-count or column-width (en-us) not auto, including column-count 1)
  • Column-span elements for all always create a new BFC, even if the element is not wrapped in a multi-column container (standard change, Chrome bug).

2.4 use

  1. Fixed float element causing parent element to collapse highly

Height collapse occurs when we do not set the height of the parent node and float the child node. When calculating the height of the BFC, the floating child element is also involved. So floats can be cleared by enabling BFC for the parent node.

  1. Two column adaptive layout

Using the principle that the BFC area does not overlap with the float box, the left side is fixed width, and the right side is BFC enabled.

  1. Vertical overlap of margins

This problem is because the margins of two adjacent boxes belonging to the same BFC will overlap. One of the boxes can be wrapped with a separate layer of BFC Box.

3. The display value

  • None: This element will not be displayed.
  • block: This element will appear as a block-level element.
    • Always on another line
    • You can set its width, height, inside and outside margins
    • Without manually setting the width, the width defaults to 100% of the container it is in (that is, the width of the container)
    • It can hold inline elements and other block elements
  • inline: the default. This element is displayed as an inline element, with no newlines around it.
    • Always on the same line as the adjacent inline element
    • Width and height Settings are invalid. Horizontal padding and margin attributes can be set, but vertical attributes are invalid
    • The default width is the width of its own content
    • Inline elements can only hold other inline elements or text
  • inline-blockInline block elements combine the different characteristics of block elements and inline elements.
    • And adjacent row elements on the same line, but there are gaps between them
    • The default width is the width of its own content
    • Width, height, line height, margins, and margins can all be set manually

4. The position value

  • Static (default) : Always in the position given by the document flow. It may seem useless, but it can quickly unlocate and invalidate the values of top, right, bottom, and left. Try this method when switching with JS.
  • Relative: Based on the default position offset of elements in a normal document flow.
  • Absolute: out of standard document flow, does not occupy space position, does not split parent, sets top, right, bottom, left to be relative to the first non-static parent element.
  • Fixed: Out of the standard document flow, set the values of top, right, bottom, and left to be relative to window elements.

Note:

  • Z-index only works when the values are set to static.
  • Many of the effects on the page are relative and absolute.

5. The element is centered

Horizontal center

  • Inline elements:
.father { text-alain: center }
Copy the code
  • Fixed width block element:
// marginSet toauto
.son { margin: 0Auto} // usepositionNegative positioning, parent elementpositionSet to relative.son {
    width: 100px;
    position: absolute;
    left: 50%; // Width of the parent element50%
    margin-left: -50px; // Negative half of the child width} // usepositionPositioning +marginSet, parent elementpositionSet to relative.son {
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
Copy the code
  • Block elements of unfixed width
/ / usepositionNegative positioning, parent elementpositionSet to relative.son {
    position: absolute;
    left: 50%; // Width of the parent element50%
    transform: translate(-50%.0); // Negative half of the child width} //flexLayout, can be flexibly used to center multiple block elements.father {
    display: flex;
    justify-content: center;
}
Copy the code

Vertical center

  • Single line, fixed parent height:
.son { line-height: 100px} // The row height is equal to the parent heightCopy the code
  • Fixed height block elements:
/ / usepositionNegative positioning, parent elementpositionSet to relative.son {
    height: 100px;
    position: absolute;
    top: 50%; // Height of the parent element50%
    margin-top: -50px; // Negative half of the height of the child element} // usepositionPositioning +marginSet, parent elementpositionSet to relative.son {
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
Copy the code
  • Unfixed high block elements
// Use pseudo-elements.father::after..son {
    display: inline-block;
    vertical-align: middle;
}
.father::after {
    content: ' ';
    height: 100%; } // Take advantage of the table property, the parent elementdisplaySet totable
.son {
    display: table-cell;
    vertical-align: middle; } / / usepositionNegative positioning, parent elementpositionSet to relative.son {
    position: absolute;
    top: 50%; // Height of the parent element50%
    transform: translate(0, -50%); // Negative half of the height of the child element} //flexLayout, can be flexibly used to center multiple block elements.father {
    display: flex;
    align-items: center;
}
Copy the code

6. The flex layout

Specify the container as a Flex layout by setting the display property value to flex or inline-flex.

Container attribute

  • Flex – direction: the direction of the spindle, the orientation of the project, the row (spindle level, to the right) | row – reverse order (spindle level, to the left) | column (vertical spindle, downward) | column – reverse (spindle vertical direction)
  • Flex – wrap: wrap, nowrap (not a newline) | wrap (below the line, new rows) | wrap – reverse (a newline, new in above)
  • Flex-flow: short for flex-direction + flex-wrap, default row nowrap
  • The justify – the content: the main shaft on the alignment of the project, the flex – start | flex – end | center | space – between | space – around
  • The align – items: cross shaft alignment, flex – start | flex – end | center | baseline | stretch
  • The align – content: root axis alignment, flex – start | flex – end | center | space – between | space – around | stretch

The project properties

  • Order: Order of items. The smaller the value is, the more advanced it is. The default value is 0.
  • Flex-grow: Magnification of the project. Default is 0, that is, no magnification if there is free space.
  • Flex-shrink: The scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
  • Flex-basis: The main axis space that the project occupies before allocating extra space, overwriting width or height. The value is length or percentage. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
  • Flex: short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto. The last two attributes are optional.
  • Align-self: Allows a single item to have a different alignment than other items, overwriting the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Flex value

Flex values flex-grow flex-shrink flex-basis meaning
The default 0 1 auto Do not enlarge can be reduced, allocate extra space before the original size of the project default
auto 1 1 auto Can be enlarged can be reduced, allocate extra space before the original size of the project default
none 0 0 auto Do not zoom in, do not shrink, allocate extra space before the project default size
1 1 1 0% It can be enlarged or reduced, and the project does not occupy the main axis space before allocating extra space
n n 1 0% A non-negative number, n represents the value of flex-grow, which does not occupy the main axis until extra space is allocated
n m n m 0% If n m indicates the value of flex-grow flex-shrink, the item does not occupy the main axis space until the extra space is allocated
L 1 1 L Length or percentage, L represents the value of Flex-basis
n L n 1 L A non-negative number, a length or percentage, then n L represents the value of flex-grow flex-basis

reference

  1. Display: none, visibility: hidden and opacity: 0
  2. Understand the BFC of the CSS at one time
  3. Flex layout syntax tutorial