1. What is the replacement element
In understanding the content, we need to have a common element in CSS - replaced elements. Replace element is "content (content) can be replaced by" elements common to have "input", "img", "iframe", "video" and so on. For example in picture "img src =" 1.png "/" We only need to replace the src of images, content elements will change, therefore, alternative content is one of the basic characteristics of the replacement element. Alternatively addition to the content, as well as alternative element characteristics.
(1) basic style change does not move, the original description of "the appearance of influence on the content of the page without the CSS" personally feel that there is something wrong. What is the basic style, in order to still pictures, for example, you can replace pictures by src, but you can not pass CSS to "a man" on the picture become "a woman." Sometimes, this is handy for us, as the most basic element replacement: "input type =" text "/" You can modify his borders, fonts and other attributes via CSS, but his basic style, such as cursor prompt, you can enter the area and so on, it is that you do not change the move, because if this is your style changed, users do not know where to enter. Of course, in some cases, this "basic style" has brought us great inconvenience, such as the "checkbox" basic style, is an ugly box, you can not modify the CSS, it is necessary to go through some special way. " cover "his original style. Here is not to do more to expand.
(2) basic dimensions, textual descriptions "has its own size", the original statement is not wrong, such as the "input" label, there is a default length and width of the input box by default, "video", "iframe" the default size of the "canvas" and other labels is 300 * 150, "img" the default size is 0.
(3) There are many CSS properties on the performance of its own set of rules, only the author here illustrates the vertical-align property, to replace elements and non-replaced elements, baseline non-replaced elements is small edge lowercase x, but replacing element is defined as the lower edge of the replacement element. (This problem can be done to expand the stated interest of small partners can look at the message below, what attributes behave differently in both elements)
2. Alternatively dimensioning rule elements
I personally will replace elements of the size of the weight descending into three categories: CSS> Private Properties> inherent size (Note: The author here will be divided into size CSS size, HTML size, intrinsic dimensions). Now I will be described on the three dimensions of width and height affect replace elements by way of example.
(1) the inherent size refers to the replacement of the original content elements, the original content is very interesting, with pictures, for example, "img src =" image link "/", due to the basic image size is (at Google) 0 but the picture itself also contains their width and height, as 200 landscape map 100, then the img tag in the absence of other styles described the circumstances of his final "inherent size" is 200 100, instead of 0, here refers to the original content the picture itself is the width and height. There are some elements do not need content will be high since the bandwidth to "input type =" text "/ " for example, you only need to add the html tag, he displayed an input text box, this is his the intrinsic size.
(2) replacing the private attribute refers to an element carrying properties, generally manifested in HTML tags such as "img width =" 200 "height =" 100 "src =" 400 image 300 of "/", since the width and height role of the private property, the picture will eventually manifested as width dimensions of height, that is, the inherent properties of the picture covering 400 300 There is also a hidden intrinsic properties, then the picture aspect ratio, in this case, the picture aspect ratio is 4: 3, so when you set the "img widht =" 200 "src =" 400 pictures 300 "/", since only set width, height is not set, the final picture height by width * Aspect Ratio = 150. This hidden proportion also take effect in CSS coverage.
(3) CSS property would not otherwise specified, and refers to a set of CSS properties, due to the heavy weight of CSS is higher than the private property, often makes the code difficult to maintain, for example, allow you to maintain this piece of code
<img src="1.png" width="200" height="200" />
<style>
img{
width:200px;
height:200px;
}
</style>
Look no problem, img CSS properties 200px 200px covers private property width height, which is the same form of expression, this time for a picture, size becomes 200 100, and later maintenance personnel that changed about private property height get away, and found that change does not move, to change to change again 200 200 Therefore, personal recommendations of the style with CSS all property maintenance replacement element will reduce a lot of unnecessary trouble.
3. Replace the relationship between the elements and content properties
Here we skip replacement elements and relations src directly to study the relationship replacement elements and content attributes in the CSS world, we attribute the content generated object called "anonymous replace elements", so content is generated content attribute replaced elements, the most common content replacement property in general :: before / :: after only appeared in, but in the Chrome browser, all content elements support attributes (including div), in other browsers, only :: before / :: after the only support. Therefore, we can consider the following two pieces of code that are almost the same.
<!-- 请在Chrome浏览器中尝试 -->
<img style="content: url('../1.png')" />
<img src="../1.png" />
They show the same result, but there are still some differences, because the replacement element itself can not be selected characteristics (text can not, are interested can own experiments), and therefore an element-generated image replacement can not be saved right, to be exact , the picture can not be selected. So when in use or pay attention to these small details.
4. The use of the auxiliary information generated content
Since the content attribute is only supported by all elements in the Chrome browser, so we were just explore public support :: after / :: What a supporting role before the two pseudo-element content there. In fact, we often use the clear after pseudo-class floating technology, the benefits of doing so is to combine accessibility and style, rather than adding redundant dom structure. Here is a simple code.
<-- after伪类清浮动 -->
<style>
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
In addition to using clear float after pseudo-class, there are some useful features. Author gave some examples as they may contain some of the forthcoming, so here only to provide links and addresses from the description, are interested can find out yourself.
- And an auxiliary vertical center justification is
- With the @ font-face rule to achieve the font icon
- Unicode achieved by inserting line breaks "Dynamic Loading ..." text animation
in addition to the above these, there are two more interesting personally think that accessibility will be launched later in detail, are generated using content attr attribute value of the content, and simple counter using the content directory structure.
4.content attr attribute value generated content
Since this feature is commonly used, relatively easy to use, and therefore carry out as a single, much content, the custom attributes is to obtain the DOM structure used to generate some of the information content. Let's look at how to achieve the following effects using auxiliary elements.
Code as follows:
<div class="list">
<div class="li" self="音乐">aaa.mp3</div>
<div class="li" self="电影">bbb.mp4</div>
<div class="li" self="书籍">《ccc》</div>
</div>
<style>
.li{
display: block;
line-height: 40px;
width: 200px;
padding-top: 40px;
position: relative;
background: yellowgreen;
overflow: hidden;
margin:10px 0;
}
.li::after{
content: attr(self);
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 80px;
background: yellow;
transform: translate(20px) rotate(45deg);
}
</style>
6 counter-depth understanding of content
content counter is a very easy to use and powerful features, in some cases, he will be more useful than manual counting, the same, the use of content completion of counting function, there are many areas requiring attention. Before understanding of CSS counter, we need to know two of his properties (counter-reset and counter-increment) and two methods (counter () and counters ()). The following will in turn explain these properties and methods.
First counter-reset, as the name implies, counter-reset is used to reset the counter, normally used to reset a counter parent container. Yes, but also because the record which counter, so this property also counter with the named function. By default, the counter is reset to begin counting from zero, of course, you may be manually set, and therefore there are two counter-reset attribute values, which are the name of the counter, and a reset value from the beginning a few.
counter-reset: hello 1; represents the name of the counter is hello (note require a quotation mark), the counter starts counting, of course, can not write this property, the default is 0. You also can simultaneously named to multiple counters, the individual feels nothing soft with not carried out. After setting the counter you can replace the content with the properties and counter () method counted. code show as below:
<div class="ctn">
<div class="chid">计数</div>
<div class="chid">计数</div>
<div class="chid">计数</div>
</div>
<style type="text/css">
.ctn{
font-size: 20px;
color: green;
background: yellow;
counter-reset: hello 1;
}
.chid::after{
content: counter(hello);
}
</style>
The final results as shown below:
It can be seen counting function into effect. Of course, the results we need is a counter can accumulate themselves, rather than always 1, this time you need to use a second property, counter-increment counter, by definition, increments the counter property is used, somewhat similar to the for loop the i ++, this property has two values, a first value representative of the name of the counter to be incremented, incrementing each value indicates the second number, the default value is incremented by 1.
content-increment: hello 2; represents hello counter by 2. We gave the example just look at the effect of adding this property.
<div class="ctn">
<div class="chid">计数</div>
<div class="chid">计数</div>
<div class="chid">计数</div>
</div>
<style type="text/css">
.ctn{
font-size: 20px;
color: green;
background: yellow;
counter-reset: hello 1;
}
.chid::after{
content: counter(hello);
counter-increment: hello 2;
}
</style>
The final results as shown in FIG.
Interestingly, the result is 3,5,7 rather than 1,3,5. Therefore it can be concluded that the value is reset each time increment encountered will return results directly additive. So if you are naughty, then on the parent element also wrote a counter-increment, then the equivalent value reset = reset + increment.
7. Use counters () counts nested directory structure implemented
Continuing with the previous one, before we use the counter () method to achieve the counting function, but we usually can not just No. 1, 2, ... there will be a number such as 1.2, and 1.3 and other sub former is counter () to do, which is to counters () can be achieved.
counters () and basic usage counter () Similarly, all counters (name, types), where a side note, name here is the name of the counter, then what is the second argument to do it? string used in the original, personally do not think it appropriate, in fact, if you know the list-style property, you know that in addition to Arabic numerals 1234, as well as Roman numerals, etc. can also be used to count the types supports all list-style property. Much gossip that look at how to implement it in a directory structure with counters ().
<!-- 探究循环计数器 -->
<div class="father">
<div class="children">
children
<div class="father">
<div class="children">children
<div class="father">
<div class="children">children</div>
<div class="children">children</div>
</div>
</div>
<div class="children">children</div>
</div>
</div>
<div class="children">
children
</div>
<div class="children">
children
</div>
</div>
<style type="text/css">
.father{
counter-reset: hello;
padding-left: 10px;
}
.children::before{
content: counters(hello,'-') '. ';
counter-increment: hello;
}
</style>
The final results as shown below:
Let's directory structure in an unusual point of view, make their experience difference between the two, only you can not write here, ha ha ~
<!-- 探究异常计数器 -->
<div class="father">
<div class="children">children</div>
<div class="father">
<div class="children">children</div>
<div class="children">children</div>
</div>
<div class="children">children</div>
<div class="father"></div>
<div class="children">children</div>
</div>
The final results as shown in FIG.
content part so far, the following will continue to explore padding, border and margin.