• Box horizontal vertical center


    Page main structure populationhtmlstructure <article> <div></div> </article> cssstructure * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } article { width: 100%; height: 100%; } div { width: 200px; height: 150px; background-color: skyblue; } Box centered horizontally margin div { margin: 0 auto; } text-align article { text-align: center; } […]

  • JS listens for element resize detector


    Previously, monitoring element size changes can be used convenientlyjQueryMonitor element’sresizeevent: $(‘#box’).on(‘resize’, function () { console.log(‘resize’) }); However, subsequent versions have been cancelled due to poor performance, and their own implementation is time-consuming and laborious. Therefore, an open-source plug-in, element resize detector, is introduced here. Download address of plug-in: https://github.com/wnr/element-resize-detector/tree/master/distYou can choose between compressed and uncompressed […]

  • Some interview questions in the interview


    Make a record of some interview questions you met during the interview:1. CSS section① For flex layout, we will ask about some attributes of the layout in flex, not limited to those we often use② Box sizing weird box model③ How to center the box horizontally and verticallyOn the basis of centering a box horizontally […]

  • CSS implementation of two or more lines of text overflow display ellipsis (…)


    1. As we all know, it’s very simple to force a line overflow to display an ellipsis (…) overflow:hidden;// Hidden beyond text- overflow:ellipsis;// Displays an ellipsis to represent the trimmed text. white- space:nowrap;// nowrap 2. If you want to force two or more lines, you need to use the knowledge points of CSS3 Most online […]

  • Probably the most complete set of “text overflow truncation and ellipsis” schemes


    This article starts from the front-end team blog of Zhengcai cloud: probably the most complete collection of “text overflow truncation and omission” schemes preface In our daily development work, text overflow truncation is a common business scenario detail to consider. It seems “common”, but there are different differences in implementation. Is it single line or […]

  • Synchronize the warehouse of code cloud to GitHub


    Question: do you want to transfer the warehouse on the code cloud to GitHub? Solution: There is a one click Import on the code cloud, which can import the warehouse on GitHub to the code cloud. In fact, GitHub also has the same function, as shown in the following figure: Copy the URL of the […]

  • Learn how to use markdown, how to write HTML and CSS, and how to name a class


    HTML attribute order class id data-*,name src, for, type, href title, alt aria-*, role /*A label*/ <a class=”…” id=”…” data-modal=”toggle” href=”#” title=’…’ style=”…”> Example link </a> /*Input tag*/ <input class=”…” id=”…” data-modal=”toggle” type=”text” name=”…” value=”…” /> /*IMG tag img must have alt*/ <img class=”…” id=”…”-“; Class uses meaningful names, organized or purposeful names; The class […]

  • HTML introduction learning summary


    This week ended the production of public comments, which is mainly a process of constant familiarity. Many problems encountered in the process have been encountered and reasonably solved before, and are ready to enter the next stage of learning. This blog is mainly to sort out the thoughts in the production process Thinking and understanding […]

  • CSS common interview questions


    1.display: none;andvisibility: hidden;The difference between (1) Display: none; will make the element disappear from the rendering tree, and will not occupy space when rendering Visibility: hidden; does not make the element disappear from the rendering tree. When rendering, it takes up space and does not respond to hover events Opacity: 0; will directly hide and […]

  • [CSS Specification] containing block


    brief introduction Inclusion block is a very important concept in CSS. In short, where should an element be displayed and located? It should be in the inclusion block. How to find the inclusion block of a given element is the problem discussed in this chapter In addition, this article is not the standard translation of […]

  • Triangle and arrow through CSS frame


    1、 CSS box model Boxes include: margin, border, padding, contentThe border border presents a smooth oblique line. With this feature, small triangles can be obtained by setting the width and color of each border.Div element is a block level element, displayed as a block box, which can be used for specific implementation. <div class=”triangle “></div> […]

  • Pure JS to enlarge and reduce the dragging mining pit


    This article first appeared in the blog of front-end team of Zhengcai cloud: pure JS to realize zooming in and out, dragging and stepping on the pit Preface Recently, the team needs to make an intelligent customer service suspension window function, which needs to support functions such as dragging, zooming in and zooming out. Because […]