css unit
1. Absolute unit: px in cm mm
1、px
That is, pixel, which is the most basic and most commonly used length unit, absolute unit. The page displays the
relative length unit according to precise pixels , the measurement unit of the browser, relative to the physical pixel (display screen resolution), 1px under high-definition screen It may occupy 2 physical pixels or even 3 physical pixels. This unit is commonly used by beginners.
2、in
That is feet inch, 1in=2.54cm=96px
3、cm
Centimeters, 1cm=37.8px
4、mm
Millimeters, 1mm=3.78px
2. Relative unit: em rem pt pc ex ch
1 、 in
Relative to the font-size of the current DOM element.
If the font-size of the current element is set to 0.75em, and the font-size of its parent element is 16px, the font-size of the current element is 0.75 * 16px = 12px;
if the width of the current element is set to 10em, and the current element When the font-size is 16px (either inherited from the parent container or set), the width of the current element is 10 * 16px = 160px;
Note 1: The default font height of any browser is 16px. If the font-size of the body element is set to 62.5%, then the actual font-size of the body is 16px*62.5%=10px. If all sub-elements are set to this The font size uses em as the size unit, which is equivalent to 1em=10px, so setting em is very simple. Just divide the actual px value by 10 to get the em unit value.
Note 2: The value of em relative to px is not fixed, it will change with the font-size of the parent element or the current element.
2、rem
em is a new relative unit (root em) of CSS3, relative to the font-size of the root node (generally html node), if the html node is set font-size = 100px, then the element in the document is set to 0.3 rem is calculated as: 0.3 * 100px = 30px.
What is the difference between this unit and em? The difference is that when rem is used to set the font size of an element, it is still a relative size, but the relative size is only the HTML root element. This unit can be said to have the advantages of relative size and absolute size. Through it, all font sizes can be adjusted proportionally only by modifying the root element, and it can also avoid the chain reaction of font size layer by layer.
At present, all browsers have supported rem except IE8 and earlier versions. For browsers that do not support it, the solution is also very simple, that is, to write an absolute unit declaration (override the principle of the upper style by the style below), these browsers will ignore the font size set with rem.
3、pt
Point point, 1pt=1/72in=1.33px
4、pc
That is pie card, 1pc=12pt=16px, pie card is the length unit of the printing industry
5、ex
Take the x height of the font of the current effect, and calculate it at 0.5em if the x height cannot be determined
6、ch
Based on the "0" character in the font used by the node, 0.5em if not found
Percentage unit: vw vh vm%
1、%
Percentage, it is a purer unit of relative length, which can be changed. It describes the percentage value relative to the parent element. Such as 50%, it is half of the parent element.
Relative to the length and height of the parent element, this unit is also quite easy to use.
When position:fixed, no matter where the current element is placed, it will be relative to the window width.
When position:absolute, it will be relative to its relative element width (recursive parent element until the first element with position set).
2、vh/vm/vmin/vmax
Viewport units
What is a viewport?
On the desktop side, the viewport refers to the desktop side, which refers to the viewable area of the browser; while on the mobile side, it involves 3 viewports: Layout Viewport (Layout Viewport), Visual Viewport (Visual Viewport) , Ideal Viewport (ideal viewport).
The "viewport" in the viewport unit, the desktop terminal refers to the viewable area of the browser; the mobile terminal refers to the Layout Viewport in the Viewport, and the "viewport" refers to the size of the viewable area inside the browser, namely The size of window.innerWidth/window.innerHeight does not include the size of the browser area of the taskbar title bar and the bottom toolbar. .
According to the CSS3 specification, the viewport unit mainly includes the following 4:
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
vh and vw: relative to the height and width of the viewport, not the parent element (the CSS percentage is relative to the height and width of the nearest parent element that contains it). 1vh is equal to 1/100 of the viewport height, and 1vw is equal to 1/100 of the viewport width.
For example: the browser height is 950px, the width is 1920px, 1 vh = 950px/100 = 9.5 px, 1vw = 1920px/100 =19.2 px.
vmax is relative to the larger of the width or height of the viewport. The largest one is equally divided into 100 units of vmax.
vmin is the smaller of the width or height relative to the viewport. The smallest one is evenly divided into 100 units of vmin.
This blog is a compilation of your own study notes. It is only for learning and communication, and should not be used for commercial purposes. If there is any infringement, please contact the blogger to delete it. The blogger QQ: 1105810790