Document flow and box model

  • Box models are generally divided into Content-box and border-box, and the specific structure is shown in the figure below.

  • The general principle of margin combination is:

    1. Margin merges only when there is no border or padding between margin;

    2. Son and father, son and son (brother), merge up and down, not left and right;

    3. Margins of inline-block elements do not overlap and margins do not merge. This can be used to eliminate margin merging of sibling elements.

    4. Add overflow: Hidden on the parent element; Margin merges that eliminate parent-child elements

    5. In the display: flex; In style, the margin of the parent element is not combined;

  • The document flows from left to right (inline) and from top to bottom (block), inline is squeezed until the end of the line before a line is broken. Inline-block does not cross lines and is left to right, but does not cross lines. The height and width of elements are calculated as follows:

    1. The inline element width is the sum of the internal inline child elements width and cannot be specified by width. The height of an inline element is determined indirectly by line-height, regardless of the height attribute.

    2. The width of a block element is calculated automatically by default and can also be specified using the width attribute. The height of the block element is determined by all the internal document flow elements, and can be set;

    3. Inline-block is defined by width and height. If width and height are not set, width is calculated as an inline element and height as a block.

  • A way out of the document flow

    1. float

    When an element is set to float, it is removed from the document flow and other elements surround float’s elements.

    1. position:absolute/fixed

    See “About Positioning” below for details

  • About the position

Positon: staic (default) /absolute (absolute position) /relative (relative position) /sticky

Position: Absolute Allows the element to be absolutely positioned and removed from the document flow. The position base is the element whose position value is not STaic, and if it cannot be found, the element is ultimately referred to the HTML element. It can be used together with z-index

Position: fixed Sets the element to a fixed position, usually based on viewpoint. But there are some exceptions

The position:relative element does not change the actual placeholder, only the display position. Generally used for displacement, and for absolute positioning of the parent element

Position: sticky sticky positioning, try to avoid using on mobile phones, there are various complex bugs

Cascading context

A cascading context is a three-dimensional representation of HTML elements laid out along an imaginary Z-axis relative to the user, assuming the user is facing a window or web page. All HTML elements occupy this space in order of priority based on their element attributes.

A cascading context in a document is formed by an element that satisfies any of the following criteria:

  • Document root element (< HTML >);

  • Elements whose position value is absolute or relative and z-index value is not auto;

  • Elements whose position value is fixed or sticky;

  • Z-index is not auto for all elements;

  • Elements whose opacity property value is less than 1;

  • Elements whose mix-blending-mode attribute is not normal;

  • Any of the following elements whose attribute value is not None:

    • transform
    • filter
    • perspective
    • clip-path
    • mask/mask-image/mask-border

  • Isolation element with attribute value of ISOLATE;

  • -webkit-overflow-scrolling for elements in touch;

  • The will-change value sets any property that, at non-initial, creates elements of the cascading context;

  • Contain elements that contain layout, paint, or any of them (e.g. contain: strict, contain: Content).

The z-index value of the child cascading context is meaningful only in the parent. The child cascade context is automatically treated as a separate unit of the parent cascade context.

A cascading context can be contained within other cascading contexts and together create a hierarchy of cascading contexts. Each cascade context is completely independent of its siblings: only child elements are considered when dealing with cascades. Each cascade context is self-contained: when the contents of an element are cascaded, the element as a whole is cascaded sequentially in the parent cascade context. The hierarchy of the cascading context is a child of the HTML element hierarchy, because only certain elements create the cascading context. It can be said that elements that do not create their own cascade context are assimilated by the parent cascade context.

Considering the cascading context and box model, the order from near to far is: Elements with positive z-index (from large to small) → z-index=0 → inline child elements (including text, etc.) → floating elements → block-level child elements → border → background → elements with negative Z-index → HTML; If the Z-index values are the same and the priorities are the same, the latter overwrites the former.

  • The value of z-index must be managed carefully. Do not use z-index=9999
  • The default z-index value is auto, which is different from 0.

CSS layout

  • Layout principles
