Css2.1 Common knowledge points

  1. The inclusion block (also known as the initial inclusion block) for the “root element” is created by the user agent, and in HTML, the root element is<html>Element, but some debuggers use it<body>As the root element, in most browsers the initial include block is a window-sized rectangle. Initial contain block is not equal to window.
  2. For a non-root element, if thepositionThe value isrelativeorstaticThe containing block is made up of the nearest block-level root.
  3. For a non-root element, if thepositionThe value isabsolute(absolute location), containing blocks set to nearestpositionValue is notstaticThe ancestor element of. If the ancestor is a block-level element, the containing block is set to the inside margin boundary of the element. If there is no ancestor, the element’s contain block is defined as the initial contain block.
  4. Left, top, right, bottom, width, heightThe default value isauto.Margin, padding, border-widthThe default value is0
  5. Width, margin, paddingPercentage refers to the containing blockwidthThe value of theheightPercentage refers to the containing blockheight.leftPercentage refers to the containing blockwidth.topPercentage refers to the containing blockheight
  6. An element is divided into two layers, the upper layer is text-related and the lower layer is box-model related. (Consider this when floating elements)
  7. Float raises the element half a level.
  8. marginNegative (marginDoes not affect the position of the element) : draws the boundary of the element inward, is positive: expands the boundary of the element outward.
  9. to<body>Label setting minimum width:left.width*2+right.width (right.width*2+left.width).
  10. If you allow<body>Elements,<html>Elements, viewports three in one, and heights must be inherited layer by layer.
  11. Browser render page rules if<body>Elements and<html>There is only one elementoverflowProperty, so thisoverflowProperty to the document. If I write both,<html>On the elementoverflowProperties are applied to the document,<body>Elements of theoverflowProperties act on themselves.
  12. To disable the system’s default scroll bar method:html,body{ height:100%; overflow:hidden; }.
  13. No positioning refers to the contain block, relative positioning refers to the element’s natural position, absolute positioning refers to the contain block, and fixed positioning refers to the viewport.
  14. Box: Basic unit of the CSS layout.BoxCSS layout objects and basic units, intuitively speaking, a page is composed of manyBoxComposed of. The type anddisplayProperty, which determines the type of Box, different types of boxes. Will participate in differentformatting Context(a container that decides how to render the document), so elements inside the Box are rendered differently.
  15. Type of box:block-level box:displayProperties forblock.list-item.tableElement, is generatedblock-level box. And to participate inblock fomatting context;inline-level box:displayProperties forinline.inline-block.inline-tableElement, is generatedinline-level box. And to participate ininline formatting context.
  16. CSS hackConditional comment expressions are used to set up different browser versions to write code under. * For Internet Explorer 6 and 7, _ Only for Internet Explorer 6.

