Front-end CSS summary

The box model

1. Change the default width and height properties of the box model

Box-sizing: content-box: default, standard box model. Width = content width, height = content height The width and height do not include the border and padding of the content. Inside the blue box.
box-sizing: border-box; Width = border + padding + content width, height = border + padding + content height Inside the yellow box.

2. Obtain the width and height

Dom.style. width/height: This method can only be used to set the width of the DOM element inline style, that is, the width of the DOM element inline style set in the HTML style, and the width of the dom element inline style set in the external CSS is not available.
dom.offsetWidth/offsetHeight: Best compatible. Get the box model (width+border+padding)

Development:

ScrollHeight: Gets the scrolling height of the object

ScrollWidth: gets the scrollWidth of the object

ScrollLeft: Gets the distance between the left edge of the window and the leftmost end of the object’s visible content in the window

ScrollTop: Gets the distance between the top edge of the window and the top of the object’s visible content in the window

OffsetWidth: width (including border) of the visible area of the object in the window (offsetWidth = width + border + padding)

ClientWidth: the width of the visible area of the object in the window (excluding the edges) (clientWidth = width + padding)

OffsetLeft: Gets the distance between the outer border of an object and the inner border of its upper object (offsetLeft = left + marginLeft)

3. The principle of landing

Definition 1.

Block formatting context (BFC). It is a separate rendering area that dictates how the inner child elements are laid out and has nothing to do with the outside of the area (i.e. the child elements inside the container do not affect the outside elements and vice versa). The principle of BFC is to solve margin collapse (overlap). Function:

You can close the float (Example 3) (The height of the float element is also involved in the calculation of the height of the BFC, and you can use this feature of the BFC to “clean the float”, or rather include the float)
Prevent overlap with floating elements (Example 2)
Isolation from other objects: Include an element with the BFC to prevent margin collapse of the element with elements outside the BFC (Example 1)

2. Which properties generate BFC?

The root element namely<html>
The float property is not None
Position is absolute or fixed
Display inline-block, table-cell, table-caption, flex, inline-flex
The overflow is not visible

3. Case analysis

Prevent vertical margin overlap

  <div class="first"></div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> .first{ margin:20px; background:lightgreen; width:100px; height:100px; } ul{ /*display:inline-block; */ margin:10px; background:lightblue; } li{ margin:25px; }Copy the code

Prevents overlap with floating elements

  <div class="aside"></div>
  <div class="main"></div>
  
  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }
 
  .main {
    height: 200px;
    background: #fcc;
  }
Copy the code

Clear internal float

  <div class="par">
    <div class="child"></div>
    <div class="child"></div> </div> .par { <! --overflow:hidden--> border: 5px solid#fcc;
    width: 300px;
  }
  .child {
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
  }
Copy the code

More ways to clean up internal floats

Clear Clear float (add empty div method) : Add an empty div below the float element and add clear:both (will add rendering burden)

<div class="par">
    <div class="child"></div>
    <div class="child"></div>
    <div style="clear:both;"></div>
</div>
Copy the code

Set high for the parent of the float.par {height: 110px; }
Set the float for the parent as well.par {float:left}
Universal cleanup method -> After pseudo-class cleanup float (now mainstream method, recommended use)

.par:after{
    content:"";
    clear:both;
    display:block;
}
Copy the code

The middle way

<div class="parent">
  <div class="child">1</div>
</div>
Copy the code

1. The table – cell layout

