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

This article mainly introduces the relevant knowledge of "how to use CSS replacement elements". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use CSS replacement elements" can help you solve the problem.

1. Replace element

According to whether the content has replacement content, we can also divide elements into replacement elements and non-replacement elements.

A replacement element, as the name implies, means that the content can be replaced.

This kind of element that renders content through an attribute is a replacement element.

Therefore,

, or form elements

1. The appearance of the content is not affected by the css on the page, in professional terms, that is, how to change the appearance of the replacement element when the style is outside the role of css?

Need to be similar to the appearance attribute, or the browser itself exposes some style interfaces, such as:-ms-check {} you can change the internal style of the single check box in the higher version of IE browser.

two。 Has its own size, in web, many replacement elements do not have a clear size setting, the default size is 300px X 150px such as

There are also many elements that replace elements with 0 pixels, such as

Picture

3. You have your own set of performance rules for many css attributes. The more representative is the vertical-align attribute, which is different for substituting elements and non-substituting elements.

4. Replace the default display value of an element

5. Rules for calculating the size of a replacement element

1. Inherent size

It refers to the original size of the content of the replacement element itself, for example, pictures and videos have their own width and height when they exist as a separate file.

2. The concept of HTML size is slightly abstract.

The HTML size can only be changed according to the HTML attribute

For example, the width,height property of img

Size attribute of input, cols,rows attribute of textarea

3. Css size, especially the size that can be set through css width,height or max-width/min-width and max-height/min-height, corresponding to the content-box in the box size.

The priorities of the three are as follows

Css size > HTML size > inherent size

During web development, in order to improve image loading performance and save bandwidth costs, the following images will be loaded asynchronously on the first screen. Then, for the sake of layout robustness and good experience, the image to be loaded will often use a transparent image to occupy space, for example:

In fact, this transparent booth map is also a redundant resource, we directly:

Then, the same redundant effect can be achieved with the following css styles

Img {visibility: hidden}

Img [src] {visibility: visible}

Attention, here.

There is no src attribute directly. Again, there is no src= ", src=". In many browsers, there will still be requests, and the request is the data of the current page. When the src attribute of the picture is default, the image will not have any requests, which is the most efficient way to implement it.

The inherent size of the replacement element in the css world has a very important feature, that is, "We cannot change the inherent size of this replacement element."

Div::before {

Content: url (1.jpg)

Display: block

Width: 200px

Height: 200px

}

The width and height attributes are ignored directly, and the original size of this image is 256px X 192px.

4. How far is the distance between the replacement element and the non-replacement element

Viewpoint 1: there is only one src attribute between a replacement element and a non-replacement element

Usually used pictures will definitely be removed using the src attribute, so it is hard to avoid thinking that

It's equivalent to a picture, but it's not at all, if you remove the src attribute.

In fact, it is an inline style similar to a common tag, that is, it becomes a non-replacement element.

Viewpoint 2: there is only one CSS content attribute between the replacement element and the non-replacement element

A replacement element is a replacement element because its content is replaceable, and this content is margin,border,padding, and content, the content box in these four boxes.

The content of the corresponding css attribute, so theoretically, the content attribute determines whether to replace or not replace elements

Img {content: url (1.jpg)}

This is the end of the introduction to "how to use CSS replacement elements". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.