Use of gradients

The background gradient did not delay the screen. I thought it was the delay attribute of Transition added to the wrong object. But I found it was not. Note that the following hover attribute is not displayed on the page. Then we find that the gradient background-image: Linear-gradient () attribute actually shows a gradient mask image, which should be written on the element itself, rather than inside the hover, because it does not produce the desired change effect. The correct way to do this is to write the mask on the element itself and make the opacity invisible. Opacity: 1 is set using hover state; So you can see, and then transition is going to delay. Just check out the problem, oneself in doing the time again wrong. Wrong idea:

   .sub .sub-box {
       height: 400px;
       position: relative;
       transition: all 2s;
   }
   .sub .sub-box:hover {
       background-image: linear-gradient(transparent,rgba(123.216.143.0.8));
   }
Copy the code

The right thing to do

   .sub .sub-box {
       height: 400px;
       position: relative;
       transition: all 2s;
       background-image: linear-gradient(transparent,rgba(123.216.143.0.8));
       opacity: 0;
   }
   .sub .sub-box:hover {
       opacity: 1;
   }
Copy the code

When using Flex layout, there are three boxes, and the bottom two boxes are stacked on top of each other.

It turns out that the third box in the code is missing one, and then does not report an error, just defaults to meaningless

All syntax is correct, but CSS styles do not take effect

When writing type heart, all data write right, structure write right, style write right, but the style does not come out, check found that the style effect did not work. The link error was found in the CSS file.

The box cannot be centered

In the case of writing the bilibili homepage, I need to place a fixed position box under the box, after placing the box, the width is not set properly, it always extends to the right.

Finally, there are two problems: the parent box must set the width, otherwise the child box will not inherit. The parent box sets the width. If the child box does not set the width, the default inherits the width of the parent box. If the width is set, it is the set width. If neither parent box nor child box has a width, then the width is supported by the content. Height does not inherit, if not set by default by content support.

The second reason: I in order to achieve the B station navigation can control the effect of sliding, to set up the navigation bar above beyond the li box number of boxes, and there is no set overflow hide, lead to the screen area was enlarged, is a device – width be spilled li box opens, lead to me how I can set the percentage at the bottom of the box or the viewport is not wide, I lost a day’s work.

In addition, when using vw with viewport width, it is not necessary to use @VW as set. In some fixed places, VW can be used directly, because the size itself can adapt to the screen.

Image height problem, be sure to look at the base file set default content

In addition, when the same b station project, when writing the third time, didn’t at the top of the box is not high, the external header set up highly, but there is no themselves are nested inside box set width, want to let oneself open content, because the content part has seen, no higher than outside the box, but finally found the box was hold large, seek along while, Find all the child elements, which is higher than the outer box was found, but found a height of a tag is a bit unusual, high and wide are auto, but highly apparently unusual, because I put inside a small, don’t know what elements are enlarged, rummaged through all the properties, it can’t find a larger property, Finally trying to set the height of all levels of boxes limited it.

Another problem found here, both the line-height attribute and the center alignment of align-items, does not apply to my img tag, which turns out to be the default vetical align: bottom in the base file; As a result, my picture always overflows the bottom of the box, even if it is not big or small.

When doing mobile adaptive layout, it is important to set the width and height of the HTML and body, otherwise the height will be separated by the content of the sub-box

In the mobile Web stage, I was asked to write a style and set a background color behind the body. I couldn’t figure out how to set the height of the body. Finally, I found that I had to set the height of the HTML and the body first, otherwise it would be separated by the content.