CSS is a wonderful world, where writing a small page is straightforward and writing a large animation is ridiculously difficult. To understand the need to continue to consolidate the foundation, mining the underlying logic. Now, I’m going to show you some simple properties that I use in my work, so that you can apply what you’ve learned.

currentColor

The color value of an element that uses this keyword is the color value that gets the color attribute (itself or its nearest parent).

// HTML <div class="father"> <p class="baby"> </p> </div> // css.father {width: 100px; height: 100px; color: #f00; cursor: pointer; } .father:hover { color: #f0f; } .father > .baby { color: currentColor; }Copy the code

object-fit

CSS3 background-size: contain CSS3 background-size: contain CSS3 background-size: contain CSS3 background-size: contain CSS3 background-size: contain

Object-fit is similar, but somewhat different, with five values:

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
Copy the code

The specific meaning of each attribute value is as follows:

  • I’ll fill it up. The default value. The replacement content stretches to fill the entire content box, with no guarantee of retaining the original proportions.
  • My folder contains three major sections. Keep the original size ratio. Make sure the replacement content is big enough to fit inside the container. Therefore, this parameter may leave a blank space in the container.
  • Cover the ground. Keep the original size ratio. Ensure that the size of the replacement content is larger than the size of the container, and at least one of the width and height is the same as the container. Therefore, this parameter may make parts of the replacement content, such as images, invisible.
  • None: The Chinese definition of “none”. Keep the original size ratio. Keep the original size of the replacement content.
  • Scale-down: in Chinese, it means to decrease. It’s like setting None or contain one after another, and ending up with the smaller one.

quote

The CSS has an attribute called quotes that specifies closing symbols. Let’s look at a few examples of quotes in action:

// html
<q class="zh">不忘初心</q><br />
<q class="en">stay true to the mission</q><br />
<q class="book">生活</q>

// css
.zh {
    quotes: "“" "”";
}
.en {
    quotes: '"' '"';
}
.book {
    quotes: "《" "》";
}
Copy the code

count

CSS counter has two properties (counter-reset,counter-increment) and one method (counter()/counters())

1. Counter -reset = counter-resetCounter – resetThe meaning of.

Its attribute values are as follows:
  • None: By default, the selector counter cannot be reset.
  • Id number: id is the selector, ID, or class that defines the reset counter. Number Indicates the number of times the selector occurs. The value can be positive, zero, or negative (different browsers support this).
  • Inherit: Specifies that the value of the counter-reset attribute should be inherited from the parent element.

Take a look at two simple counter-reset examples:

// HTML <p> look! </p> <p class="default"></p> // css. default {counter-reset: num 6; } .default:before { content: counter(num); }Copy the code

Counter -reset also accepts multiple parameters

// HTML <p> look! Default {counter-reset: num 8 num2 8; } .default:before { content: counter(num); } .default:after { content: counter(num2); }Copy the code

If you don’t increment your counter, don’t increment your counterCounter – incrementThe meaning of.

Its attribute values are as follows:
  • None: No counter will be incremented.
  • Id number: ID defines the selector, ID, or class that will increment the count. Number Defines the increment. Number can be positive, zero, or negative.
  • Inherit: Specifies the value of the counter-increment property, which should be inherited from the parent element.

Take a look at two simple counterincrement examples:

// HTML <p> look! </p> <p class="default"></p> // css. default {counter-reset: num 0; // If there is no default value, the default is 0 counter-increment:num; }. Default :before {content: counter(num); }Copy the code

Counter -increment at parent and child levels

// HTML <p> look! </p> <p class="default"></p> // css. default {counterincrement: num; } .default:before { content: counter(num); counter-increment: num; }Copy the code

The parent and child each increment once, resulting in 2. The counter() function is used to increment the value of a counter when the counter is incremented. Counter -increment = counter-reset = counter-increment = counter-reset = counter-increment counter-increment:num num2;

3. Counter ()/counters() This is a method, not a property.

  • Counter () : Returns a string representing the current value of the counter. It is usually used with pseudo-elements, but in theory can be used anywhere a

    value is supported.
/* simply use */ counter(counter name); /* Change counter display */ counter(countername, upper-Roman)Copy the code

