This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

CSS Interview Manual

The box model

A box consists of content, padding, border, and margin.

According to the area of calculating width and height, there are four models:

  • Content-box (standard box model)
  • Border-box (IE box model)
  • Padding-box (not supported)
  • Margin-box (unsupported)

However, currently the W3C and MDN only support the first two.

Formatting context

Formatting context refers to a rendered area of a page. It specifies how the elements within the rendered area are formatted and interact with each other. There are four main types of formatting context:

  • Block Formatting Context (BFC)
  • Inline Formatting Context (IFC)
  • Flex Formatting Context (FFC)
  • Grid Formatting Context (GFC)

Among them, BFC and IFC are more important, and this paper focuses on BFC.

BFC

The block-level formatting context, which is a separate render area, isolates elements inside the BFC from external elements so that the positioning of internal and external elements does not affect each other.

Create BFC conditions

  • The root element HTML
  • Position: absolute/fixed
  • Float elements
  • Non-block-level elements defined as block level display: inline-blok/flex/table-cell etc
  • The overflow is not visible

Rendering rules

  • The boxes inside the same BFC are arranged vertically
  • Margins of the two boxes in the same BFC will overlap
  • When calculating the BFC height, the floating element also participates in the calculation
  • The left side of the margin of the BFC neutron element, in contact with the left side of the border containing the block (BFC) (except for the child element absolute)
  • The region of the BFC does not overlap the region of the float element

Application scenarios

  • Clear internal float
  • Adaptive two-column layout
  • Prevent margin overlap

Cascading context

The cascading context is the Z-axis in three dimensions.

Cascading level

Centered layout

  • Horizontal center

    • absolute + transform
    • flex + justify-content: center
    • Inline elements: text-align: center
    • Block-level elements: margin: 0 auto

  • Vertical center

    • line-height: height
    • flex + align-items: center
    • absolute + transform
    • table

  • Horizontal and vertical center

    • absolute + transform
    • flex + justify-content: center + align-items: center

Selector weights and priorities

Weights: Starting at 0, an inline style +1000, an ID selector +100, an attribute selector, class or pseudo-class +10, an element selector, or pseudo-element +1, and wildcards +0

Priority:

  • The weights are the same, and the ones that are written behind override the ones that are in front
  • Use! Word-wrap: break-word! Important! Important! When important, it has a higher priority

CSS pseudo-classes and pseudo-elements

Pseudo classes:

  • :active, adds a style to the element that is activated.
  • :focus, adds the style to the selected element.
  • :hover, adds a style to an element when the mouse hovers over it.
  • :link, which adds special styles to links that have not been visited before.
  • :visited, adds a special style to the link being visited.
  • :first-child, which adds a special style to the first child of an element.
  • :lang, which allows the author to define the language used in the specified element.

Pseudo elements:

  • :first-letter, adds a special style to the first letter of the text.
  • :first-line, which adds a special style to the first line of the text.
  • :before, insert something before an element.
  • :after, insert something after an element.

Principles of the CSS preprocessor

The Sass, Less, and Postcss are common.

Principle: The class CSS language is compiled into real CSS readable by the browser through Webpack, giving CSS more powerful functions, common functions are variable, nesting, loop statement, conditional statement, automatic prefix, unit conversion, mixin reuse.

animation

The difference between transition and animation

Transition has only two states: a start state and an end state; But an animation may have multiple states, with the concept of frames.

Transition needs to be triggered in other ways, such as hover or with JavaScript; An animation can be triggered automatically.

Trasition transition animation

The transition property is a shorthand property for setting four transition properties:

  • The transition – property: properties
  • The transition – duration: interval
  • The transition – the timing – function: curve
  • The transition – delay, delay

animation

The animation property is a shorthand property that sets the six animation properties:

  • Animation-name: specifies the name of an animation
  • Animation – duration: interval
  • Animation – timing – function: curve
  • Animation – delay, delay
  • Animation – iteration – count: number
  • Animation – direction: the direction

Remove the floating

What is floating:

Floating elements detach from the document flow and float left/right until either the parent or another floating element is encountered.

Question:

Floating elements are removed from the normal document flow and do not occupy a position in the document flow. If a parent element is surrounded by floating elements, then the parent element cannot be held apart by floating elements, and the parent element loses height. This is known as a floating parent height collapse problem. To solve this problem, you need to clear the float and restore the height of the parent element as follows:

BFC clear float: set overflow:hidden to the parent element.

Clear Clear float:

Use :after to generate a block-level element with empty content, and then clear to move this pseudo-element after all the floating elements that preceded it, as shown in the following example:

Set before:

 .parent::after {
   content: "::after"; . }.clearfix::after {
   clear: both;
 }
Copy the code

After the Settings:

Commonly used layout

A two-column layout

 <div class="layout">  
   <section>
     <aside class="orange">aside</aside>
     <main class="green">main</main>
   </section>
 </div>
Copy the code

Float +overflow (BFC)

 aside{
   float:left;
   width:200px;
 }
 main{
   overflow:hidden;
 }
Copy the code

Method 2: float + margin

 aside{
   float:left;
   width:200px;
 }
 main{
   margin-left:200px;
 }
Copy the code

Method 3: flex

 .layout{
   display:flex;
 }
 aside{
   width:200px;
 }
 main{
   flex:1;
 }
Copy the code

Method 4: the grid

 .layout{
   display:grid;
   grid-template-columns:200px auto;
 }
Copy the code

Three-column layout (adaptive main column with fixed width on both sides)

Fa one grail layout

 <div class="layout">
   <section>
     <main>main</main>
     <aside class="left">aside</aside>
     <aside class="right">aside</aside>
   </section>
 </div>
Copy the code
 .layout{
   padding:0 200px
 }
 main{
   float:left;
   width:100%;
 }
 aside{
   float:left;
   width:200px;
 }
 .left{
   position:relative;
   left: -200px;
   margin-left: -100%;
 }
 .right{
   position:relative;
   right: -200px;
   margin-left: -200px;
 }
Copy the code

French two flying wing layout

 <section>
   <main><div class="inner">main</div></main>
   <aside class="left">aside</aside>
   <aside class="right">aside</aside>
 </section>
Copy the code
 main{
   float:left;
   width:100%;
 }
 .inner{
   margin:0 200px;
 }
 aside{
   float:left;
   width:200px;
 }
 .left{
   margin-left: -100%;
 }
 .right{
   margin-right: -200px;
 }
Copy the code

Float + overflow

 <section>
   <aside class="left">aside</aside>
   <aside class="right">aside</aside>
   <main>main</main>
 </section>
Copy the code
 aside{
   width:200px;
 }
 .left{
   float:left;
 }
 .right{
   float:right;
 }
 main{
   overflow:hidden;
 }
Copy the code

Method four flex

 <section class="flex">
   <aside>aside</aside>
   <main>main</main>
   <aside>aside</aside>
 </section>
Copy the code
 .flex{
   display:flex;
 }
 aside{
   width:200px;
 }
 main{
   flex:1;
 }
Copy the code

Adaptive layout and responsive layout

  • Adaptive: Need to develop multiple sets of interfaces. By detecting the viewport resolution, it determines whether the currently accessed device is PC, tablet, or mobile phone, and requests the service layer to return different pages.
  • Reactive: Only one set of code needs to be developed. Responsive design shows different layouts and content by detecting viewport resolution and doing code processing for different clients.

Responsive layout

A media inquiry

Using @Media media queries allows you to define different styles for different media types, especially responsive pages, where you can write multiple sets of styles for different screen sizes to achieve adaptive results.

 @media screen and (max-width: 960px) {body{
       background-color:#FF6699}}@media screen and (max-width: 550px) {body{
       background-color:#00FF66; }}Copy the code

Method two percent

When the width or height of the browser changes, the percentage unit allows the width and height of the components in the browser to change with the browser, thus achieving a responsive effect.

The percentage of the height,width attributes depends on the width and height of the parent tag. But what about the padding, border, margin and so on?

  • The top and bottom of the child elements, if set by percentage, are the height of the parent element relative to the direct nonstatic positioning (default positioning). Similarly, the left and right of the child elements, if set by percentage, are the width of the parent element relative to the direct nonstatic positioning (default positioning).
  • The padding of the child element, if set as a percentage, is relative to the width of the direct parent element, whether vertical or horizontal, regardless of the height of the parent element.
  • If the margin of the child element is set as a percentage, it is relative to the width of the direct parent element in both vertical and horizontal directions.
  • Border-radius is different. If border-radius is set to a percentage, it is the width relative to itself.

Method three vw/vh

Css3 introduced a new unit, VW/VH, related to the view window, where VW represents the width relative to the view window, and VH represents the height relative to the view window. At any level, in terms of vw units, 1VW is equal to one hundredth of the width of the view.

Method four rem

The REM unit is the HTML element relative to the font size, also known as the root element. By default, HTML elements have a font size of 14px. So 1rem is 14px.

Single-line, multi-line text overflows to display ellipses

A single

 .text {
   width: 100px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
Copy the code

Multiple lines

 .text{
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
Copy the code

If this article helped you, please give it a like