Text-align is only valid for inline elements.

  1. white-spaceControls the wrapping or non-wrapping of text. The biggest scenario is the overflow display ellipsisdiv{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  2. When a line is vertically aligned, the line inner box with the maximum row height is used as the reference. Other line inner boxes are aligned towards the reference with their own alignment method, and the height of the line frame is finally calculated. When there are multiple lines of content, each line has its own line frame.
  3. vertical-alignAttribute is used to specify the vertical alignment of elements in a row with reference to the inline box with the highest row height when vertically aligned on a row.
  4. like<input>.<img>This element, called a replacement element, is written on the page with a single label, but rendered to the page with an image or text box instead of the default height and width.

Three column layout related knowledge points

  • Three column layout requirements
    1. Fixed on both sides, adaptive in the middle
    2. The columns must be displayed in their entirety
    3. The columns are loaded first
  • Grail layout of technical points
    1. Float: Build a complete layout frame
    2. marginNegative: Adjusts the position of the next two columns (so that the three columns are placed on one row).
    3. Use relative positioning: Adjust the position of the next two columns (so that the position of the two columns is adjusted to the ends)
  • Pseudo-contour layout:margin-bottomNegative,padding-bottomLet’s say I have a higher value. OveruseOverflow: hidden.
  • Standard block-level elements are horizontally centeredMargin: 0 auto; Invalid when using float.
  • Twin wing layout technical points
    1. Float: Build a complete layout frame
    2. marginNegative: Adjusts the position of the next two columns (so that the three columns are placed on one row).
    3. In the middle<div>Add another one to the tag<div>Tags will be inside<div>The inner margin of the label is adjusted so that the two columns are positioned at both ends.
  • Grail layout vs. Dual wing layout implementation comparison:
    1. Both layouts place the main column first in the document flow, making the main column load first.
    2. The two layouts have similar implementations in that they float three columns and then create a three-column layout with a negative margin.
    3. The difference between the two layouts is how to deal with the position of the main column in the middle: The Grail layout uses the left and right inner margins of the parent container + two relative positioning of the slave columns; In a two-wing layout, the main column is nested in a new parent block using the left and right inner margins of the main column for layout adjustment.

stickyFooter

  • Classic “stick” footer layout with a piece of content<main>when<main>When the height is long enough,<footer>Should follow<main>Element. when<main>When the element is short (such as less than the height of the screen), we expect this<footer>Elements can “stick” to the bottom of the screen.
  • stickyfooterLayout routines:
    1. Write two<div>Tag (parent-child relationship), written below the parent tag<footer>.
    2. <body>Element gets the viewport height(HTML, body{height: 100%; }), the minimum height of the parent tag(Mid-height: 100%)Set up and<body>The same height as the elements. At this timefooterPushed under the viewport.
    3. footerthemargin-topSet it to negativefooter.height.footerWe move it up, like thatfooterIt’s right at the bottom. However, when the content area in the child element is large enough to stretch beyond the viewport, the content area will notfooterOverlap.
    4. Set one for the child labelPadding - bottom: footer. Height. Eliminate overlap.

Solution to IE6 fixed failure problem

  • Use absolute positioning to simulate fixed positioning:
    1. Disable the system default scroll bar.
    2. to<body>Element a scroll bar.
    3. let<body>The size of the element becomes the size of the viewport.

Landing the knowledge

  • Formatting contextIs a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements. The most commonBlock Formatting context includes Block FOMatting context(BFC) and Inline Formatting context(IFC).
  • BFC(Block formatting context)Block level formatting context. It is a separate render area, onlyBlock-level boxParticipation, it provides for internalBlock-level BoxHow it is laid out, and it has nothing to do with the outside of the area.
  • BFCLayout rules:
    1. The inside of theBoxIt’s going to be placed vertically, one after the other.
    2. BFCThe area will not be withfloat boxOverlap.
    3. The inside of theBoxThe vertical distance is divided bymarginDecision. Belong to the sameBFCTwo neighbors ofBoxthemarginThere’s going to be overlap.
    4. To calculateBFCWhen the float element is also involved in the calculation. (Clear the float,haslayout)
    5. BFCIt is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa.
  • Will be generatedBFCThe elements:
    • The root element
    • floatProperties fornone
    • positionforabsoluteorfixed
    • overflowDon’t forvisible
    • displayforInline-block, table-cell, Table-caption, flex, inline-flex

Two columns of the layout

  • Two column layout requirements, left fixed, right adaptive.
  • Two column layout implementation method:
    1. two<div>Tag, float on top, float on bottom<div>Top up
    2. to<body>Set the minimum width to be usedBFCThe rule goes to the right<div>Label setOverflow: hidden.

Margin overlay problem

  1. Between sibling elementsmarginSuperposition: to be in the same positionBFCTwo adjacent block elements inmarginOverlap. Solutions:
    1. You can change two element attributes.
    2. You can change two block elements from oneBFCIn the.
    3. Make two block elements not adjacent (not recommended).
  2. Margin passing solution between parent and child elements:
    • You can set one for the parent elementOverflow: hidden, so that the parent and child elements are not in the sameBFCIn, can be solvedmarginDelivery problem.

Clear float problems

  • Clear float: the float’s child can spread the parent’s height.
  • Solutions:
    1. Add height to the parent element directly.
    2. Open for the parent elementBFC.overflow:hidden(Disadvantages incompatible with IE6) (Floating box features, positioning box features: height and width are supported by the content)
    3. <br>Label clearance float.<br clear="all">(Not supported by IE6)
    4. Empty label clear float.<div style="clear:both;" >The minimum height of elements in IE6 is 19px, and you can try to give it to elementsfontsizeSet it to zero, but it’s still going to be off by 2px.
    5. Pseudo-element cleanup float. openhaslayoutCompatible with IE6 (zoom:1;), and set:After pseudo-class {content:""; display:block; clear:both; }.

The element with given width and height is vertically and horizontally centered

  1. This element is set to absolute positioningPosition: absolute; The element’s parent sets the relative positioningPosition: relative; To position the element relative to its parentLeft: 50%; Top: 50%; Set the element’s margin toMargin-left: the negative width of the element;Margin-top: the negative height of the element;
  2. This element is set to absolute positioningPosition: absolute; The element’s parent sets the relative positioningPosition: relative; To position the element relative to its parentLeft, right, top, bottomIs zero,marginSet toauto;

Vertical horizontal centering scheme for elements of unknown height and width

  • Characteristics of an absolute positioning box: height spread by content, horizontal:Left +right+width+padding+margin= includes block paddingSize of the area. Vertically:Top +bottom+height+padding+margin= Contains block paddingArea size
  • Vertical horizontal centering scheme for elements of unknown height and width
    • This element is set to absolute positioningPosition: absolute; The element’s parent sets the relative positioningPosition: relative; To position the element relative to its parentLeft: 50%; Top: 50%; transform:translate3d(-50%,-50%,0);

Font related styles

  1. font-sizeThe value of apx.emThe size of the em value is dynamic when definedfont-sizeProperties,1emEqual to the font size of the element’s parent)%(refer to the font size of the parent element) in Googlefont-sizeThe default is 16px and the minimum is 12px.
  2. font-style, the two valuesitalicorobliqueYou can tilt the font.
  3. font-weight.normalandbold(normal and bold values),normalNormal thickness, equivalent to 400,boldBold, equivalent to 700, a total of nine grades 100-900.
  4. font-familyAllows you to set fonts for selected elements by giving a sequential list of font names or font family names, separated by commas, and the browser selects the first font in the list that is installed on the computer. The last value is typically set to the font family.
  5. fontProperty, which must be set at the same timefont-sizeandfont-family, if requiredfont-styleandfont-weightAny one of them, they have to be placedfont-sizeBefore the value,line-heightThe value must be followed byfont-sizeAfter, and before the property value/. The lastfont-familyIs essential and must be put last. (Generally not recommended)

