• Front end interview 3 + 1 – day 129


    Today’s knowledge (August 23, 2019) – day 129 [HTML] is websql a specification of HTML5? What’s the difference between [CSS] absolute’s containing block calculation and normal flow? [JS] give an example of how JS can close the current window? [soft skills] how do you understand the idea of making wheels repeatedly? Project address: front end […]

  • CSS flex layout


    Flex layout Solutions to the problems we usually encounter. 1. Vertically center in the parent container.2. Make the children in the container occupy the same amount of space (width and height).3. Make the columns in the container equal in height. Check the flex layout example and its attribute usage online, and the effect is shown […]

  • Front end interview day 3 + 1 – day 133


    Today’s knowledge (August 27, 2019) – day 133 [HTML] what is the default canvas size? How to set it so as not to deform? [CSS] how to use CSS3 to set multiple background pictures for a div? [JS] write a method to reverse the words in the string and output them, such as:my love -> […]

  • CSS3 animation – steps function details


    In recent days, when looking at the source code implementation of some CSS3 animations, I found that there is a strange word steps in the animation of CSS code, which is written in the source code as follows: animation: thunder 2s steps(1, end) infinite; The steps function is found to beanimation-timing-function What’s the difference between […]

  • I’ll show you how to write a qualified technical resume


    background We’ll be here soonJob hopping seasonSome of my friends are more or less looking at better opportunities I also received a lot of resumes. There are hundreds of resumes in my hand, some of which are very good, some of which are not easy to read. In order to save time, I simply wrote […]

  • Implementation of font smaller than 12px


       with the zoom scheme, the zoomed label still occupies the space before zooming, and the vertical direction can be set by settingline-height: 1;Remove the original space, and then adjust the upper and lower margins, while the horizontal can be solved by adjusting the margin to a negative value or other methods. Sample code .font-size-8 […]

  • Multiline text beyond ellipsis – less implementation


    It’s not hard to have multiple lines of text, where a pit is encountered,-webkit-box-orient: vertical;When compiling web pack, this property will be killed by autoprefixer, resulting in style failure. The solution is as follows: /** *Multiline ellipsis (the container can not set the height) *When compiling webpack, autoprefixer will omit the – WebKit box original […]

  • Mobile 1px thin line problem – less implementation


    It’s better to use the zoom scheme and handle a single edge line; if it’s necessary to have edges on all four sides, it’s a bit troublesome. Although it’s feasible to use the zoom scheme, it’s recommended to give up or use SVG to do the background image in some equipment. Example code (less) /** […]

  • “Dry goods” CSS vertical horizontal center with variable width and height (9 kinds at most)


    Preface Vertical center is a commonplace problem in CSS, which is often mentioned in interview. So today we’re going to talk about nine different ways to center. There are common flex, transform, absolute, and so on. There is also a grid layout for CSS3. There are also pseudo element methods. Yes, you can read them […]

  • Using repeating linear gradient to realize a ruler


    Things like scales are repetitive, when it comes torepeatI thought about itrepeating-linear-gradientYou can tell by nameRepeat linear gradient, which can be implemented more convenientlyInterlacingIf you want to draw a background, it is repeated and interlaced, then it is right to use it; Design sketch principle There are three scalesCentimeter scale、Half centimeter scale、Millimeter scale, then draw […]

  • CSS grid: page grid layout has never been so simple


    Page layout is never a worry! If theTwo column layout, table layoutHoly Grail layoutYou’re exhausted by waiting! So the mobile terminal’s more diversified layout will definitely make you suffer! Table don’t know if you’ve used it? Has bootstrap been used? Did antd use it? These seemingly gaudy layouts are actually like a net. If the […]

  • Comparison of CSS shadow effects: drop shadow and box shadow


    Drop shadow and box shadow are both CSS attributes of shadow effect (halo effect). The biggest difference between them is that box shadow can only make rectangular shadow, while drop shadow can make shadow with the same shape as the opaque area of the object. Here are the usage of two CSS attributes: .drop-shadow { […]