My CSS memos-advanced selector, box model, positioning

Before learning CSS, I always felt like it was a matter of design personnel. This idea went backwards with time and found that it was not the case at all. No, I quickly found this proficient CSS and looked at it, I also learned a lot.
I have recorded the key parts for your convenience and convenience!

Page Navigation:
Advanced selector: Sub-Selector | adjacent compatriot selector | attribute Selector
Box Model: Correct box model | blank side Overlays
Positioning: relative positioning | absolute positioning

1. Advanced Selector
1.1 Sub-Selector

A small sample code snippet of the sub-Selector
# Nav> li
{
Border: 1px solid # ccc;
}

<Ul id = "nav">
<Li> home </li>
<Li> services
<Ul>
<Li> Design </li>
<Li> Consultancy </li>
</Ul>
<Li> Contact Us </li>
</Ul>

The list items in the outer table have a border, but the list items in the nested list do not.
Note: in IE6 or earlier versions, child selectors are not supported. You can use a general selector to simulate the effect of child selectors. Use the universal selector to overwrite the style on the child element's descendant to implement IE6 simulation (I did not try it)
# Nav li
{
Border: 1px solid red;
}
# Nav li *
{
Border: 0px solid red;
}

1.2 adjacent compatriot Selector
Adjacent sibling selector can be used to locate an element after an element under the same parent element. IE6 or earlier versions are not supported, so in actual use, you prefer to reset the style for this element that requires special settings.

