This is the sixth day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

CSS World Reading Progress: 44/328 pages, notes constantly updated…

CSS terminology

  • attribute
  • value
    • Such as 10px, 50%, #999, etc
  • The keyword
    • Such as Transparent, solid, and inherit
  • variable
  • The length of the unit
    • Time unit: s, ms
    • Angle unit: DEG, rad
    • The length of the unit
      • Unit of relative font length: EM, EX, REM, ch
      • Absolute length unit: px,….
  • Function operator
    • Url (), RGB (), calc(), attr(), scale(),…
  • Attribute values
  • Declaration = attribute name + attribute value
  • Declaration block: {}
  • Rule or rule set = selector + declarative block
  • The selector
    • Class selectors
    • The ID selector
    • Property selector
    • Pseudo class selector
    • Pseudo element selector
  • Relational selector
    • Descendant selector: space connection
    • Adjacent descendant selector: >
    • Sibling selector: ~
    • Adjacent sibling selector: +
  • @ rules
    • For example, @media, @font-face, @page, or @support

Flow, element, base size

  • HTML tags
    • Block-level elements
    • Inline element

Block-level elements

 <! , such as: - >
 <div></div>
 <li></li>
 <table></table>
Copy the code

Note: block-level elements and display:block elements are not the same concept. The display attribute of block-level elements can be other values, which also conform to the basic properties of block-level elements: only one element can be displayed on a horizontal stream, and multiple block-level elements can be displayed on a newline.

  • According to the attribute value of display, it can be divided into:

    • Block: Inside and outside a block-level (container) box
    • Inline-block: external Inline, internal block level
    • Inline: Both inside and outside the box are inline

The details of the width/height function

width:auto
  • Contains the following four width representations:
    • Make full use of available space
    • Shrink and wrap
    • Shrink to a minimum
      • It is most likely to appear in a table with table-layout as auto
    • Out of container limit

The above four dimensions,

default width 100% display, is “external dimensions”, the rest are all “internal dimensions”.

  • External dimensions and fluid characteristics 0. Normal flow width – flow loss problem 0. Formatting widths (see chapter 6 of this book)

  • Internal dimensions and fluid characteristics

    1. wrap

      • Adaptive: Adaptive means that the element size is determined by the inner element, but is always smaller than the size of the containing block container.

      • Practical development example: You want to center text when it is small, and left text when it is more than one line.

         <div class="box">
   <p class="content">Written content</p>
 </div>
 ​
 <! -- CSS style. Box {text-align: center; } .content { display: inline-block; text-align: left; } -- >
Copy the code

    2. Preferred minimum width

    3. Maximum width

    Details of what the width value does

  • The inner box is divided into four boxes

    • content box
    • padding box
    • border box
    • margin box

  • Width actually works on content Box, but there are some problems:

    • Given a specific width, fluidity is lost (take a closer look at both solutions)
    • An obsession with discordance with the real world
Solution 1: Separation of width in CSS fluid layout
  • The width property in CSS does not coexist with the padding/border (and sometimes margin) property that affects the width
  • The parent element is of a fixed width. The child element, since width is the default value auto, will automatically fill the parent container like a stream.
  • Problem: One more layer of labels
Box-sizing changes the effect of width/height

The effect of the box-sizing property is to actually change the box that width acts on.

 .box1 { box-sizing: content-box; } /* Default value */ 
 .box2 { box-sizing: padding-box; } /* Firefox used to support */ 
 .box3 { box-sizing: border-box; } /* All support */ 
 .box4 { box-sizing: margin-box; } /* never support */
Copy the code

Box-sizing is the 100% adaptive parent width of the native plain text box and text field

height:auto

Height: Auto is basically the same formula: there are several boxes of elements, how high each one is, and then one plus, the final height value.

height:100%

Another obvious difference between height and width is the support for percentage units.

For width attributes, the percentage value is supported even if the parent width is auto; However, for the height attribute, if the parent element height is auto, the percentage value is completely ignored as long as the child element is in the document flow.

A practical example of inserting a div tag to display a full screen background image:

 div { 
  width: 100%; /* This is redundant */ 
  height: 100%; /* This is invalid */ 
  background: url(bg.jpg); 
 }
 ​
 /* The correct way */
 html.body { 
  height: 100%; 
 }
Copy the code

Percentage height values to be effective, the parent must have a valid height value!

  • Why height:100% invalid

    • If the height of the containing block is not explicitly specified (that is, the height is determined by the content) and the element is not absolutely positioned, the value is evaluated as auto.
    • Auto and percentage calculations are definitely not computable: ‘auto’ * 100/100 = NaN

  • How can elements support height:100% effect

    • Sets an explicit height value

       /* For example, our more common: */
 html.body { 
  height: 100%; 
 }
Copy the code

    • Use absolute positioning

       div { 
  height: 100%; 
  position: absolute; 
 }
Copy the code

      There is a difference between the calculation of the percentage of the absolute positioning element and the calculation of the percentage of the non-absolute positioning element. The difference is that the width and height of the absolute positioning element is calculated relative to the padding box. In other words, the padding value is taken into account. Non-absolute positioning elements are evaluated relative to the Content Box.

      Example: demo.cssworld.cn/3/2-11.php demo.cssworld.cn/3/2-12.php

Min – width/Max – width and min – height/Max – height

< span style = “max-width: 100%; clear: both;

img { max-width: 100%; height: auto! important; }Copy the code

Height :auto is required, otherwise, if the original image has height, the image will be compressed horizontally when max-width takes effect. Forcing height to auto ensures that the width does not exceed the original scale of the image.

However, there is an experience problem with this, which is that the image height will change from 0 to calculated height when loading, and the text will fall in a waterfall.

  • Initial value problem

    • The initial value of max-width and max-height is none
    • The initial values for min-width and min-height are auto

  • Max-width overwrites width, even if! important

  • When min-width and max-width conflict, large values are retained.

Unfoldable animation technique for elements of any height

This is done by min-height

 .element { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .25s; 
 } 
 .element.active { 
  max-height: 666px; /* A sufficiently large maximum height value */ 
 }
Copy the code

We only need to set the max-height value to be larger than the height of the expanded content, because when the max-height value is larger than the calculated value of height, the height of the element is the calculated height of the height attribute. In this interaction, Height :auto.

Note: If the max-height is too high, there may be “effect delay” issues when retracting

Inline element

The first thing to understand is that “inline” for “inline elements” refers specifically to “external boxes” and is not the same as “display inline elements”!

  • Contains:
    • The content area
    • Inline box: Actually refers to the “outer box” of elements
    • Line box box
    • Contains a box