CSS units

Time:2021-8-10

CSS unit

1. px

  • What is it?

    The most commonly used unit, absolute unit

  • Usage:

    .test-box{
        font-size: 14px;
    }
  • Disadvantages:

    It is a fixed value. Once set, it cannot be changed to adapt to the page size

2. rem:

  • What is it?

    It is a new relative unit in CSS3. It refers to the unit corresponding to the font size of the root element

  • Usage:

    html{ 
        font-size:14px
    }
    //

On the element:

.test-box{
   font-size:2rem;
 }
  • Advantages:

    • Achieve powerful screen adaptation layout
    • Convenient calculation
  • Disadvantages:

    REM sets the font size relative to its parent element, so there will be a problem. For any element setting, you may need to know the size of its parent element

3. em:

  • What is it?

    Relative units, relative to the parent element. Rem is relative to the root element. The EM of the font size of the child element is relative to the font size of the parent element.

  • usage

    <div class="test">
        I am the parent element Div
        <p>
            I am the child element P
            <span>I'm sun yuan</span>
        </p>
    </div>
.test {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
.test p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
}
.test span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}
  • Disadvantages:

    • Because it is relative to the parent element, unexpected effects may occur when cascading.
    • Calculation is more troublesome than rem
  • Advantages:

    • Implement adaptive layout

4. vw, vh, vmin, vmax

  • What is it?

    The “viewport” in the viewport unit, and the desktop refers to the visual area of the browser (excluding the web browser of toolbars and buttons); The mobile end refers to the layout viewport in the viewport.

    1. VW: 1vw is equal to 1% of the viewport width.
    
    2. VH: 1vh is equal to 1% of the viewport height.
    
    3. Vmin: select the smallest of VW and VH.
    
    4. Vmax: select the largest of VW and VH.

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]