1.3 attribute Selector
1.3.1 The element contains an attribute
You can search for elements based on whether an attribute exists or contains a value to achieve powerful results. It belongs to CSS2, which is not supported by IE6 or earlier versions. However, it is necessary to introduce
<Abbr title = "Cascading style Sheets"> CSS </abbr>
In a browser that supports CSS 2.0, this help prompt is displayed when you move the mouse over abbr. However, if you want to make it more eye-catching, such, apply a style different from that of other elements to an element with the title attribute to display a prompt.
Abbr [title] {border-bottom: 1px dotted #999 ;}
Abbr [title]: hover {cursor: help ;}
In this example, FF supports perfect performance. IE7 is generally acceptable. If there is no content behind the abbr, the underline may not be displayed (TBD, my test result ), IE6 is not supported.

1.3.2 example of an element whose attribute value is equal to or equal to a specific value in a specific value Element
A [rel = "abc"]
{
Background-color: # ccc;
Padding-left: 20px;
}

<A href = "http://www.cnblogs.com/bit-sand" rel = "abc"> cnblogs.com </a> <br/>
<A href = "http://www.baidu.ocm"> baidu </a>

The cnblogs link has a background, but the following does not

The attribute value in element 1.3.3 contains the Code
A [rel ~ = "Abc"]
{
Background-color: # ccc;
Padding-left: 20px;
}

<A href = "http://www.cnblogs.com/bit-sand" rel = "I am abc! "> Cnblogs.com </a> <br/>
<A href = "http://www.cnblogs.com/bit-sand" rel = "I am abc! "> Cnblogs.com </a> <br/>
<A href = "http://www.baidu.ocm"> baidu </a>

The attribute value in element 1.3.4 starts with this value. Code
A [rel ^ = "abc"]
{
Background-color: # ccc;
Padding-left: 20px;
}
<A href = "http://www.cnblogs.com/bit-sand" rel = "abcsdfdsfsd! "> Cnblogs.com </a> <br/>
<A href = "http://www.cnblogs.com/bit-sand" rel = "I am abc! "> Cnblogs.com </a> <br/>
<A href = "http://www.baidu.ocm"> baidu </a>

This item is useful in the link. It can tell where the link is redirected and set different attributes, which is not supported by IE6! Now I'm getting a little more and more look down on IE6 ,~~~

The attribute value in the 1.3.5 element ends with a specific word. Code
A [href $ = "bit-sand"]
{
Background-color: # ccc;
Padding-left: 20px;
}

<A href = "http://www.cnblogs.com/bit-sand" rel = "I am bit-sand"> cnblogs.com </a> <br/>
<A href = "http://www.baidu.ocm"> baidu </a>

This stuff is also very useful. In terms of user experience, if the downloaded file is in doc or pdf format, we can set different styles according to different formats, does the user feel very good? IE6 is not supported.

I have learned so much about the usage of selector. If you have any comments or ideas, we will discuss them below... Back to Top

2. Notes about the Box Model
2.1 correct Box Model
In CSS, width and height indicate the width and height of the content area. Adding filling, borders, and blank edges does not affect the size of the content area, but increases the total size of the element box.
For example, assume that each side of the box is filled with 10 pixels of white space and 5 pixels. If you want the box to reach 100 pixels wide, you need to set the content width to 70 pixels (the standard is like this. If the browser doesn't play the cards according to the rules, we can't do it, IE6 is like this)
Note:The Width of IE6 includes not only the content Width, but also the fill and Border Width.
Solution:At present, the best solution is to avoid this problem, that is, do not add a fill with the specified width to the element. If you must add a fill for the element with the specified width, then, add the filled or blank edge to the parent or child element of the element.
2.2 blank side superposition
When two vertical blank edges meet, they form a blank edge. The height of this blank edge is equal to the height of the two overlapping blank edges.
This overlay can occur in:

1. The top blank edge of the element is superimposed on the bottom blank edge of the preceding element.
2. The top blank edge of the element is superimposed on the top blank edge of the parent element.
3. Empty element. When there is no border or fill, the top blank side and the bottom blank side are superimposed.
4. A blank edge that has been superimposed on an empty element is superimposed on a blank edge of another empty element.

Back to Top

3. Positioning
3.1 relative positioning
Relative positioning can be understood as follows: if an element is relatively located, it will appear at its location. Then, you can set the vertical or horizontal position, move the element relative to its start point.
When relative positioning is used, elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element overwrites other boxes.
3.2 absolute positioning
Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream. Absolute positioning makes the element's position irrelevant to the Document Stream, so it does not occupy space.
The position of the absolute positioning element is relative to the nearest located ancestor element. Because it has nothing to do with normal streams (document streams), there may be overwriting problems. You can set the z-index attribute to control the stacking order of these boxes.
Note:Compared with the relative positioning ancestor element, the absolute positioning of the box is very good in most browsers. However, IE6 and earlier versions have a bug. If you try to set the absolute position of the box relative to the right or bottom of the relatively positioned box, make sure that the size of the relatively positioned box has been set. If not, the position is located relative to the canvas.

Solution:The cause of this Bug is that the relatively located element does not obtain the internal hasLayout attribute of IE/Win. They do not create a new positioning context, and all absolute positioning non-prime relative windows are located. One solution is to explicitly set the Width and Height for the container. If you do not know the Width and Height of the container, you can use the Holly trick to provide the container with an arbitrary Height so that the container can have this layout.

 

Some common solutions for IE6 are to set the position attribute to relative, set the display attribute to inline, or set the width or height to fix many bugs.

4. Line breaking

1. word-wrap: controls the line feed.
Normal;
Break-word: force line feed. There is no problem with Chinese and no problem with English statements. However, FF does not work for long strings .. If necessary, the word-break is triggered.

2. word-break: determines whether a word is disconnected.
Normal: by default, English words are not separated. It seems that it only works for Asian text.
Break-all: indicates a broken word. When a word reaches the boundary, the next letter automatically goes to the next line. It mainly solves the problem of long strings in English and does not work on FF.
Keep-all: continuous Words in Chinese, Japanese, and Korean. That is to say, in this case, word-wrap is not used, and the Chinese text will not wrap. (The English statement is normal .)

Summary:
Ie:
Use word-wrap: break-word; all are normal.
Ff:
If none of the two are used, Chinese will not cause any problems. There are no problems with English statements. However, long strings may cause problems in English.

To solve the problem of long strings in English, word-wrap: break-word; word-break: break-all; is generally used ;. However, this method causes the words in Common English statements to be disconnected (IE only), but this method is meaningless.
For long strings of English, it is a malicious thing (not all of them are like this). Naturally, you don't have to worry about it. However, we also need to find some way to prevent it from making the container large.
With: overflow: auto; ie, the long string is automatically folded. Ff, the long string will be covered.

Therefore, in summary, the best way is word-wrap: break-word; overflow: hidden; instead of word-wrap: break-word; word-break: break-all ;.
Word-wrap: break-word; overflow: auto; no problem in ie. In ff, long strings will be covered by some content.