0715 knowledge summary – 2020 Summer Work & Learning

Time:2021-2-26

1、 Pseudo class and pseudo element

1.1 core differences

Pseudo class: an element already exists in the operation document tree
Pseudo element: create a new element outside the document tree

1.2 related examples

1. Pseudo class
Example 1:

<ul>
    < Li class = "first item" > I was the first</li>
    <li>I'm the second</li>
</ul>
li.first-item {
 color: orange
}

The above code is useful for the first one<li>The tag adds a class (change the text color to orange). It is equivalent to the implementation through pseudo class operation.

<ul>
 <li>I was the first</li>
 <li>I'm the second</li>
</ul>
li:first-child {
    color: orange
}

Example 2:

<ul>
    < Li class = "first item" > I was the first</li>
    <li>I'm the second</li>
</ul>
li.first-item {
 color: orange
}

Summary: from the above examples, we can see that pseudo classes mainly set styles for existing elements. It can be passed through the:first-childSet the style by positioning the specified element. It can also be passed:hoverSets the style of the specified element in a specific state.
0715 knowledge summary - 2020 Summer Work & Learning

2. Pseudo elements

Example 1:

<p>
<span class="first">H</span> ello World, and wish you have a good day!
</p>
.first {
 font-size: 5em;
}

The above code pairs<p>Style the first letter in the label (change the text size). It can also be implemented in the following pseudo element way (it looks like creating a virtual element)<span>Element and add a style to modify the style of the initial letter, but actually it doesn’t exist in the document tree<span>Elements).

<p>
Hello World, and wish you have a good day!
</p>
p:first-letter {
 font-size: 5em;
}

Summary: from the above examples, it can be seen that the effect of pseudo element is just like adding a new element to the document tree, which is also named after it.
0715 knowledge summary - 2020 Summer Work & Learning

1.3 common pseudo elements: before and: after

Let’s start with the previous example

<\>wonyun!</p> 

<style> 
  p:before{content: "hello "}
  p:after{content: "you are handsome!"} 
</style>

The above implementation effect can be equivalent to the following HTML structure:

<p> 
  <span>hello </span> 
  wonyun! 
  <span> you are handsome!</span> 
</p>

1. Usage
The content added by default isinlineelement
contentProperty (must) set the content within the pseudo element. Its content is very flexible (refer to Article 2 in this chapter for details)

  • character string
  • attr(attr_name)
  • url()/uri()
  • counter

2. Main features
Reference article 2 is cited here.

  • Pseudo element does not belong to document, so JS can’t manipulate it
  • Pseudo elements are part of the main element, soClicking on the pseudo element triggers the click event of the main element
  • The original text says that only block level elements can have: before, : after, in fact, is not proper. Most row level elements can also set pseudo elements, but like img replaceable elements, because their appearance and size are determined by external resources, if the external resources are loaded correctly, their internal contents will be replaced, and the pseudo elements will also be replaced. However, when the external resources fail to load, the set pseudo elements can work. Therefore, its collocation with img can have some interesting effects.

3. Advantages and disadvantages
Reference article 2 is cited here.

  • advantage

    • Reduce the number of DOM nodes
    • Let CSS help to solve some JS problems, make the problem simple
  • shortcoming

    • Not good for SEO
    • Unable to review elements, not conducive to debugging

4. Practical application scenarios

  1. Clear float
  2. Using img to realize the page appearance prompt when loading failed
  3. combinationcounter()Combined with the implementation of ordinal issues, instead of using list elements
  4. Interesting special effects: magnifying glass, arrow, triangle symbol, fork, etc

Reference article portal:

2、 Preliminary understanding of clearing floating~~~~

2.1 float & clear float

In non IE browser (such as Firefox), when the height of the container is auto, and the content of the container has floating elements (float is left or right), in this case, the height of the container can not be automatically extended to adapt to the height of the content, so that the content overflows to the outside of the container and affects (or even destroys) the layout. This phenomenon is called floating overflow.

