Collection of CSS knowledge points

1. The text displays a fixed number of lines, the excess is omitted
1. The text only displays one line

<style type="text/css">
    .text {
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: solid red 1px;
    }
 </style>
<div class="text">
  《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。
</div>

2. The text displays multiple lines

<style type="text/css">
    .text {
      width: 300px;
      white-space: nowrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;    
    }
 </style>
<div class="text">
  《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。
</div>

3. Nested block-level elements in the parent div

<style type="text/css">
    .parent{
      width: 300px;
      border: solid red 1px;
    }
    .children{
      /*display: -webkit-box;*/
      /*-webkit-box-orient: vertical;*/
      /*-webkit-line-clamp: 3;*/
      /*overflow: hidden;*/
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    } 
</style>
<div class="parent">
  <div class="children">《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。此外，这首诗也将作者羁旅之思，家国之忧，以及身处乱世尚无归宿的顾虑充分地表现出来，是写愁的代表作。</div>
</div>

4. Nested rows in parent div

<style type="text/css">
    .parent{
      width: 300px;
      border: solid red 1px;
    }
    .children{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;    
   }
   或
   .children{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;   
   }
    或
   .children{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
   }
 </style>
<div class="parent">
  <span class="children">《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。此外，这首诗也将作者羁旅之思，家国之忧，以及身处乱世尚无归宿的顾虑充分地表现出来，是写愁的代表作。</span>
</div>

5. Nested block-level elements and inline elements in div

<style type="text/css">
    .parent{
      width: 300px;
      border: solid red 1px;
      display: flex;
      flex-direction: row;
    }
    .children1{
      width: 100px;
      border: solid green 1px;
    }
    .children2{
      flex: 1;
      border: solid blue 1px;
    }
    .parent div{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
</style>
<div class="parent">
  <div class="children1">《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。此外，这首诗也将作者羁旅之思，家国之忧，以及身处乱世尚无归宿的顾虑充分地表现出来，是写愁的代表作。</div>
  <div class="children2">
    <span>《枫桥夜泊》是唐朝安史之乱后，诗人张继途经寒山寺时，写下的一首羁旅诗。在这首诗中，诗人精确而细腻地讲述了一个客船夜泊者对江南深秋夜景的观察和感受，</span>
    <br><span>勾画了月落乌啼、霜天寒夜、江枫渔火、孤舟客子等景象，有景有情有声有色。此外，这首诗也将作者羁旅之思，家国之忧，以及身处乱世尚无归宿的顾虑充分地表现出来，是写愁的代表作。</span>
  </div>
</div> 

6. Limit the number of lines through js, without '...'

var el = document.getElementById('children');
  el.style.lineHeight = '20px';     // 设置行高为20px
  console.log(el.offsetHeight);
  if (el.offsetHeight > 60) {
    el.style.height = '60px';
    el.style.overflow = 'hidden';   // 只显示3行，其他隐藏
  }

2. The difference between nth-child and nth-of-type
1. p:nth-child(2): the second element in the parent element and is the p tag
2, p:nth-of-type(2): parent element The second element in the p tag
3. .item:nth-of-type(2): If there are multiple tags in the parent element, they are classified according to the tags, the second element in each category and the element whose class name is item , if it is changed to .child:nth-of-type(1), no element is selected

.text .child:nth-of-type(2){
    color: red;
}
<div class="text">
  <div>111</div>
  <span >aaa</span>
  <div class="child">222</div>
  <span class="child">bbb</span>
  <div class="child">333</div>
  <span class="child">ccc</span>
</div>

The effect is as follows:

3. The color block and the text are centered.
When encountering a color block in front of the text, this is generally the case.

If you want to center the text and the color block, you can design it like this. The color block contains a piece of text, and set the CSS of this text to visibility. : hidden
HTML as follows:

  <span class="color-block"><span class="text"></span></span>
  <span>Hello</span>

The CSS is as follows:

    .color-block{
      background: black;
      display: inline-block;
      width: 10px;
      height: 30px;
    }
    .text{
      visibility: hidden;    /*隐藏文本*/
      line-height: 30px;     /*文本行高与色块高度一致*/
    }

Fourth, the element is centered horizontally and vertically
1. The block-level element is centered horizontally, and "margin: 0 auto;" is added to the block-level element.
2. The inline-block element is centered horizontally, and "text-align: center" needs to be added to the parent element ;"
3. The floating element is centered horizontally and vertically . The
HTML is as follows:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

The CSS is as follows:

    .parent {
      border: solid red 1px;
      width: 800px;
      height: 400px;
    }
    .child {
      float: left;
      width: 200px;
      height: 200px;
      position: relative;
      top: 25%;    /*随父元素高度自行调整，百分比是相对于父元素的高度而言的*/
      left: 25%;   /*随浮动元素个数及父元素宽度自行调整，百分比是相对于父元素的宽度而言的*/
      background: lightgreen;
      border: solid blue 1px;
    }

The effect is as follows:

4. The absolute positioning element is centered horizontally and vertically
. The width and height of the div are known:

.ele {
    position: absolute;
    top: 高度值;
    width: 宽度值;
    top: 50%;
    left: 50%;
    margin-top: -(高度值/2);
    margin-left: -(宽度值/2);
}   

div width and height unknown:

.ele {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /*百分比均相对于元素自身的宽和高，第一个是X方向，第二个是Y方向*/
}   

Five, the text is centered horizontally and vertically (same as the picture)
1. A single line of text is centered horizontally and vertically, the height and line-height are the same, and text-align: center is essential

<div class="parent">hello world</div>

.parent {
      border: solid red 1px;
      width: 400px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

2. Multi-line text is centered horizontally and vertically, and the vertical direction is set to display: table-cell; vertical-align: middle;

<div class="parent">hello world, hello world<br>hello world</div>

.parent {
      border: solid red 1px;
      width: 400px;
      height: 100px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

The effect is as follows:

3. There are multiple child elements in the parent element, and these child elements are vertically centered

<div class="parent">
  <div class="child">hello world, hello world</div>
  <div class="child">hello world</div>
</div>

.parent {
      border: solid red 1px;
      width: 400px;
      height: 100px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;    /*文本居中*/
    }
    .child {
      border: solid lightgreen 1px;
      width: 300px;
      margin: 0 auto;        /*div居中*/
    }

The effect is as follows:

6. The background image is centered horizontally and vertically

<div class="parent"></div>

.parent {
      border: solid red 1px;
      width: 400px;
      height: 400px;
      background-image: url('./src/assets/img/问号.png');
      background-position: center;   /*图片水平垂直居中*/
      background-repeat: no-repeat;
    }

There are other centering methods for reference: http://www.html-js.com/article/4613