Home > Article > Web Front-end > Detailed explanation of outline_html/css_WEB-ITnose
Detailed explanation of outline_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:492810browse
The outline attribute is not usually used much. Recently, I was asked to study the role of this attribute.
The outline attribute added by CSS2 is translated into Chinese as outer outline.
What is the outline of the horse?
Contour refers to the edge; the periphery of an object or the outer frame of a figure.
In this case, the outer outline is the outer border.
Look at the formal definition: Outline is a line drawn around an element, located outside the edge of the border, which can highlight the element. The outline attribute sets the outline around the element.
Look at a more practical experience: In the browser, when a link or a radio gets focus by clicking the mouse or using the Tab key, the element will be outlined with a dotted line frame around. This outline dotted box is outline.
Now that I have a general understanding, let’s continue the analysis below.
The outline in CSS2 is set like this:
p{ outline-style:dotted;} It looks no different from the border.
Look at the support level
It looks like the situation is great, but the old IE6-7 seems to be incompatible, so I want to use outline instead of border Children's shoes may be disappointing. Maybe it's for this reason that I usually use it less.
Outline also has a less commonly used attribute, outline-offset, which sets the relative offset of the outer outline. The relative here can be understood as the standard box model above the W3C (within the border)
div { height: 100px; width: 100px; margin: 50px auto; outline: 10px solid rgba(255,255,0,9); background: black; outline-offset: 10px; border:5px solid blue; } For example, the effect after setting like this is like this
The yellow one is the outline. After setting the outline-offset, it is offset 10px outside to reveal The background color of the body at the back is red, and the blue one is the border.
The relationship between outline and background
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Examples</title> 7 <style type="text/css"> 8 div { 9 height: 100px;10 width: 100px;11 margin: 50px auto;12 outline: 10px solid yellow;13 background: gray;14 }15 16 body {17 background: red;18 }19 </style>20 </head>21 22 <body>23 <div>24 啦啦啦啦啦啦25 </div>26 </body>27 28 </html> The result is like this, in The body sets the class background color to red. The div inside the body sets a yellow outline color, and the outline color is above the background.
Outline of block-level elements and inline elements
Same as border, you can set the outline and border of inline elements or block-level elements at the same time
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7 span{ 8 outline:1px solid red; 9 border:1px solid blue;10 }11 p{12 outline:1px solid yellow;13 border:1px solid gray;14 }15 </style>16 </head>17 <body>18 <p>刘延东与国家<span>体育总局局长刘鹏、北京市市长王安顺等12人将向国际奥委会进行陈述，向全世界展示北京举办2022年冬奥会的实力和信心。全会开幕 不记名投票选出冬奥举办地国际奥委会第128次全会昨晚在吉隆坡会展中心隆重开幕。国际奥委会委员、2022年冬奥会申办</span>城市代表等出席开幕式。国际奥委会委员、马来西亚奥委会主席伊姆兰，国际奥委会主席巴赫和马来西亚总理纳吉布先后致辞。19 国际奥委会第128次全会的一项<span>重要议程</span>是以不记名投票方式选出2020年冬青奥会和2022年冬奥会的举办城市。 20 本次全会将持续到8月3日。在为期四天的会议中，国际奥委会委员们还将围绕《奥林匹克2020议程》进行讨论，并听取里约奥运会、平昌冬奥会、东京奥运会以及未来两届青奥<span>会筹备工作进展的报告。此外，全会还将选举一名国际奥委会执委和若干名委员。 21 国际奥委会全会是国际奥委会一年一度的内部会议</span>。参加会议的人员为国际奥委会委员，相关国际单项体育联合会、国家（地区）奥委会代表等。 据新华社电 22 </p>23 </body>24 </html> Although it doesn’t look good, I can barely look at it.
In fact, the levels of the outline of inline elements and the outline of block-level elements are different.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>块级元素与内联元素outline作用的不同</title> 6 <style> 7 img{ 8 width: 100px; 9 height: 100px;10 }11 div.pic1{12 outline: 60px solid rgba(255,255,0,0.5);13 }14 img#picture3{15 outline: 55px solid red;16 }17 18 </style>19 </head>20 <body>21 <div class="pic1">22 <img id="picture1" src="zhege4(1).jpg" alt="picture" />23 </div>24 <div>25 <img id="picture2" src="zhege8(1).jpg" alt="picture" />26 </div>27 <div class="pic3">28 <img id="picture3" src="zhege4(1).jpg" alt="picture" />29 </div>30 <div>31 <img id="picture4" src="zhege8(1).jpg" alt="picture" />32 </div>33 </body>34 </html> The result is like this, can’t you understand? Mao has something to do with it, so take your time.
First, four divs wrap four pictures, and I won’t talk about the pictures. Add a yellow slightly transparent outline to the div, and add a red outline to the image.
Then pinch and notice that the yellow outline can cover the lower image, and the two red outlines can cover the upper one but not the lower outline.
This is the difference between the outline coverage of inline elements and block-level elements.
The outline of a block-level element can cover the content of the above and below elements, while the inline element can only cover the content of the above element.
If you are tired after seeing this, you can make a cup of coffee and take a rest. The following is the key point.
The following is a discussion of the outline level issue (or cascading issue)
The code is as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Examples</title><style type="text/css"> div{ height:100px; padding:10px; margin:20px; border:10px solid #ff00ff; } div:nth-child(1){ background:yellow; } div:nth-child(2){ background:gray; outline:100px solid rgba(0,255,0,1); } div:nth-child(3){ background:green; }</style></head><body> <div></div> <div></div> <div></div></body></html> The result is that the middle outline covers the content, background, and border above and below. If you give the outline a large enough value, it can cover the entire screen except itself. Similar to the picture, if the green continues to extend, it can cover the screen.
But if you add outline to the top and bottom divs
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Examples</title><style type="text/css"> div{ height:100px; padding:10px; margin:20px; border:10px solid #ff00ff; } div:nth-child(1){ background:yellow; outline:10px solid rgba(255,0,0,1); } div:nth-child(2){ background:gray; outline:100px solid rgba(0,255,0,1); } div:nth-child(3){ background:green; outline:10px solid rgba(255,0,0,1); }</style></head><body> <div></div> <div></div> <div></div></body></html> The result becomes like this
The outline of the following div covers the outline of the previous div
It is not difficult to think of what outline looks like here. The outline is like a photo frame. box, above the content (photo). And the outline of the element later on the page will cover the outline of the previous one.
Or it can be understood this way: the page draws the Render Tree (the rendering tree, or the rendering tree), and draws the outline (outline) in the order of drawing. In fact, if the specificity of other styles is the same , the latter one will overwrite the previous one, the same reason.
What if it floats?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7 div{ 8 height:100px; 9 padding:10px;10 margin:20px;11 border:10px solid #ff00ff;12 }13 div:nth-child(1){14 background:yellow;15 outline:10px solid rgba(255,0,0,1);16 }17 div:nth-child(2){18 background:gray;19 outline:100px solid rgba(0,255,0,1);20 float:left;21 width:100px;22 }23 div:nth-child(3){24 clear:both;25 background:green;26 outline:10px solid rgba(255,0,0,1);27 }28 </style>29 </head>30 <body>31 <div></div>32 <div></div>33 <div></div>34 </body>35 </html> The second div in the above picture is floating. The amazing thing is that the outline of the first div actually comes out. Same situation as the last div. Here I try to add some text, and the result is that the text is above the outline.
That is to say, the outline is above the ordinary background and border, and below the ordinary outline and content.
What if it is positioned?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Examples</title> 6 <style type="text/css"> 7 div{ 8 height:100px; 9 padding:10px;10 margin:20px;11 border:10px solid #ff00ff;12 }13 div:nth-child(1){14 background:yellow;15 outline:10px solid rgba(255,0,0,1);16 }17 div:nth-child(2){18 background:gray;19 outline:100px solid rgba(0,255,0,1);20 position: relative;21 width:100px;22 }23 div:nth-child(3){24 clear:both;25 background:green;26 outline:10px solid rgba(255,0,0,1);27 }28 </style>29 </head>30 <body>31 <div></div>32 <div></div>33 <div></div>34 </body>35 </html>
Relative positioning will go to the top after relative positioning, absolute positioning is the same, and fixed positioning is the same. Here is the case where z-index is not set. If z-index is set, the stacking order of divs can be changed, which also includes the stacking order of outline.
Summary: The hierarchical order of outline is as follows
- Outline is presented differently in different formatting contexts. In block-level elements, the content on both sides can be covered. . Inline elements can overwrite the content above.
- Normally, the outline will be displayed normally in the order of the back covering the front (under the same circumstances, it is like there are no floats in the document flow, or they are all floats, and the positioning of z-index does not count)
- If the page has floating elements, the outline of the floating element is displayed first, and then the outline of the normal document flow is displayed (the outline of the floating element is overwritten by the outline of no floating elements)
- If the page has positioned elements (relative , absolute, fixed (excluding static), after displaying the floating element, the normal document flow is displayed, and then the positioned element is displayed (if z-index is not set, setting it is equivalent to the browser executing other commands), of course Positioned elements can use the z-index attribute to move the element back and forth, but what we are discussing now is the default browser display of outline without setting z-index.
- In fact, most outlines are not used like borders. The function of outline is also mentioned above. It is just a small dotted line by default in the browser, which usually needs to be eliminated. For example, outline: none; >