Shulou(Shulou.com)06/02 Report--

This article mainly explains "several classic problems that are easy to be blinded by analyzing CSS". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. now please follow the editor's train of thought to slowly deepen, together to study and learn "Analysis of CSS easy to make people blind several classic problems" bar!

1. CSS

1.1 element default blue border

For some events (such as click, focus, etc.) of input tag elements (such as button, text, areatext, etc.), a blue border appears by default in many browsers. For example, when both background and border of an ordinary button are set to none, the triggered style is as follows:

This is caused by the default outline of the element, which is a protection mechanism of the browser that highlights the element. Just kill it as follows:

/ / method 1: outline: none / medium; / / method 2: outline-width: 0

1.2 transparent background, opaque text

We usually use opacity to make the background transparent. This attribute is supported by all browsers and can be boldly used. The transparency ranges from 0.0 (completely transparent) to 1.0 (completely opaque), but this method makes all its child elements transparent. If you only want to make the background transparent and other opaque, you can use rgba to deal with the background:

Background-color: rgba (red, green, blue, alpha)

The alpha sets the transparency, with a value between 0 and 1. This method is available to all browsers except the following IE9. Take a look at the effect:

By the same token, we can also use this method to make the whole background transparent, that is, write an extra div as a modal layer to do transparent processing, you can obviously see that the above text is not transparent:

The codes for the above effects are as follows:

/ / html you will smile and let go and promise not to cry and let me release my new album. Header1 {opacity: .6 .header2 {background-color: rgba (0,0,0,0.45);} .handle-opacity {position: absolute; width: 100%; height: 100%; background-color: rgba (255,255,255,0.45); header {background-color: rgba (0,0,0,0.45);}}

1.3 div has built-in img elements, always with spacing at the bottom

If you wrap an img with a div, it will appear that the img cannot completely cover the div space, leaving a gap at the bottom.

The reason for this phenomenon is that img is an inline element, and the browser leaves some space for downline characters (such as g, y, j, p, Q) that occupy more space at the bottom than other characters (depending on the current font size). This rule affects the inline element img tag (its default vertical alignment is based on the baseline, that is, vertical-align: baseline). Similarly, the in-line elements will leave such a safe distance from the external elements. The right side of the image above is the effect of adding text, which speaks for itself.

Now we know that this phenomenon is mainly caused by the downlink string protection mechanism and the fact that img is an inline element, so the solution starts from these two points and is sorted out as follows:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Div sets font-size: 0 or line-height: 0, and then the row height is 0

Img sets vertical-align: top or middle/, so that it is no longer aligned with the default baseline

Mg sets the display:block to become a block-level element.

To sum up, I think that method 3 is the best, and method 1 is not recommended.

1.4 elements are automatically filled with background color

This scene often appears in scenarios such as form input, and it is really weird to see it for the first time, as shown in the figure:

That is, when the browser (chrome) automatically fills the input box, hiding will automatically bring a background (yellow or gray blue) to the input box. This problem is caused by chrome adding:-webkit-autofill private pseudo attribute to the automatically populated input, select, textarea, and so on by default. A better solution is to override the style, as shown in the code:

Input:-webkit-autofill {box-shadow: 000px 1000px white inset! important;} select:-webkit-autofill {box-shadow: 000px 1000px white inset! important;} textarea:-webkit-autofill {box-shadow: 000px 1000px white inset! important;}

The way to compare crap is to set up a ban on automatic filling, but don't do that.

1.5 transform base values cause font blur

Transform, as the proudest attribute of CSS3, has become an indispensable method in front-end development, but it has a rendering problem, that is, when the element is set with transform and its value is a cardinality or decimal, and the colleague's overall height also has a cardinality, the internal text will become blurred, as shown in the figure:

In the blurred state of the above image, the following image is corrected. The specific reason may be that the transform transform creates a separate painting layer on the browser and renders it again, and the surrounding text is also processed during this rendering. If the text with an odd height may have half a pixel of computation, the browser will optimize the rendering of this half pixel, so the edge will be blurred. The solution is:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Do not set cardinality and hourly values for transform attribute values

Do not adjust the overall element height to the cardinality.

1.6: last-child and: last-of-type

As a pseudo-class selector commonly used in CSS,: last-child is often used, but sometimes in extreme cases, it will fail unexpectedly and make people confused. The example is as follows: three img tags are wrapped in card. The current requirement is to make the frame of the last picture pink. The code is as follows:

/ / html

/ / css .card {> img {width: 150px; margin-right: 10px; &: last-child {border: 5px solid pink;}

In the same way: last-of-type can also be implemented:

.card {> img {width: 150px; margin-right: 10px; &: last-of-type {border: 5px solid pink;}

The effect is as follows:

Now to add a span to the img, it is found that last-child is invalid:

/ / html

Next is. / / css .card {> img {width: 150px; margin-right: 10px; &: last-child {border: 5px solid pink;}

At this point: last-of-type is still fine:

It is now concluded that:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

: last-child selects the last element in a group of sibling elements, and the last element must be the specified element declared (note 2 conditions)

: last-of-type selects the last element of the specified type in a group of sibling elements.

Last-of-type is more rigorous and less prone to unexpected bug, so I recommend it. The same applies to: nth-last-child (n) and: nth-last-of-type (n)

II. DOM

In this section, I will describe some of the problems that are easily overlooked in some DOM operations.

2.1 IOS date display issu

For those of you who often do H5 mobile development, I think this problem is no stranger, that is, in the departmental IOS version (IOS5 and below), the parsing of the string time format with "-" interval is not successful. For example, we wrote such a chicken rib time format adapter:

Function DateFormat (date) {if (! date) return null; date = new Date (date); let Y = date.getFullYear (); let M = (date.getMonth () > = 0 & & date.getMonth () = 0 & & date.getDate () = 0 & date.getMonth () = 0 & date.getDate ()

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.