7 CSS units you may not know_html/css_WEB-ITnose-HTML Tutorial-php.cn

7 CSS units you may not know_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:54:13

Original

1650 people have browsed it

If you are a front-end development engineer, generally px and em are used more frequently. But the focus of today's article is to introduce some units that we rarely use or even hear about.

1. Revisit em

<style type="text/css">	body {font-size: 12px;}	div  {font-size: 1.5em;}</style><body>	<div>		Test-01 (12px * 1.5 = 18px)		<div>			Test-02 (18px * 1.5 = 27px)			<div>				Test-03 (27px * 1.5 = 41px)			</div>		</div>	</div></body>

Copy after login

Because font-size is inherited, the deeper the layer, the larger the font.

2. rem

Although the above use of em may be used in development, we sometimes want to have a baseline to expand on. When encountering this need, we can use the rem unit. The "r" in rem represents "root", which means setting the font size of the current element to the root element. In most cases, we will set it on the html element.

<style type="text/css">	html {font-size: 12px;}	div  {font-size: 1.5rem;}</style><body>	<div>		Test-01 (12px * 1.5 = 18px)		<div>			Test-02 (12px * 1.5 = 18px)			<div>				Test-03 (12px * 1.5 = 18px)			</div>		</div>	</div></body>

Copy after login

Of course, the rem unit is not only applied to fonts, but can also be implemented into the CSS grid system.

3. vh and vw

When doing responsive layout, we often use percentages for layout. However, CSS percentages are not always the best solution to every problem. CSS The width is relative to the width of its nearest parent element. If you want to use the width and height of the viewport instead of the width and height of the parent element, you can use the vh and vw units. 1vh = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; Using vh and vw can ensure that the width and height of the element adapt to different devices.

4. vmin and vmax

vw and vh correspond to the width and height of the viewport, and vmin and vmax correspond to the minimum and maximum values of width and height respectively. For example, if the browser The width/height is set to 1000px/600px, then

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

Let’s take a look below Let’s look at a few examples:

4.1 A square component always touches the edges of at least two screens

<style type="text/css">.box {	height: 100vmin;	width : 100vmin;}</style><body>	<div class="box" style="background-color: #f00">		fdasjfdlas	</div></body>

Copy after login

4.2 Covering the full screen

<style type="text/css">	body {		margin: 0;		padding:0;	}	.box {		/*宽屏显示器width > height*/		height: 100vmin;		width : 100vmax;	}</style><div class="box" style="background-color: #f00">	fdasjfdlas</div>

Copy after login

5. ex and ch

Ex and ch units are similar to em and rem in that they all depend on font-size, but ex and ch also depend on font-family and are calculated based on font-specific. Quoting the w3C specification:

ex unit Equal to the used x-height of the first available font. [CSS3-FONTS] The x-height is so called because it is often equal to the height of the lowercase "x". However, an ' ex' is defined even for fonts that do not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed. ch unit Equal to the used advance measure of the "0 " (ZERO, U 0030) glyph found in the font used to render it.

Use a picture to explain the meaning of these two units:

These two units, It has many uses, mostly for fine-tuning when printing. For example, sup and sub elements display superscript and subscript respectively, but we can use position and bottom to simulate:

<style type="text/css">body {	margin: 0;	padding:0;}.sup {	position: relative;	bottom: 1ex;}.sub {	position: relative;	bottom: -1ex;}</style><div>	AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf</div>

Copy after login