• Tag cloud effect using HTML and CSS (with demo)


    The effect of tag cloud is not difficult to see in blogs and websites. It is actually some keywords with hyperlinks, in order to emphasize the theme. Generally, the probability of occurrence is relatively high or the popular label text is relatively high, on the contrary, it is relatively low.   From tagcrowd.com We do […]

  • Significantly optimize PNG image size with CSS mask (recommended)


    This article is welcome to share and aggregate, full text reprint is not necessary, respect copyright, the circle is so big, if urgent need can contact authorization. 1、 Png images that cannot be further compressed For example, there is a PNG image as shown below (size 1 / 2 is shown), and there is still […]

  • Method of CSS inheriting inherit attribute


    Given a div with the following background image: Make the following reflection effect: There are many ways, but of course we need to find the fastest and most convenient way, at least no matter how the picture changes,divNo matter how the size changes, we don’t have to change our code. Method 1: – WebKit box […]

  • How to solve the problem of outside margin collapse in CSS


    First of all, let’s look at the three cases of outer margin collapse 1. When two adjacent block level elements meet, the upper element has the lower margin bottom and the lower element has the upper margin top, then the vertical distance between them is the greater of the two values. <style> .box1 { width: […]

  • Six interesting tips for setting CSS background pictures


    The background image may be one of the CSS attributes that all front-end developers have used at least a few times in our career. Most people don’t think the background image is unusual, but…… 1. How to fit the background image perfectly to the view body { background-image: url(‘https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80’); background-repeat: no-repeat; background-position: center; background-attachment: fixed; […]

  • CSS properties display:flow-root statement


    byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9404 This article is welcome to share and aggregate, full text reprint is not necessary, respect copyright, the circle is so big, if urgent need can contact authorization. 1、 Safari browser supports display:flow-rootWhen I first came out, I saw the compatibility. Tut Tut, I didn’t know it could be used in the production […]

  • CSS fill img image into the parent container div adaptive container size implementation method


    When multiple pictures are introduced into a page, we will encounter inconsistent picture sizes. We only need to display them in the same size. If we set the picture size directly, it will lead to picture deformation. This is the problem we encounter. Let’s see the solution <div> < img SRC = “imported picture address” […]

  • Implementation code of setting div background in CSS


    There are only two steps to add background control to a component <View className=”gifts” style={{ background: `url(${baseUrl}starMove/exclusiveEntrance/card.png) no-repeat`, backgroundSize: ‘100% 100%’, }} > <View classname=”gift-lists”></View> </View> Set background and backgroundsize. style={ width:100%; height:100%; } PS: now let’s introduce how the CSS file can make the size of the background image adapt to the size of […]

  • CSS box hide / show after the top layer of the implementation code


    .imgbox{ width: 1200px; height: 612px; margin-right: auto; margin-left: auto; margin-top: 60px; } .m1{ border: solid; border-width: 1px; height: 300px; width: 227px; } #m1img{ text-align:center; padding-top: 55px; } #img2{ margin-bottom: 35px; } p>span { text-decoration:line-through; } #where1{ position: absolute; left:412px; top: 60px; } #where2{ position: absolute; left:651px; top: 60px; } #where3{ position: absolute; left:890px; top: 60px; […]

  • Some common font size font units and line height in CSS


    PX (pixel) pixel I believe you are not unfamiliar with the term pixel. Next, let’s introduce some small knowledge points of this unit Pixel is composed of two words: picture and element. Pixel is not an absolute unit of natural length. For example, the same size of 1px has different “natural length” on different devices. […]

  • Making a responsive histogram with CSS grid layout


    Recently, I like to play with charts. Out of curiosity, I want to find a better way to make charts with CSS. I began to learn online open source chart library, which is very helpful for me to learn new and unfamiliar front-end technologies, such as CSS grid. Today, I’d like to share with you […]

  • CSS columns to achieve end aligned layout of the sample code


      1、 Go around in a big circle After going around for a long time, I found that the simplest way to achieve the alignment layout is to use CSS columns multi column layout. For example, we want to achieve the alignment of the two ends of the three column elements, the middle gap is […]