// html
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

// css
ol {
    counter-reset: lc;
}
li {
    counter-increment: lc;
}
li::after {
    content: "[" counter(lc) "] == [" counter(lc, upper-roman) "]";
}
Copy the code
  • Counters () : is a nested counter that returns a join string representing the current value of the specified counter. The counters() function has two forms: counters(name,string) or counters(name,string,style). It is usually used with pseudo-elements, but in theory can be used anywhere a

    value is supported. The generated text is the value of all counters with a given name, from outermost to innermost, separated by the specified string, in an indicated style, which defaults to decimal if no style is specified.
/* Simple usage-style defaults to decimal(default is decimal) */ counters(countername, '-'); /* change the counter display */ counters(countername, '.', upper-Roman)Copy the code

// html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

// css
ol {
    counter-reset: listCounter;
}
li {
    counter-increment: listCounter;
}
li::marker {
    content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
    content: counters(listCounter, ".") " == "
      counters(listCounter, ".", lower-roman);
}
Copy the code

padding

There’s really nothing to say about the padding property values. The padding attribute does not support negative values, and the other is the padding percentage. However, the calculation rules of the padding percentage are different: the width of the parent element is calculated horizontally or vertically.

To achieve an adaptive equal-scale rectangle effect:

// html
<div>
  <p></p>
</div>

// css
div {
    width: 100px;
}
p {
    padding:50%;
}
Copy the code

The above percentage values apply to elements that have block properties, but behave differently if they are inline

  1. Also with respect to width;
  2. Default height and width detail differences; (When the inline element content is empty, the vertical padding of the inline element makes the blank node appear, which is ‘strut’ in the specification. Workaround: The default height of inline elements is affected by the font size attribute, so set it to 0.
  3. Padding breaks lines. (When inline element content has text)

I won’t go into that because it’s not very common.

margin

Cliche scenario: center an element horizontally and vertically…

  • Margin of absolute positioning element: Auto center. The display effect is as follows:
// html
<div class="father">
  <span class="son"></span>
</div>

// css
.father {
    height: 200px;
    position: relative;
    text-align: center;
    line-height: 100px;
}
.son {
    width: 100px;
    position: absolute;
    height: 100px;
    background: rgb(119, 113, 113);
    margin: -50px;
    top: 50%;
    left: 50%;
}
Copy the code

In the following way, the size of the child element is represented as’ format width and format height ‘, which is the same as the ‘normal stream width’ of <div>, and belongs to the external size, i.e. the size automatically fills the available size of the parent element. I think it is much better than the calculation of the margin above.

// html
<div class="father">
  <span class="son2"></span>
</div>

// css
.father {
    height: 200px;
    position: relative;
    text-align: center;
    line-height: 100px;
}
.son2 {
    width: 100px;
    position: absolute;
    height: 100px;
    background: rgb(231, 181, 181);
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
Copy the code

border

The plain border can actually meet quite a few small needs during development, such as the burger bar on mobile:

// html
<div class="hamb"></div>

// css
.hamb {
    width: 100px;
    height: 20px;
    border-top: 60px double;
    border-bottom: 20px solid;
}
Copy the code

Or draw a triangle:

// html <div class="triangle"></div> // css .triangle { width: 0; border: 10px solid; border-color: #ccc transparent transparent; // the border-color attribute accepts four color values, with directions of up, down, left, and right}Copy the code

And implement the “rounded corner” button without using border-radius:

// HTML <div class="round_btn"> round button </div> // css. round_btn {display: inline-block; line-height: 40px; padding: 0 40px; color: #fff; background: rgb(46, 245, 235); position: relative; } .round_btn::before, .round_btn::after { content: ""; position: absolute; left: 0; right: 0; border-style: solid; } .round_btn::before { top: -4px; border-width: 0 4px 4px; border-color: transparent transparent rgb(46, 245, 235); } .round_btn::after { bottom: -4px; border-width: 4px 4px 0; border-color: rgb(46, 245, 235) transparent transparent; }Copy the code

Does it look round? If you don’t look carefully, you can’t tell what shape it is. In fact, its four corners are trapezoid