.parent{ width:100px; height:100px; display: table-cell; vertical-align: middle; // Align: center text-align: center; // Horizontal center}Copy the code

2. For elements whose width cannot be set (poor compatibility)

.parent{
  position: relative;
}
.child{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
}
Copy the code

3. Flex layout (poor compatibility)

.parent{ display: flex; justify-content: center; // align align-items:center; // Vertical center}Copy the code

4. For inline- elements

.child{ width: 100px; height: 100px; line-height: 100px; // Align = center; text-align: center; // Horizontal center}Copy the code

5. For non-in-line elements (limit horizontal center)

.parent{ width:200px; } .child{ width:100px; Margin :0 auto; }Copy the code

6. Margin combined with absolute positioning (the height and width of child elements need to be known)

.parent{ position:relative; } .child{ position:absolute; width:50px; // Must set the width height:50px; // The height must be set to top:0; bottom:0; left:0; right:0; margin:auto; }Copy the code

Flow/adaptive/responsive/elastic layout

The difference between: When the screen resolution changes, the element position and size of static layout will not change, the element size of streaming layout will change but the layout will not change (percentage layout), and the element position of adaptive layout will change but the size will not change (we-media query technology). Responsive layouts change the location and size of elements (a combination of streaming and adaptive layouts), and elastic layouts scale the width and height of elements (EM/REM).

See this article for details:

www.cnblogs.com/zhuzhenwei9…

Several layout examples:

www.liquidapsive.com/

Liquid Layout

Implementation method:

The width is defined using %, and the height is mostly fixed with PX, adjusted according to the viewport and the real-time dimensions of the parent element.
Use VW/Vh to define width/height
With max-width/min-width and other attributes to control the size flow range to avoid too large or too small impact on reading.

Adaptive Layout

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
</div>
Copy the code

Implementation method:

With open the margin of

.left{
    width:100px;
    float:left; <! -- or --> <! --position:absolute; -- > <! --left:0; --> } .right{ margin-left:100px; }Copy the code

The element forms a BFC

.left{
    float:left;
    width:100px;
}
.right:{
    overflow: hidden;
}
Copy the code

Using flex

.main{
    display:flex
}
.left{
    flex:0 0 100px;
}
.right{
    flex:1;
}
Copy the code

Responsive Layout

Select load CSS

Load CSS files with HTML tags

link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

(Load the smallscreen.css file if the screen width is between 400 and 600 pixels.)
Load in an existing CSS file

@import url("tinyScreen.css") screen and (max-device-width: 400px)
The @media rule of the CSS

@media (min-width: 400px) and (max-width: 600px){
.col-sm-6{
  padding: calc((33vw - 100px) / 2) 8px ;
  flex: 0 0 calc(50% - 16px);
  max-width: calc(50% - 16px);
}
Copy the code

Flexible layout (EM/REM layout)

Rem/EM difference: REM is relative to the font size of an HTML element, while EM is relative to its parent element.
Flex layout is also a flexible layout, details refer to: www.ruanyifeng.com/blog/2015/0…

The display related

Block: container types such as div
Inline: inline type such as img SPAN
Inline-block: an inline element with an adjustable width, with a small gap between the two
Table: Change style to table type (computation-intensive)
Flex: Flex container, refer to flex for elastic layout
The grid: grid containers, details refer to: www.css88.com/archives/85…
Inherit: Inherit the parent

The position related

1. The static (default)

2. They are relative to each other.

The offset relative to its original position in the document flow
Follow the normal document flow
The outermost layer is positioned with the body as the origin

<div class="first"></div>
<div class="second"></div>
Copy the code

.first{
    position:relative;
    top:20px;
    left:20px;
}
Copy the code

.first{
    margin:20px;
    position:relative;
    top:20px;
    left:20px;
}
Copy the code

3. Absolute position

An offset from the position of an element of its parent class (parent class and above)
Position of the ancestor class is non-static
Deviate from normal document flow
And the outermost layer is located with HTML as the origin

<div class="main">
  <div class="first"></div>
  <div class="second"></div>
</div>
Copy the code

.main{
    position:relative;
    padding:10px;
}
.first{
    position: absolute;
    left:100px;
}
Copy the code

4.fixed

Offset with respect to the browser window (when you scroll the page, the distance between the elements and the browser window is constant)
Deviate from normal document flow

Pseudo class/pseudo element

1. The pseudo class

: Actived: Styles are added to active elements (i.e. new styles are added to elements when the mouse is pressed)
:focus: Add styles to selected elements (that is, after an element is mouse-pressed, new styles will be added to the element until another element is pressed)
:hover: Adds style to an element when the mouse hovers over it.
:link: Adds styles to unvisited links
:visited: Adds styles to visited links
:first-child: to add a style to the first child of an element (used mostly for LI under ul or TD or TH under TR)

The first name < ul > < li > < / li > < li > 2 < / li > < li > 3 < / li > < / ul > ul li: first - child {color: blue; }Copy the code

2. The pseudo elements

::first-letter: Adds styles to the first letter of the text
::first-line: Adds the style to the first line of text
::before/::after: Inserts something before or after the element (not before or after the position, but before or after the document stream). Use it with ‘content’. For example, the triangle in front of the bubble here is made of pseudo-elements

<div class="demo">
    <img src=".. /.. /assets/image/user.png" width="30px">
    <span class="content"</span> </div>. Demo {position: relative; } .content:before{ content:'\25c2'; // Unicode geometry references color according to the following list:#5cb34e; // Graphics colorfont-size: 40px; Position: Absolute; left:-12px; top:-20px; } .content{ position: relative; top:-4px; left:10px; border-radius: 10px; background:#5cb34e;
  padding: 10px 20px;
  color:white;
}
Copy the code

<div class="other"</span></div>. Other {position: relative; width: 100%; text-align: center; span::before, span::after { content:"";
        width: 100px;
        height: 1px;
        background: #cbcbcb;position: absolute; top: 50%; } span::before { left: 0; } span::after { right: 0; }}Copy the code

3. The difference between pseudo-elements and pseudo-classes

The essential difference between the two is whether abstractions create new elements

Pseudo-classes can only use single colons, and pseudo-elements can use double colons or single colons.
The effect of pseudo classes can be achieved by adding actual classes to the DOM document. The effect of pseudo-elements is to add real elements that do not exist in the DOM document and are virtual elements.

<div>
    <p>a</p>
    <p>b</p>
</div>
Copy the code

The following is an example of pseudo-classes, which are equivalent to adding classes to an element

p:first-child {
    color: red;
}
Copy the code

<div>
    <p class="first-child">a</p>
    <p>b c</p>
</div>

p .first-child {
    color: red;
}
Copy the code

The following is an example of a pseudo-element, which is equivalent to adding an actual element to an element

p::first-letter {
    color: red;
}
Copy the code

<div>
    <p><span>a</span></p>
    <p>b c</p>
</div>

p span{
    color:red;
}
Copy the code

Pseudo-classes are similar to add-on classes and can be multiple, whereas pseudo-elements can only appear once in a selector and only at the end.

p:first-child:hover {
    color: red;
}
Copy the code

Pseudo-classes can only set styles, not content, and pseudo-elements can set content properties.

Draw shapes with CSS

<div class="shape"></div>

1. Draw triangles

.shape{
    width: 0px;
    height: 0px;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent blue;
}
Copy the code

.shape{
    width: 0;
    height: 0;
    border-top: 100px solid #EC0465;
    border-right: 100px solid transparent;
}
Copy the code

2. Painting heart

.shape{
    width: 100px;
    height: 100px;
    background: #f61344;
    position: relative;
    transform: rotate(45deg);
}
.shape::before,
.shape::after {
    content: "";
    background: #f61344;
    position: absolute;
}
.shape::before {
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
    left: -49px;
    top: 0;
}
.shape::after {
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
    top: -49px;
    left: 0;
}
Copy the code

css3

The transform transformation

Definition 1.

Move, scale, rotate, or stretch elements

2. Transformation method

translate()TranslateX, translateY

transform: translate(50px,100px)The element is moved 50px to the right and 100px down
rotate(): 2 d rotation

transform: rotate(30deg)The element rotates 30 degrees clockwise
rotateX()/rotateY(): 3 d rotation

transform: rotateX(30deg)The element is rotated 30 degrees clockwise along the X-axis
scale()ScaleX, scaleY

The transform: scale (2, 4)The element’s width is converted to twice its original size and its height to four times its original height

Extension: The Zoom property scales elements equally

Ex. :div{width:10px; height:20px; zoom:.5}Div is 0.5 times the width and height of its original size
skew()SkewX and skewY are also available

transform: skew(30deg,20deg)The element is rotated 30 degrees along the X-axis and 20 degrees along the Y-axis
Matrix () : Combines all 2D transformation methods together, using a matrix of six values that allows rotation, scaling, movement, and tilting of elements

The transition transition

Definition 1.

The effect of an element changing from one style to another

2. Transformation method

Specifies which CSS property you want the effect to be added to
Duration specified for effect (default to 0 if not specified)
Add transitions to multiple styles, separated by commas (use all if changing all styles)
Use the delay property if delay is required

Example: When the mouse is placed over the element, after a delay of 1s, the width gradually changes from 100px to 300px in 2s, rotating 180 degrees clockwise

div{
    transition: all 2s 1s;
    width:100px;
}
div:hover{
    width:300px;
    transform:rotate(180deg);
}
Copy the code

@ keyframes animation

Definition 1.

Specify a CSS style and the animation will gradually change from the current style to the new style

2. Transformation method

Specifies the name of the animation
Must be bound to a selector and specify the duration of the animation (percentage can be used to specify when changes occur, best browser support)
There are multiple styles separated by seals

@keyframes myfirst// specify the animation name {from {background: red; left:0px; top:0px; } to {background: yellow; left:200px; top:0px; } <! --0% {background: red; } -- > <! --25% {background: yellow; } -- > <! --50% {background: blue; } -- > <! --100% {background: green; }--> } div { animation: myfirst 5s; // Bind myFirst to the animation and set the animation duration to 5s}Copy the code

div
{
    animation: myfirst 5s linear 2s infinite alternate;
}
Copy the code

The box model

1. Change the default width and height properties of the box model

2. Obtain the width and height

3. The principle of landing

Definition 1.

2. Which properties generate BFC?

3. Case analysis

The middle way

1. The table – cell layout

2. For elements whose width cannot be set (poor compatibility)

3. Flex layout (poor compatibility)

4. For inline- elements

5. For non-in-line elements (limit horizontal center)

6. Margin combined with absolute positioning (the height and width of child elements need to be known)

Flow/adaptive/responsive/elastic layout

Liquid Layout

Adaptive Layout

Responsive Layout

Flexible layout (EM/REM layout)

The display related

The position related

1. The static (default)

2. They are relative to each other.

3. Absolute position

4.fixed

Pseudo class/pseudo element

1. The pseudo class

2. The pseudo elements

3. The difference between pseudo-elements and pseudo-classes

Draw shapes with CSS

1. Draw triangles

2. Painting heart

css3

The transform transformation

Definition 1.

2. Transformation method

The transition transition

Definition 1.

2. Transformation method

@ keyframes animation

Definition 1.

2. Transformation method

Related Posts

Analyze the Node.js application

TypeScript basics

Node CLI plug-in solution exploration