• CSS3: Transform causes the fixed positioning of child elements to become absolute positioning


    <!DOCTYPE html> <html> <head> <style> body { Background: ᦇ 60; // orange } .parent { position: fixed; width: 300px; height: 300px; right: 0; top: 0; Background: ා02bd00; // Green transform: translateX(0); } .child { position: fixed; left: 0; right: 0; top: 0; bottom: 0; Background: RGBA (0,0,0,0.2); // black transparent: Mask } </style> </head> <body> […]

  • JS determines whether the element can be scrolled


    Today, when solving the problem of IOS mobile terminal rolling penetration, we encounter a problem, that is to judge whether the elements can scroll and record the process. Take longitudinal rolling as an example, and horizontal rolling is the same.If you feel troublesome, you can check the code directly. Basic concepts Element.scrollHeight Scrollheight is a […]

  • Slide Puzzle verification


    1. Reference address: https://www.cnblogs.com/huang…2. Effect: 3. Logic: the drag of the bottom slider controls the movement of the small jigsaw. When the left distance is consistent with the x-coordinate of the cutting position, or is within a certain range, it is correct; the difficulty lies in cutting out the jigsaw. Refer to the above link […]

  • Some small details and error prone points about react router


    The purpose of this article is to share some details that are not paid much attention to in react router. Holistic writing import React from “react”; import { BrowserRouter as Router, Switch, Route, Link } from “react-router-dom”; export default function App() { return ( <Router> <div> <nav> <ul> <li> <Link to=”/”>Home</Link> </li> <li> <Link to=”/about”>About</Link> […]

  • Super simple integrated ml kit for dictation


    background I believe that we all had dictation when we first started to learn a language. Now when primary school students learn Chinese, an important homework is dictation of new words in the text. Many parents have this experience. However, on the one hand, the action of reading words is relatively simple, on the other […]

  • float


    floatCSS positioning mechanismNormal flow (standard flow)The elements are automatically arranged from left to right, from top to bottom Block level element: exclusive row, width and height can be set. If not, the default value is 100% In line element: width and height cannot be set. Width and height are the width and height of text […]

  • Explain class in ES6


    The article starts with personal blog catalog class Static method Static properties inherit super class Class is a grammar sugar, and its bottom layer is still throughConstructorTo create. So most of its functions, Es5, can do it. The new class method only makes the writing method of object prototype clearer and more like the syntax […]

  • CSS floating standard repair top collapse and clear float and IE compatible standard format


    Floating properties 1. Floating elements have left floats( float:left )And right float( float:right )Two kinds2. Floating elements will float to the left or right until they touch the boundary of the parent element and other elements3. Adjacent floating block elements can be in one line, and wrap if they exceed the parent width4. Floating allows […]

  • Spring transaction propagation mechanism


    In @ transfer (propagation = propagation mechanism) 1、 PROPAGATION_ Required (default, blank) a) Supports the current transaction. If there is no current transaction, a new transaction will be created. b) If there is a transaction at present, the transaction is added and merged into one transaction. example: 1) Parent method a (with Transaction) has child […]

  • Tp5.1 unlimited classified foreground display


    The multi-level classification display of the mall front desk, as shown in the figure, is generally three levels. So the code is only assembled to level three.     Database design, a total of 5 fields. The level field is convenient for displaying levels. PID is the parent classification ID, and PID is equal to […]

  • JS basics review_ scroll bar


    // log function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: window.pageYOffset, } } else { return { x: document.body.scrollLeft + document.documentElement.scrollLeft, y: document.body.scrollTop + document.documentElement.scrollTop, } } } console.log(getScrollOffset()) // log //1440 is the standard width console.log(window.innerWidth) The size of the element // log let box = document.getElementById(‘box’) console.log ( box.getBoundingClientRect ()) […]

  • How to center CSS horizontally and vertically


    Method one: to locate the parent phase and the son <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> body,div,p,ul,li { margin:0; padding:0; } .box { position: relative; width: 1000px; height: 600px; background-color: pink; margin: 100px auto 0; } .min { position: absolute; top:0; left: 0; right: 0; bottom: 0; width: […]