Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the role of CSS attributes width and height". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Width defines the width of the content area of an element; cssheight defines the height of the element in the content area. You can add the inner margin (padding), border (border) and outer margin (margin) outside the content area, so it becomes what we often call the box model. We will talk about this later in the content. Non-replacement elements in the line will ignore the attribute width, that is, when we do not define this element, the default value is auto, and the content will support it.

Cssheight unit

Absolute unit

1. Pixel px (pixels), on web, pixel px is a typical unit of measurement, which is also our most commonly used unit. Like some other units, they will eventually be treated in pixels.

two。 Inch in (inches) 1in=2.54cm=96px

3. Cm cm (centimeters) 1cm=10mm=96px/2.54=37.8px

4. Mm mm (millimeters) 1mm=0.1cm=3.78px

5.1px4mm Q (quarter-millimeters) 1q=1/4mm=0.945px

6. Point pt (points), 1pt=1/72in==0.0139in=1/72*2.54cm=1/72*96px=1.33px

7. Paika pc (picas), 1pc=12pt=1/6in=1/6*96px=16px

These units are basically not used very much. Just let us know.

Relative units:% vw, vh, vmin and vmax, except for the percentage, the latter are all css3 units, but they have been out for a long time.

I won't say much about the percentage here, that is, divide the screen into 1% on average, and one is 50%. You can write a 50% wide div yourself and drag the window to try to change it.

Vw: percentage of window width, window refers to the width and height of the browser's visual area.

Vh: percentage of window height

Vmin: current smaller vw and vh

Vmax: current larger vw and vh

For example, vh is often greater than vw, and when vh is greater than vw, then vmin is the smaller of them, that is, equal to vw,vmax and equal to the larger vh.

Cssheight attribute

Compared to the percentage,% is the ratio set relative to the size of the parent element, and vw is determined by the size of the window. In fact, these window units are basically similar to%, with the advantage of being able to obtain the height directly, while using% can not correctly obtain the height of the visual area without setting the body height, so this is a good advantage.

Not only can width and height use this vw,vh,font, but what are these two attributes? first of all, VW, we divide the window width into 100 parts on average, that is, width=100vw is the current screen width, which varies with the screen width. 10vw is 1/10 of the window width. This unit is different from the percentage. The percentage is relative to the parent element. VH is based on height, so I won't repeat it here. In fact, the percentage of width usage can be set.

This is the end of the content of "what are the functions of CSS attributes width and height". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.