1. CSS is not unique in matching id selectors

If multiple HTML nodes with the same ID appear in HTML, if CSS has a style declaration for that ID, the style declaration applies not only to the first HTML node with that ID, but to all HTML nodes

2. Property selector
  1. Attribute The attribute contains value
  • [attribute~=”value”] The attribute contains an independent word value
eg:[title~=flower]  
<img src="/i/eg_tulip.jpg" title="tulip flower" />

Copy the code
  • [attribute*=value] string split, as long as the word value can be separated
[title*=flower]
<img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
Copy the code
  1. Attribute The attribute starts with value
  • [attribute | = value] attribute must be complete and the only word, or by – separated
eg:[lang|=en]
<p lang="en">
<p lang="en-us">
Copy the code
  • [attribute^=value] The first few letters of the attribute are value
eg:lang^=en]  
<p lang="ennn">
Copy the code
  1. Attribute The attribute ends with value
  • [attribute$=value] The last few letters of the attribute are value
eg:[src$=".pdf"]
<img src="test.pdf">
Copy the code
3. Relationship selector
  1. + Neighbor sibling selector: matches only the regular sibling that the current element believes
  2. ~ sibling selector: selects all regular sibling elements following the current element
4. Input type=’button
  • The button label button is automatically wrapped, whereas input type=’button’ defaults to white-space:pre is not wrapped
5. One line on the left and two lines on the right, CSS implementation scheme
.box {
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}


<div class="box">
    <p class="content"</p> </div>Copy the code
The reason box-sizing doesn’t exist :margin-box
  1. The back of a margin is always transparent and therefore cannot exist as a background-clip or background-origin property value
  2. Once the specific width and height values of margin are set, the size of margin itself will not change with the change of margin, so it is meaningless to exist as the attribute value of box-sizing
7. The width/height percentage calculation for absolute positioning is relative to paddingBox, while non-absolute positioning elements are relative to ContentBox
.box {
  height: 160px;
  padding: 30px;
  box-sizing: border-box;
  background-color: #beceeb;} .child { height: 100%; /* Non-absolute positioning elements: the actual height calculated is 160-30*2=100*/ background:#cd0000;
}
Copy the code
.box {
  height: 160px;
  padding: 30px;
  box-sizing: border-box;
  background-color: #beceeb;position: relative; } .child { position: absolute; width: 100%; height: 100%; /* Absolute position element: the actual height calculated is 160*/ background:#cd0000;
}
Copy the code
8. When the value of min-width is greater than the value of max-width, the value of min-width is used
.demo{ min-width: 1400px; max-width: 1200px; /* Finally. Demo element width is 1400 */}Copy the code
9. Min-width /max-width beyond! Important, similarly min – height/Max – height
img {
  max-width: 256px;
}
<img src="1.jpg" style="width:480px! important;"< span style = "max-width: 100%; clear: both; min-height: 1emCopy the code
img {
  min-width: 256px;
}
<img src="1.jpg" style="width:120px! important;"< span style = "max-width: 100%; clear: both; min-height: 1emCopy the code
SRC =”” SRC =””
  1. In many browsers if the image is set to SRC =”” a request will still be made for the current page data
  2. When the SRC attribute is default, the image will not be requested
11. Use Content for SEO-friendly title hide and display images
<h1> h1:before {/* Because we use the content attribute here, we can change the normal tag element to a replacement element */ Content: URL (1.jpg); display: block; /* The only problem with this method is that the width of the image is fixed and cannot be changed by width/height */Copy the code
  • The text generated by Content cannot be read by screen readers or captured by search engines. Similarly, there is no need to worry that important text information will be replaced by Content, only the visual layer
  • Content generated content cannot also be selected and copied
  • Content Generated content does not affect the: Empty pseudo-class
  • You can also use text-indent to indent text, but the screen reader won’t read text if it’s too big
  • In addition, a recommended way
h1{
    position:absolute;
    clip:rect(0 0 0 0);
}
Copy the code
  • Clip-hiding simply determines which parts are visible. Non-visible parts cannot respond to click events, while visually hidden but the element size remains the same
12. Replacement elements do not support fake elements such as before/after. Images without SRC are normal elements and become replacement elements by adding SRC
13. In Chrome, all elements support content, while other browsers only support ::before, ::after pseudo-elements
14. Use pseudo-elements to generate newlines
        .test::before{
            content: '\A'; white-space: pre; /* White-space must also be set to pre-wrap*/}Copy the code
  • \A is case insensitive and can also be written as \A to move the cursor vertically to the next line
  • \D also implements line breaks, which achieve the effect of moving the cursor to the beginning of the current line
15. The best practice for right-aligned block elements is margin-left:auto rather than float:right
16. The difference between the two is that the height of the line is 150% and the height of the line is 1.5em
  • Line-height :1.5 All child elements inherit this value
  • Line-height :150% and line-height:1.5em All child elements are inherited from the final computed value
17. Float has no effect when absolute and float exist together
18. Change the scrollTop value based on the parent container to achieve the scrolling effect without boundary processing
  • Set the scrollTop to -300, and the browser will still render at 0
  • To scroll to the bottom, simply set scrollTop to a large value
19. The difference between height:100% and height:inherit
  • For ordinary elements, there’s no difference
  • It is different for absolute positioned elements: height:100% is the height of the first ancestor element that has a positioned attribute value, whereas height: Inherit is a pure height inheritance of the parent element