This is my first article for getting started, and I decided to start with CSS for everyday use. Here I am.

1. Posotion: Sticky positioning

The performance of “sticky” is similar to the combination of “relative” and “fixed”. When it exceeds the target area, it will be fixed at the target position. You can use it to fix table headers, lock columns, and other places where you need to scroll fixed elements.

Click here for the full code

Note:

  1. The target position left/right/top/bottom must be defined to achieve the fixed effect.
  2. Posotion: sticky Applies only to TH and TD.

2. Fake elements increase click area

    .btn{
      position: relative;
      background-color: rgb(133.215.245);
    }
    .btn::before {
      content:"";
      position:absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px;
      background-color: rgb(211.185.236.0.3);
    }
Copy the code

In practice, pseudo-elements can be used to clear floats and draw dividing lines.

3. Inline element wrap under CSS:

.box span:after { content: '\A'; white-space: pre; } < p class = "box" > < span > first line < / span > < span > the second line < / span > < / p >Copy the code

4. Margin-top collapse problem

Original reference link

  1. Add a border to the parent element
  2. Add overflow: hidden inside the parent element’s style;
  3. .

The author in the reference link has given the reasons and answers for the specific 6 ways. Here is just for reference. The second one is commonly used and convenient, but we should pay attention to the bug behind hidden.

5. The pointer-events element cannot be clicked

Sometimes you need a full-screen mask effect. Put the mask layer on the highest level, but you don’t want to cover the lower elements.

pointer-events:none;
Copy the code

If the parent element is set to pointer-events: None; But to make child elements clickable, you can set the element to click to pointer-events:auto;

6. Z-index level invalid problem

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

/ / window.Popup-wrapper{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:100;
  -webkit-transform: translateZ(10em);
  -o-transform: translateZ(10em);
  transform: translateZ(10em); <! The rotated element will go through the popover and make the popover a higher translateZ -->}.logo01{
    animation: rotateImg 3s ease-in infinite;
  }
@keyframes rotateImg{
  80%{
    transform: rotateY(0);
  }
  90%{
    transform: rotateY(180deg) translateZ(0em);
  }
  100%{
    transform: rotateY(0); }}Copy the code

7. Implement horizontal scrolling, but the parent element does not have a fixed width solution

Click here for the full code

Float: left; float: left; float: left; float: left

8. Display: table/table – cell;

This I think is more commonly used, it is easy to achieve vertical center layout, image text center alignment and so on.

.wrap{
      display: table;
    }
    .box{
      display: table-cell;
      padding: 10px;
      margin:10px; /* set display: table-cell margin useless */
      width: 150px;
      vertical-align: middle;
    }
Copy the code

Note: the parent element is set to display:table. After table-cell is written, margin is invalid and the element is displayed as a table cell.

9. The use of outline

Outline is used for stroke effect, or very easy to use, this is in zhang Xinxu’s blog, there are many CSS tips, very recommended.

10. Vertical alphanumeric arrangement of text

Text-orientation THE CSS property sets the orientation of characters in the line. But it only affects text in vertical mode (when the writing-mode value is not horizontal-TB). This property is useful for controlling the display of languages that use vertical text, and can also be used to build vertical table headers.

Upright makes horizontal characters stand out naturally (upright), including vertical characters (as well as the glyphs for vertical scripts). Note that this keyword causes all characters to be treated as left to right, meaning that direction is forced to be LTR.

    p{
      writing-mode: vertical-lr; /* Vertical content from top to bottom, horizontal from left to right */
      text-orientation: upright; /* Place horizontally written characters in a natural layout (straight line) */
    }
Copy the code

Conclusion:

First of all: it’s the first time to publish an article, I always think my work is ordinary, and my knowledge is generally learned from various technical forums and blogs, but I don’t think there is anything worth recording. This time, I want to try it for the pillow, and I also want to thank the Nuggets for holding such an activity, which makes me take the first step.

Secondly: write the article to know, these knowledge is written summary, or quite a lot of effort, like me without any preparation, only by memory side to write, only ten simple CSS knowledge points, actually spent an afternoon! This gave me a new understanding of the nuggets who post their articles. They must have paid a lot of hard work to write their articles, respected those who update frequently, and cherished this place that loves to share.

Finally: sorry for the bad writing, I just want a pillow, above.