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

A responsive layout should be able to dynamically adjust the page content and show different design styles according to the change of the screen size of the device.

In the process of writing responsive CSS code, some relative dimensions are often used to achieve the purpose of relative positioning. For example, techniques such as "adaptive picture" and "flow layout" are needed in common responsive layouts.

Reflected in the writing of CSS code, front-end developers need to accurately master the relative quantity representation of specific attributes.

However, some of the calculation methods of relative quantities are easy to be confused.

In this paper, on the basis of combing all the CSS attributes, the "relative unit, percentage relative quantity and digital relative quantity" are listed clearly.

And then provide the basis for the follow-up responsive design coding.

It is worth noting that the relative quantity of percentage is very easy to be confused, and the calculation methods of percentage values of different CSS attributes are different.

Some details vary greatly relative to the parent element, to the bounding box, to other attributes, to the width, and to the height.

For browser compatibility of the CSS property, please query Can I Use.

Attributes that have been discarded by the standard (Deprecated) are not listed.

You are welcome to work with me to improve this list. The names of the readers who provide the data will be marked in the article.

(provide the relative amount of omissions through comments)

1. Relative units and quantity viewport units (viewport)

Vh: 1Comp100 of the height of the viewport

Vw: 1 stroke 100 of the viewport width

Vmin: the minimum value in the width and height of the viewport

Vmax: the maximum value in viewport width and height is 1x100.

Font unit

Em: the size of the element font-size. If you use em in the font-size attribute, em represents the font-size size that the element inherits.

Rem: the font-size size of the root element. If rem is used on the font-size of the root element, 1 rem represents the initial value of the root element font-size.

The percentage of the offset is relative to the width and height of the element box The percentage of the horizontal direction (x-axis) relative to the width of the element box. The percentage of the vertical direction (y axis) relative to the height of the element box.

Function

There are three channels in rgb/rgba:RGB. The range of positive integer values is 0-255. The range of percentage value is: 0%-100%. Alpha channel, a = 0 means transparent, a = 1 means opaque.

The hsl/hsla:s channel represents saturation, with values ranging from 0 to 100%. L channels represent brightness, with values ranging from 0 to 100%. Alpha channel, a = 0 means transparent, a = 1 means opaque.

Second, digital relative quantity

The decimal relative quantity refers to the quantity in the CSS specification (see MDN specification).

Integer relative quantities refer to quantities in the CSS specification (see MDN specification).

Relative decimal quantity

Font-size-adjust (CSS3): sets the height of the lowercase x letter. The calculation method is the specified numeric value multiplied by font-size.

Zoom: the numeric value refers to the scaling primer itself.

Integer relative quantity

Border-p_w_picpath-width: refers to the multiple of the calculated value of the element border-width.

3. Percentage relative quantity

The percentage relative quantity refers to the quantity in the CSS specification (see MDN specification).

Many length properties use percentages, such as

Width 、 height

Max-height/min-height 、 max-width/min-width

Margin

Padding

Font-size

Border-width

Text-shadow

Background-size

Background-position

Top 、 bottom 、 left 、 right

Line-height

Text-indent

Vertical-align

Note: only calculated properties are inherited. When a parent attribute uses a percentage, accounting for the actual value calculated by the percentage of the parent attribute on the inherited attribute (child attribute) does not inherit the percentage.

Positioning attribute

Top/bottom: in the top attribute, use% to indicate the percentage of height relative to _ containing block _. Can be negative.

Right/left: represents the percentage of width relative to _ containing block _. Can be negative.

Elastic Box Model attribute

View the elastic box model.

Flex-basis: percentage refers to the percentage of the internal main size (inner main size) of the flex container.

That is, a percentage of the parent flex container main size property

Min-height/min-width: the initial value is 0.

Size attribut

Width/max-width/min-width: refers to the percentage of width of _ containing block _. If the width of the containing block depends on the width of this element, the layout result is not defined.

Height/max-height/min-height: refers to the height of _ containing block _ (containing block) of the element generator box (generated box). If the height of the containing block is not explicitly specified (depending on the content height) and the element is not absolutely positioned, the height value is calculated as the auto,max-height value and the none,min-height value is calculated as 0. The percentage height of the root element is relative to the initial inclusion block of the root element.

Outer margin attribute

Margin: refers to the percentage of width of _ containing block _. It can be negative.

Margin-top/margin-bottom: refers to the percentage of width of _ containing block _.

Margin-left/margin-right: refers to the percentage of width of _ most recently containing block _.

Inside margin attribute

Padding: refers to the percentage of width of _ containing block _.

Padding-top/padding-bottom: also refers to the percentage of width of _ containing block _.

Padding-left/padding-right: also refers to the percentage of width of the containing block.

Border property

Border-p_w_picpath: abbreviated form, in which border-p_w_picpath-slice and border-p_w_picpath-width are set in percentage. For more information on the usage of border-p_w_picpath, please refer to here.

Border-p_w_picpath-slice: you can set up to 4 values, of which the percentage of a value refers to the percentage relative to the image size.

Border-p_w_picpath-width: refers to the percentage of size of the border image area (border p_w_picpath area). The entire area where the boundary image is to be drawn is called the boundary image region. The border-p_w_picpath-width property is used to scale the border-p_w_picpath-slice.

Border-radius: refers to the long half axis and short half axis with circular radius or oval shape. The percentage value of the horizontal axis corresponds to the width of the bounding box (border box). The percentage value of the vertical axis corresponds to the height of the bounding box (border box).

Border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius: the value of the fillet horizontal axis corresponds to the width of the bounding box. The value of the vertical axis of the fillet corresponds to the height of the bounding box.

Background attribute

Background: the attribute values in the abbreviation correspond to their respective percentage meanings. Such as background-position, background-size.

Background-position: percentage refers to the size of the background location area minus the size of the background image. The size here refers to the width of the horizontal offset or the height of the vertical offset.

Background-size: percentage value relative to the background location area. Background-size is used to determine the size of the background picture.

"font"

Font: abbreviation, percentage value is used to set the font-size component, meaning the same as font-size.

Font-size: the percentage value relative to the font-size value of the parent element.

Line-height: the percentage value relative to the font-size value of the element itself.

"text"

Text-indent: the percentage value relative to the width of the element bounding box (the containing block).

Word-spacing: the percentage value is relative to the affected text (glyph) width.

Vertical-align: the percentage value is relative to the line-height attribute value of the element itself.

User Interface

Zoom: the percentage value refers to the scaling primer itself.

"2D transformation" (experiment)

Transform: percentage value relative to the size of the bounding box (bounding box).

Transform-origin: percentage value relative to the size of the bounding box (bounding box).

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.