Text line high relevant knowledge points

  • The line height of text is divided into top line, middle line, baseline and bottom line. The line height refers to the vertical distance of the baseline in the context line. The line spacing is the vertical distance from the bottom line of the previous line to the top line of the following line. Half space refers to half of the line space.Line spacing = line height - font size.
  • Content area: the area covered by the bottom line and top line. Each element in the text line generates a content area, determined by the size of the font, and this content area generates a line inner box that, if nothing else, is exactly equal to the element’s content arealine-heightThe resulting line spacing is to increase and decrease the height of the inner boxes in each row.
  • Inline box: Inline box is a concept in a browser rendering model that cannot be displayed. The inline box defaults to the content area and willline-heightThe calculated value of minusfont-sizeThis value is the total line spacing, which can be a negative value. Any line spacing /2 applied to the top and bottom of the content area, respectively, results in the inline box for that element.
  • A line box is a virtual rectangle of a line. It is a concept in browser rendering mode and is not actually displayed. By default, the height of the line box is equal to the maximum value of the line box of all the elements in the line.
  • In front-end development, if you’re dealing with a lot of text, it’s recommended to set the line height to be larger than the font.
  • In terms of row height inheritance,line-height:1Inherits directly from the quilt element instead of converting tofont-sizeThe value of the quilt element is inherited, howeverline-height:100%Will be converted to the parent element firstfont-sizeIs inherited by the child element.
  • During page initializationbody{ line-height:1; }When there is a lot of text on the page, set the TAB line height to 1.5 and the page will display text beautifully – the line height is most useful when a single line of text is vertically centered.

Image vertical horizontal center method

  • Add one to the picture<div>The box with the label. Go ahead<div>Tag set aThe text - align: center;Center the image horizontally and give<div>Tag plus oneafterPseudo classes,Display: inline - block.Vertical - align: middle, the height is set to 100%, which gives the imagevertical-alignA reference is then given to the picture<img>Tag set aVertical - align: middle;(vertical-alignOnly applicable toinline-blockElement, not applicable to other types of elements).