I've stepped on those CSS pits, come take a look!

Stacking order

In general, all styles will be stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest priority.

1. Browser default settings
2. External style sheet
3. Internal style sheet (located inside the label)
4. Inline style (inside HTML element)

It is worth different writing and units

In addition to the English word red, we can also use the hexadecimal color value # ff0000:

p { color: #ff0000; }

__In order to save bytes, we can use the abbreviated form of CSS: __The color value in the rrggbb format can be represented by the abbreviation of #rgb format. The style sheet will automatically extend the color value of less than 6 digits by rgb = rrggbb 6-bit color value

p { color: #f00; }

We can also use RGB values ​​in two ways:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Note: When using RGB percentages, write the percentage symbol even when the value is 0. But in other cases, this is not necessary. For example, when the size is 0 pixels, there is no need to use px units after 0, because 0 is 0, no matter what the unit is.

The abbreviations you should know

Using abbreviations can reduce the size of CSS files and make them easier to read. This article mainly introduces the main abbreviation rules of CSS. The content involves color, box size, border, background, font, list and so on. The main rules of CSS abbreviations are as follows:

• Color (see example above)

• Box size

1. property: value1 -indicates that all edges are a value value1;
2. property: value1 value2 -indicates that the values ​​of top and bottom are value1, right and left are value2
3. property: value1 value2 value3 -indicates the value of top It is value1, the values ​​of right and left are value2, and the value of bottom is value3
4. property: value1 value2 value3 value4 – The four values ​​in turn represent top, right, bottom, left (clockwise: upper right lower left)

• Border (border)
  syntax: border: width style color;
  

The properties of the border are as follows:

border-width: 1px; border-style: solid; border-color: # 000;
can be abbreviated as a sentence:

border: 1px solid # 000;

• 背景(Backgrounds)
  语法：background:color image repeat attachment position;
  

The properties of the background are as follows:

background-color: # f00; background-image: url (background.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0;

can be abbreviated as a sentence:

background : # f00 url (background.gif) no-repeat fixed 0 0;

__Note: __You can omit one or more of the attribute values, if omitted, the attribute value will use the browser default value, the default value is: color: transparent image: none repeat: repeat attachment: scroll position: 0% 0%

• Fonts

The attributes of the

font are as follows: font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 140%; font-family: "Lucida Grande", sans-serif ;

Can be abbreviated as a sentence:

font: italic small-caps bold 1em / 140% "Lucida Grande", sans-serif;

Note: If you abbreviate the font definition, at least two values ​​of font-size and font-family must be defined.

• Lists

The properties of list are as follows:

list-style-type: square; list-style-position: inside; list-style-image: url (image.gif);

can be abbreviated as a sentence:

list-style: square inside url (image.gif );

Tip: To cancel the default dot and serial number, you can write list-style: none;

Remember to write quotation marks

Tip: If the value is a number of words, quote the value:

p {font-family: "sans serif";}

CSS property selector

Selector	description
[attribute]	Used to select elements with specified attributes.
[attribute=value]	Used to select elements with specified attributes and values.
[attribute~=value]	Used to select the element whose attribute value contains the specified vocabulary.
[attribute丨=value]	Used to select elements with attribute values ​​beginning with the specified value, which must be the entire word.
[attribute^=value]	Match each element whose attribute value starts with the specified value.
[attribute$=value]	Match each element whose attribute value ends with the specified value.
[attribute*=value]	Match each element that contains the specified value in the attribute value.

CSS background

• Background color

  You can set the background color for all elements, including body to inline elements such as em and a. Background-color cannot be inherited , and its default value is transparent . transparent means "transparent". In other words, if an element does not specify a background color, the background is transparent, so that the background of its ancestor elements can be seen.

• Background picture

  The default value of the background-image property is none, which means that no image is placed on the background. In addition, background-image cannot be inherited. In fact, all background attributes cannot be inherited.

• Keyword

  The image placement keyword is the easiest to understand, and its role is as its name indicates. For example, top right places the image in the upper right corner of the element's inner margin area. According to the specification, location keywords can appear in any order, as long as there are no more than two keywords-one for the horizontal direction and the other for the vertical direction. If only one keyword appears, the other keyword is considered to be center.

• Percentage value

  The expression of the percentage value is more complicated. Suppose you want to center the image in its elements with a percentage value. This is easy: (see example below)
  
  This will cause the image to be properly placed with its center aligned with the center of its element. In other words, the percentage value applies to both elements and images. That is, the points described in the image as 50% 50% (center point) are aligned with the points described in the element as 50% 50% (center point).
  If the image is at 0% 0%, its upper left corner will be placed in the upper left corner of the element's inner margin area. If the image position is 100% 100%, the lower right corner of the image will be placed in the lower right corner of the right margin.
  If only a percentage value is provided, the value provided will be used as the horizontal value and the vertical value will be assumed to be 50%. This is similar to keywords.
  The default value of background-position is 0% 0%, which is functionally equivalent to top left. This explains why the background image always starts from the top left corner of the margin area of ​​the element, unless you set a different position value.

body
  { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:50% 50%;
  }

• Length value

  The length value explains the offset of the upper left corner of the margin area of ​​the element. The offset point is the upper left corner of the image. Note that this is different from the percentage value, because the offset is only from one upper left corner to the other upper left corner. That is, the upper left corner of the image is aligned with the point specified in the background-position declaration.

• Contextual connection

  If the document is relatively long, then as the document scrolls down, the background image will also scroll. When the document scrolls beyond the image, the image disappears. You can prevent this scrolling with the background-attachment attribute. Through this attribute, you can declare that the image is fixed relative to the viewable area, so it will not be affected by scrolling. The default value of the background-attachment attribute is scroll , which means that by default, the background will scroll with the document.

CSS text

• Indent text (text-indent attribute)

  By using the text-indent attribute, the first line of all elements can be indented by a given length, even the length can be negative. The most common use of this attribute is to indent the first line of a paragraph

  Note : In general, text-indent can be applied to all block-level elements, but this attribute cannot be applied to inline elements, nor can text-indent attributes be applied to replacement elements such as images. However, if there is an image in the first line of a block-level element (such as a paragraph), it will move with the rest of the line.

  __Hint: __If you want to "indent" the first line of an inline element, you can create this effect with the left padding or outer padding.

  Use percentage
  text-indent to use all length units, including percentage values. The percentage should be relative to the width of the parent element of the indented element. In other words, if you set the indent value to 20%, the first line of the affected element will be indented by 20% of the width of its parent element.
  inherit

• Horizontal alignment

  Text-align is a basic attribute that affects the alignment of text lines in an element. (Note: Tip: Centering block-level elements or table elements should be achieved by appropriately setting the left and right margins on these elements.)

  • text-align: center and <CENTER>

  You might think text-align: center and <CENTER>acts like elements, but actually both very different. <CENTER>Not only does it affect the text, it also centers the entire element. text-align does not control the alignment of elements, but only affects the internal content. The element itself does not move from one paragraph to the other, only the text in it is affected.

  • justify

  In justified text, the left and right ends of the text line are placed on the inner boundary of the parent element. Then, adjust the spacing between words and letters so that the length of each line is exactly equal. You may have noticed that justified text is very common in the printing field. It is CSS to determine how the justified text stretches to fill the space between the left and right borders of the parent element.
  It should be noted that it is up to the user agent (not CSS) to determine how the justified text stretches to fill the space between the left and right borders of the parent element

• Word-spacing

  The word-spacing attribute can change the standard spacing between words (words). The default value of normal is the same as the setting value of 0.
  The word-spacing attribute accepts a positive or negative length value. If a positive length value is provided, the interval between words will increase. Setting a negative value for word-spacing will bring it closer.

  ! ! ! The difference between word-spacing and letter-spacing:

  Word-spacing is to change the interval between words. The judgment is based on whether there is a space between two characters. The connected Chinese is considered to be a character. Word-spacing is invalid. Letter-spacing should be used to have an effect.

• Handling white space (white-space attribute)

value	Whitespace	Line break	Word wrap
normal	merge	ignore	allow
pre-line	merge	Keep	allow
nowrap	merge	ignore	Not allowed
pre	Keep	Keep	Not allowed
pre-wrap	Keep	Keep	allow

Note: The
value pre: tested, IE 7 and earlier browsers do not support this value; the
value pre-wrap and pre-line: in IE7 and FireFox2.0 browsers are not well supported.

• Text direction (direction attribute)

  Effect direction property block-level elements Chinese writing direction is present, the position and direction of the table column layout, the direction of which the filling level of content elements in the frame, and Justify elements of the last row.
  The direction attribute has two values: ltr and rtl . In most cases, the default value is ltr, which displays text from left to right. If right-to-left text is displayed, the value rtl should be used.
  Note: For inline elements, the direction attribute will only be applied when the unicode-bidi attribute is set to embed or bidi-override.

CSS font

• Font-style

  This attribute has three values:

     normal - 文本正常显示
     italic - 文本斜体显示
     oblique - 文本倾斜显示
  

  The difference between italic and oblique

  Italic (italic) is a simple font style with a few minor changes to the structure of each letter to reflect the changing appearance. In contrast, oblique text is an oblique version of normal vertical text. Normally, italic and oblique text look exactly the same in a web browser

• Font-weight

  Use the bold keyword to make the text bold.

  Keywords 100 to 900 specify 9 levels of boldness for the font. If these bold levels are built into a font, these numbers are directly mapped to the predefined levels, with 100 corresponding to the thinnest font deformation and 900 corresponding to the thickest font deformation. The number 400 is equivalent to normal, and 700 is equivalent to bold.

CSS link

• Linked style

  The particularity of links is that they can be styled according to their state.
  The four states of the link:

  • a: link-normal, unvisited link
  • a: visited-the link the user has visited
  • a: hover-the mouse pointer is above the link
  • a: active-the moment the link was clicked

  __Note: __When setting styles for different states of links, please follow the following order rules:

  • a: hover must be after a: link and a: visited
  • a: active must be after a: hover

CSS list

• List item image (list-style-image)

  Sometimes, conventional signs are not enough. You may want to use an image for each logo, which can be done using the list-style-image attribute:

  ul li {list-style-image : url(xxx.gif)}
  

• List mark position (list-style-position)

  This attribute is used to declare the position of the list flag relative to the content of the list item. The outside sign will be placed outside the border of the list item, inside the ul box. Inside flags are treated as if they were inserted in the front-line element of the list item content, inside the border of the list item.

  value	description
  inside	List item marks are placed inside the text, and the surrounding text is aligned according to the marks.
  outside	The default value . Keep the marker to the left of the text. List item marks are placed outside the text, and the surrounding text is not aligned according to the marks.
  inherit	Specifies that the value of the list-style-position attribute should be inherited from the parent element.

css padding

• Percentage value of padding

  You can set a percentage value for the element's padding. The percentage value is calculated relative to the width of its parent element, which is the same as the margin. So, if the width of the parent element changes, they will also change.

  __Note: __ The top and bottom padding are consistent with the left and right padding; that is, the percentage of the top and bottom padding will be set relative to the width of the parent element, not relative to the height.

CSS border

• Borders and backgrounds

  The CSS specification states that the border is drawn on __ "over the background of the element" __. This is important because some borders are “intermittent” (for example, dotted borders or dashed borders), and the background of the element should appear between the visible parts of the border.
  CSS2 states that the background only extends to the padding, not the border. Later __CSS2.1 was corrected: the background of the element is the background of the content, padding and border area __ Most browsers follow the definition of CSS2.1, but some older browsers may have different performance.

• Border style

  Style is the most important aspect of a border. This is not because the style controls the display of the border (of course, the style does control the display of the border), but because if there is no style, there will be no border at all. __

• Transparent border

  CSS2 introduced the border color value transparent. This value is used to create a widthless invisible border.

• Value replication

  CSS defines rules that allow you to specify less than 4 values ​​for margins. The rules are as follows:

  • If the left margin value is missing, the right margin value is used.
  • If the lower margin value is missing, the upper margin value is used.
  • If the value for the right margin is missing, the value for the top margin is used.

CSS margins merge

Margin combining means that when two vertical margins meet, they will form a margin.
The height of the merged margins is equal to the greater of the heights of the two merged margins.

• When an element appears above another element, the bottom margin of the first element merges with the top margin of the second element. Please see the following picture:
  [External chain image transfer failed, the source site may have anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-Zm0qd6Bb-1586420377525) (http://www.w3school.com.cn/i/ ct_css_margin_collapsing_example_1.gif 'Description')]]

• When an element is contained in another element (assuming no margins or borders separate the margins), their upper and / or lower margins will also merge. Please see the following picture:
  [External chain image transfer failed, the source site may have an anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-6roPxArB-1586420377526) (http://www.w3school.com.cn/i/ ct_css_margin_collapsing_example_2.gif 'Description')]

• Suppose there is an empty element with margins, but no borders or padding. In this case, the upper and lower margins will come together, they will merge:
  [External link image transfer failed, the source site may have an anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-4UyYyEMe -1586420377526) (http://www.w3school.com.cn/i/ct_css_margin_collapsing_example_3.gif 'description')]

• If this margin meets the margin of another element, it will also merge:

  [External chain image transfer failed, the source site may have an anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-xo0CfplC-1586420377527) ')]

Everything is frame

div, h1, or p elements are often referred to as block-level elements. This means that these elements appear as a piece of content, a "block box." In contrast, elements such as span and strong are called "inline elements" because their content is displayed in the line, which is called "inline frame".

Note: block-level elements can set margin and padding. The horizontal padding-left, padding-right, margin-left, margin-right of the elements in the line all produce a margin effect, but the vertical padding-top, padding-bottom , margin-top, margin-bottom will not produce a margin effect. (Valid in the horizontal direction, invalid in the vertical direction)

In one case, block-level elements are created even if they are not explicitly defined. This happens when you add some text to the beginning of a block-level element (such as a div). Even if the text is not defined as a paragraph, it will be treated as a paragraph:

<div>
    some text
    <p>Some more text.</p>
</div>

In this case, this box is called an unnamed block box because it is not associated with a specially defined element.

__Note: __ A similar situation will occur in the text line of block-level elements. Suppose there is a paragraph containing three lines of text. Each line of text forms an unnamed box. You cannot directly apply styles to unnamed blocks or line boxes, because there is no place to apply styles (note that line boxes and inline boxes are two concepts). However, this helps to understand that everything seen on the screen forms a certain frame.

inline-block attribute

Problem description: in similar

<div class="ovh">  
     <h3 class="lh24 h24">  
         <img class="dib"><p class="dib">学好css很重要</p>  
     </h3>      
</div>  

In the layout, img and p are set to inline-block. It is found that although the two elements are on the same line, they are not aligned.

It is the baseline alignment problem. Further, why the two inline-block elements are aligned according to the default vertical alignment? The reason is that the container uses the overflow: hidden attribute, which changes the baseline position of the inline-block element, causing this element to move up. Therefore, setting the vertical alignment of two elements at the same time to a value other than the baseline alignment, or adding an overflow attribute to another element can solve this problem.

CSS position default properties

static

The element box is generated normally. Block-level elements generate a rectangular frame as part of the document flow, and inline elements create one or more line frames and place them in their parent elements.

relative

The element box is offset by a certain distance. The element still retains its shape before it was positioned, and the space it originally occupied remains.

Relative positioning is the initial position of the "relative to" element in the document

absolute

The element box is completely removed from the document flow and positioned relative to its containing block. The containing block may be another element in the document or the initial containing block. The space originally occupied by the element in the normal document flow is closed, as if the element did not exist. After the element is positioned, a block-level box is generated, regardless of what type of box it generates in the normal flow.

The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor elements, then its position is relative to the original containing block.

fixed

The behavior of the element box is similar to setting position to absolute, but its containing block is the viewport itself.

__Hint: __Relative positioning is actually regarded as part of the normal flow positioning model because the position of the element is relative to its position in the normal flow.

Z-index attribute climbing

The z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always be in front of elements with a lower stacking order.
Note: Elements can have negative z-index attribute values.
Note: Z-index can only work on positioning elements (the position attribute value is set to an element other than the default value static, including relative, absolute, fixed style)

Note !!! There are three kinds of cases where z-index is invalid:

• The position attribute of the parent tag is relative;
• The problem label has no position attribute (excluding static);
• The question label contains a float attribute.

Solution:

• position: relative to position: absolute;
• Floating elements add position attributes (such as relative, absolute, etc.);
• Remove float.

z-index and other CSS property stacking contexts-the relationship between the non-locating element stacking context and z-index

css pseudo-element

Attributes	description	CSS definition version
: first-letter	Add a special style to the first letter of the text.	1
：first-line	Add special formatting to the first line of text.	1
：before	Add content before the element	2
：after	Add content after the element	2