In order to prevent floating overflow phenomenon and CSS processing, called CSS clear floating.


Let’s start with an example

<div class="news">
    <img />
    <p>some text</p>
</div>
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

0715 knowledge summary - 2020 Summer Work & Learning

2.2 method of clearing floating

For details, please refer to Chapter 1.
1) Use the tapeclearEmpty element of attribute
Advantages: simple, less code, good browser compatibility.
Disadvantages: need to add a large number of HTML elements without semantics, the code is not elegant enough, and it is not easy to maintain later.
2) How to use CSSoverflowattribute
3) Processing with adjacency elements
Do nothing but add the clear attribute to the element after the floating element.
3) How to use CSS:afterPseudo element + trigger hasLayout processing
The improvement of mode 1 eliminates a large number of empty elements without semantics.
Note: by setting thezoom:1Attribute triggers hasLayout to be compatible with IE6 and IE7 browsers.

2.3 summary

There are two kinds of floating clearing methods

  • Using the clear attribute
  • Trigger the BFC (block formatting contexts) of the parent element of the floating element, so that the parent element can contain the floating element.

Development issues:

  • What is BFC? What are the main characteristics and functions?

Reference article portal:

3、 Text center in span

3.1 level in the middle

text-align: center;

3.2 vertical centering

Line height: the height whose value is span;

4overflowcollocationtext-overflowUse of

overflow:
For in containerAll data overflowIt is a kind of unified processing method, no matter what is stored in the container is text, picture or other data.

  • Hidden: hidden
  • Scroll: scroll bar display
  • Visible: overflow display

text-overflow:
It’s specifically for the inside of the boxText overflowHow to deal with it when it is used;

  • Clip: clipping
  • Ellipsis: ellipsis
  • String: specifies a string to replace,

Matching use:

text-overflow: string/ellipsis
overflow:hidden()

To maketext-overflowProperty is valid,overflowProperty must be set and the value is hidden
Because the value of “string” or “ellipsis” is based on hiding the overflow part, and the substitution symbols are displayed inside the container and will not be displayed outside the container, overflow must also be set in this way.

5word-breakword-wrapwhite-spacePreliminary understanding of

Here we refer to the content of the article:

  • white-space,Controls the display of white space charactersAt the same time, it can also control whether to wrap lines automatically. It has five values:normal | nowrap | pre | pre-wrap | pre-line
  • word-break,Controls how words are split and wrapped. It has three values:normal | break-all | keep-all
  • word-wrap(overflow-wrap)Controls whether words longer than one line are split and wrappedYesword-breakIt has two values:normal | break-word

Reference article portal:

6、 In VuerefPreliminary understanding of attributes

example:

<div id="app">
  <input type="text" value="HelloWorld"  ref="text">
  <button @click="changeText">change word</button>
</div>
var app = new Vue({ 
    el: '#app',
    data: {
    },
    //Add a method
    methods:{
      //Change the text
      changeText () {
        this.$refs.text.value \= 'Hello Vue!' 
      }
    }
});

6.1 understanding

Popular is similar to native JS document.getElementById (“#id”)
But: it’s just similar. The difference is that Vue controls the virtual dom. That is to say, there is no ref attribute at the beginning of rendering. This attribute is added to the virtual DOM only after the Vue instance is created. Therefore, at the end of the official document, developers should be reminded not to data bind the ref results in the template.

this.$refs:
Popular will be to collect all the informationrefAn object of. adoptthis.$refsYou can access all the settings in this Vue instancerefAttribute and operate on it.

**Reference article portal:**

*[introduction to ref attribute of Vue]( https://blog.csdn.net/Little_ Pig_ Bug/article/details/81324366?utm_ medium= distribute.pc_ relevant_ t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_ weight&depth_ 1-utm_ source= distribute.pc_ relevant_ t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_ weight)