css set percentage

CSS is a style sheet language used for web design, in which setting percentages plays a special role in web design. By setting the percentage, we can more precisely control the size, position, color, background, etc. of elements, making the web page look more beautiful and professional. This article will give you a detailed introduction to how to set percentages in CSS.

1. Set the element size percentage

In CSS, we can set the percentage of the width and height of the element. This is useful for making websites with responsive design.

For example, we can create a container that contains the main content of the web page. We use percentages to set the width and height of the container so that it automatically resizes based on the user's screen size. For example:

.container {
  width: 80%;
  height: 50%;
}

In this example, the width and height of the container are set to percentages, 80% and 50% respectively. This means that regardless of the user's screen size, the container will automatically resize and display well on any device.

2. Set the element position percentage

By using percentage, we can also set the position of the element relative to its container. This is useful for designing a centered or adaptive website. For example:

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

In this example, we use percentages to position the element so that it appears centered within its container. We first position the element absolutely using position:absolute, then center its position relative to its container using top:50% and left:50% position. Finally, we use transform:translate(-50%,-50%) to fine-tune the position of the element so that it is centered.

3. Set color and background percentage

You can also use percentage to set color and background. For example:

h1 {
  color: rgba(100%,0%,0%,0.5);
  background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}

In this example, we use percentages to set the transparency of the text and background. Specifically, we set the text's color to red and its transparency to 50%. For the background, use linear-gradient to set a red gradient background and gradient the transparency from 60% to 0%. This way, we can create a semi-transparent text and background effect.

Summary

This article introduces how to use percentages in CSS to set the size, position, color and background of elements. Percentages are useful for designing responsive websites and achieving design effects such as centering. Whether you are a beginner or an experienced developer, you can create impressive web designs by using percentages in CSS.

The above is the detailed content of css set percentage. For more information, please follow other related articles on the PHP Chinese website!