Graph LR start --> conditionA{compatibility with IE9? ConditionA -- YES --> conditionB conditionA -- NO --> conditionB ConditionB -- YES --> conditionB -- NO --> conditionB -- NO --> conditionB

Float layout

Float layout is implemented by adding float and width to the children and.clearfix to the parent;

The code for. Clearfix is:. Clearfix ::{content: “; display:block; clear:both; }

The child element is removed from the document flow by adding float and cannot be wrapped by the parent element, and the parent element can be rewrapped by the child element by adding.clearfix

Layout points:
    1. To leave some space, or to leave width unset for the last child, you can set max-width
    1. There is no need to be responsive. There is basically no Internet Explorer on the phone. This layout is for Internet Explorer
    1. Ie6/7 has a double margin bug, the margin can be halved or add a margin statement, for examplemargin-left:10px; margin-left:5px;Other browsers ignore subsequent statements, and IE6/7 overwrites previous statements with subsequent statements
    1. If there are extra wireframes under the picture, addVertical - align: top/middle;
    1. Pixels are the smallest unit, so odd and even pixels cannot be perfectly aligned
    1. margin:0 auto;Compared to themargin-left:auto; margin-right:auto;May cover the upper and lower margins, so the latter is better;
    1. The block element, if it has a fixed width, can passMargin - left: auto; Margin - right: auto;Set center;
    1. Generally speaking, the margin of the last child element will affect the visual effect. You can add a div between the child element and the parent element. Setting a negative margin for this div can eliminate the margin effect of the last child element without affecting the width of the outer parent element.
    1. Do layout, usually choose a fixed width layout on the PC, choose variable width layout on the mobile phone

Flex layout

. Container +items to implement flex layout. Container {display:flex/inline-flex}; container {display:flex/inline-flex}; Add the parent element to the container statement to make a Flex container. Flex displays objects as elastic expansion boxes; Inline-flex: Displays an object as an inline block expansion box. When the FlexBox container has no width limit, when display is specified as Flex, the width of FlexBox fills the parent container. When display is specified as inline-flex, the width of FlexBox wraps the child Item.

Attributes of a Container:
  1. Flex-direction: indicates the flow arrangement of items in Flex. The default value is row. The value can be row/column/row-reverse/column-reverse. Flexflow is an elastic box model document flow. Different from normal-flow, flex-direction and flex-wrap are used to set the flow direction. The default spindle is X-axis. Changing the flex-direction will change the spindle direction.
  2. Flex-wrap :wrap/nowrap. The default value is nowrap.
  3. Context-content, when the space of the elastic box is not fully utilized, the space allocation method in the main axis is set. Finally, you can take the flex-start/flex-end/center/space-between/space-around/ space-instituted; The default is flex-start, where item is squeezed in the direction of start; Space-between means that the space is evenly distributed, and the item is placed on both sides of the box. Space-around allocates space equally to items, with the left and right sides of each item allocated equal space (without overlapping each other). The space-instituted is equal space between items, but the item doesn’t sit on both sides of the box;
  4. The align – items set shaft alignment, can flex values – start/flex – end/center/strech/baseline; The default value is strech. If height is not set, items will be aligned towards both ends of the box’s sub-axis (items may be stretched).
  5. When multiple items exist and the height of the Container space is high, you need to set the align-content property. The value can be: The flex – start/flex – end/center/strech/space – between/space – around/normal, etc.;
Item attributes:
  1. Order, can change the order of items, default to 0, order from smallest to largest, can be a negative integer.
  2. Flex-grow: if the width of an item is not set, the default value is as narrow as possible for a large number of items. The flex-grow property controls the allocation of space to the item. The value is numeric. Negative values are invalid and treated as 0. In the header part of some pages, you can set logo: Navigation bar: User profile picture to 0:1:0 to avoid zooming between the logo and user profile picture.
  3. Flex-shrink: when the box space becomes smaller or insufficient, the item is shrunk. The value range is the same as that of flex-grow. The default value is 1. Generally, the flex-shrink value of the logo and user profile picture is set to 0 to prevent it from being shrunk.
  4. Flex, the above item attributes can be included with the Flex attribute statementFlex: the value of flex-grow is space flex-basis;When flex-shrink is set, flex-basis is set at the same time.
  5. Align-self, which aligns elements in the current grid or Flex row and overwrites the values of existing lign-items. The values can be center, flex-start, or flex-end. Can be used to set the location of item individually.

Flex width/min-width/max-height/min-height; flex width/min-width/max-height/min-height Flex and margin-xxx: auto; Combined use; Flex can handle almost any layout.

The Grid layout

A Grid is similar to a table and is better suited to a two-dimensional layout than a Flex layout. Make an element statement for the container. The container {display: the grid | inline – grid; }. Containers can be divided into rows and columns, as shown in the following statement: container{display:grid; grid-template-column:40px 50px auto 50px 40px; grid-template-rows:25% 100% auto; } Container can be divided into three rows and five columns;

Item can be set to a range, for example. Item -a{grid-column-start:2; grid-column-end:5; grid-row-start:1; grid-row-end:3; } the value represents the position of the dividing line of the corresponding serial number.

But can be by fr divided the space of the container, sample container {grid – the template: 1 fr, 50 px, fr, 2 3 fr; }

You could just split the space and name it, for example

{grid-template-areas:"header header header header" "main mian. Siderbar ""footer footer footer footer footer footer footer"} /* Where, '.' stands for empty */Copy the code

The grid-gap attribute controls the gap between items.

How browsers render

  • The browser renders the page as follows:
    1. Construct an HTML tree, or DOM, from HTML
    2. Build a CSS tree, or CSSOM, from the CSS
    3. Combine the two into a render tree, a render-tree
    4. Calculate the size, location, etc based on the document flow, box model, etc.
    5. Compose (display screen according to cascade relationship)
    6. Paint (draw border colors, text colors, shadows, etc.)
  • Update styles typically use JS statements (e.gdiv.style.background='red';.div.style.diplay='none'.div.classList.add('red').div.remove()And so on. Browsers can be implemented in three ways:
    1. JS/CSS – > style – > layout – > paint – > compose for examplediv.remove();
    2. JS/CSS–>style–>paint–>compose
    3. JS/CSS–>style–>compose

Animation effect implementation

Transform Implementation animation

Transform has four common functions: Translate shift, scale scale, rotate, and skew. Inline elements do not support transform; The syntax format is:

  1. tansform:translateX|Y(<length-percentage>)
  2. tansform:tanslate(<length-percentage>,<length-percentage>?)Two dimensions X/Y,tanslate(-50%,50%)Can be used to center absolute positioning elements
  3. tansform:translateZ(<length>)And the parent container perspective; The parent container sets the “viewpoint” through the perspective
  4. tansform:translate3d(X,Y,Z)
  5. Tansform: scale (1.6)When zooming in 1.6 times, the corresponding border will become thicker and thinner.transform:scale(X,Y?)I can scale X and Y;
  6. Rotate rotates around the z-axis by default, rotateZ (), rotateX (), rotateY (), and so on. Statement is:transform:rotate([<angle>|<zero>]);.tansform:rotateX|Y|Z([<angle>|<zero]);.tansform:rotate3d();Can be used to make loading animations for loading
  7. Tansform: skewX | Y (plus or minus 15 deg)tilt
  8. The rotate tansform: scale (1.3) (45 deg);Multiple effects can be added

9.tansform:none; Cancel all effects

Transition is used to complement the intermediate frame. Example statement: Transition :left(attributes) 150ms (liner) 110ms (delay) Transition :left 200ms,top 220ms; Transition :all 440ms; . Not all attributes can be transitioned, such as display: None –>block, and visiility: hidden–>visible. Background can also be transitioned; Transition is usually used with setTimeout () +div.remove().

If you want to achieve an intermediate animation effect, there are two ways:

  1. Use TansForm twice, using setTimeout() or listening for transitioning events to confirm that an intermediate state has been reached.

2. Use the animation

Animation

Animation: | | transition way long delay | | | direction times filling style whether | | suspended animation

An example is as follows:

Construct a

and

Add an action to JS: button.onclick=()=>{demo.classlist.add (‘start’)};

Add animations to CSS

# demo. Start 1.5 s} {animation: XXX; @keyframes xxx{ 0% {transform:none; } 35% {transform:tanslateX(200px); } 100% {transform:tanslateX(200px) tanslateY(200px); }};Copy the code

points & skills

  • Caniuse.com can be used to view browser support for CSS styles

  • CSS has only one comment: /* */

  • All characters and languages of the CSS are English characters

  • The W3C CSS validator verifies CSS code errors

  • The border debugging method can be used to check and locate errors in CSS statements,

  • Common syntax errors of CSS include:

    1. Spelling mistakes

    2. Symbol error (no curly braces)

    3. Didn’t write a semicolon

    4. Use Chinese symbols (colons)

    5. Don’t add the unit

  • CSS reference:

    1. Keywords +MDN, Google

    2. CSS tricks

    3. Zhang Xinxu’s blog

  • In emmette-enabled editors, type.xxx and press TAB or Enter to automatically convert to

    ; Span {first $element}*n then press TAB or Enter;

  • The element does not have to distinguish between a block element and an inline element. Different browsers support this effect differently. You can determine whether an element is a block or inline by setting display: block/inline

  • The default width of block elements is auto instead of 100%

  • Do not include block elements in inline elements, style issues are huge

  • In some layouts, the width of the border may interfere with the width of the layout. You can change the border to outline, which does not take up the width

  • Before writing the CSS style, manually clear the default style of the browser to avoid interference with the layout style. *{margin:0; padding:0; box-sizing:border-box; }, ul, ol {list – style: none; }

  • To debug an attribute value, hold down ALT+↑/↓

  • 酶 In the pop-up window, press ESC, enter RENDING, and select Paint Flashing from the Chrome Developer Tools window

  • During CSS animation debugging, select an element and press ↑/↓ or Shift + ↑/↓ to view the animation effect

  • Set border-radius: 50; You can draw circles

  • When you set the background color for the body element, the color outside of the body element will also change, which will automatically fill the background color for the browser

  • White-space :nowrap;