The use of percentage width layout in css layout-CSS Tutorial-php.cn

The use of percentage width layout in css layout

青灯夜游

Release： 2018-11-03 14:14:55

Original

9232 people have browsed it

How to use percentage layout? This article will introduce to you the use of percentage width layout in CSS layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the percentage? How to set it up?

Percentage is a unit of measurement relative to the containing block.

Calculation of percentage width: Target element width/parent element width = percentage width

It is very useful for pictures: as follows we realize that the width of the picture is always 50% of the width of the container. You can run it and change the page size to see the effect!

The use of percentage width layout in css layout

You can also use min-width and max-width at the same time to limit the maximum or minimum width ratio of the image!

Percent width layout

Let’s take a look at an example of percentage width layout:

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

Copy after login

When the parent The width of the container is: 800px

The use of percentage width layout in css layout

When the width of the parent container is: 500px

The use of percentage width layout in css layout

Width After setting the percentage, the nav and section tags will change as the width of the parent container changes.

Let’s take a look at the percentage settings of commonly used attributes in css layout

The use of percentage width layout in css layout

##Note: Percentage layout requires

1. First, block partition the entire page, and take the corresponding percentage for the width of each module.

2. When you define the width of the content area and the distance between areas, that is, the spacing visible to each box model, you need to use percentages, and you must not use fixed widths. Even margin-left margin-right must use percentages!

3. When doing percentage layout, try to move from large blocks to small blocks as much as possible, regardless of the specific content entities, and use percentages for these blocks. (Content entities, that is, content text, images, icons, etc. that will be displayed. Blocks, no content.)

Percent width layout requires

Problems faced:

Percent layout , the window ratio is reduced to 50%, and the page will be messed up. In percentage layouts, there is often no problem when zooming in, but there is a problem when zooming out. It is recommended to choose a smaller computer screen for development. If the screen is too large, the window can be scaled to about 15 inches depending on the situation.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

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