interface Web
tutoriel CSS
Exemple d'analyse de l'unité de longueur et de l'adaptation de la largeur en CSS
Exemple d'analyse de l'unité de longueur et de l'adaptation de la largeur en CSS
Unité CSS
Auteur : Chinaxiang Source : Internet 01/12/2015 23:36
Il existe de nombreuses unités de longueur en CSS, je pense donc qu'il est nécessaire d'organiser les notes.
Aperçu
Il existe de nombreuses unités de longueur en CSS, je pense donc qu'il est nécessaire d'organiser un mémo.
Il existe également de nombreuses introductions complètes en ligne, voir les documents de référence pour plus de détails.
Les unités sont généralement divisées en deux catégories :
Unités absolues, qui ne changeront pas en raison des changements de taille d'autres éléments.
L'unité relative n'a pas de valeur de mesure fixe, mais une valeur relative déterminée par la taille des autres éléments.
| Unité | Type | Introduction |
|---|---|---|
px |
Absolu | pixel (un point sur l'écran de l'ordinateur), 1px = 1/96in
|
pt |
Absolu | Points, 1pt = 1/72in
|
pc |
Absolu | Picas, 1pc = 12pt
|
in |
Absolu | Pouces, 1in = 96px = 2.54cm
|
cm |
Absolu | Centimètres, 1cm = 96/2.54px
|
mm |
Absolu | Millimètres, 1mm = 1/10cm
|
q |
Absolu | Quart de millimètres, 1q = 1/4mm
|
% |
Relative | La largeur ou la taille de la police par rapport à l'élément parent |
em | Relative | La taille de la police par rapport à l'élément parent |
rem |
Relative | (c'est-à-dire root em) par rapport à la balise html |
ex |
Relatif | Hauteur des x lettres dans l'environnement de police actuel |
ch |
Relatif | La hauteur des 0 nombres dans l'environnement de police actuel |
vw |
Relatif | 1 % de la fenêtre d'affichage (zone visible du navigateur ) Largeur |
vh |
Relative | 1% Hauteur de la fenêtre (zone visible du navigateur) |
vmin |
Relatif | 1% La plus petite de la largeur et de la hauteur de la fenêtre d'affichage (zone visible du navigateur) |
vmax |
Relatif | 1% La plus grande entre la largeur et la hauteur de la fenêtre d'affichage (zone visible du navigateur) |
Puisque l'unité absolue est une valeur fixe, il n'y a rien à introduire ce qui suit présente principalement l'unité relative.
%
La taille du même attribut par rapport à l'élément parent. Ce n’est en fait pas une unité, mais elle peut après tout être utilisée comme unité de longueur, elle est donc répertoriée ici.
Si elle est utilisée pour définir la police, elle sera relative à la taille de la police de l'élément parent.
La taille de police par défaut dans les balises <html> et <body> dans la plupart des navigateurs est 100%.
html {font-size: 100%;}body {font-size: 100%;}100% = 1em = 16px = 12pt
Si elle est utilisée pour définir des dimensions autres que la police telles que la largeur et la hauteur, la valeur de longueur en pourcentage est basée sur la valeur de longueur de l'élément parent avec le même attribut.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent { margin:150px; width: 200px; height: 200px; border: 1px solid blue; }
p.child { width: 50%; height: 50%; border: 1px dashed black; }
</style></head><body>
<p class="parent">
<p class="child"></p>
</p></body></html>再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。
<p class="parent">
<p class="child"></p>
</p>相对定位元素，它的父元素符合标签嵌套。
绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
浮动元素，它的父元素也符合标签嵌套。
固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。
注意一下绝对定位就行了，其他的相对简单。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { width:1000px; }
body { width:800px; }
#box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; }
#can { position:absolute; top:100px; left:100px; width:50%; height:50%; border:1px solid black; }
</style> </head> <body>
<p id="box">
<p id="can"></p>
</p>
</body> </html>box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。
将 can 设置为 position:
fixed; 则其父元素将不再是 box 而是浏览器视窗。
can 的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { width:1000px; }
body { width:800px; }
#box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; }
#can { float:left; width:50%; height:50%; border:1px solid black; }
</style> </head> <body>
<p id="box">
<p id="can"></p>
</p>
</body> </html>注意： padding、 margin 如果设置了百分比，上，下，左，右
用的都是父元素宽度 的值为标准去计算。
em 和 rem
两者都是基于字体尺寸的，区别在于 em 是相对于当前父元素的字体大小为标准，而 rem 是相对于 html 元素的字体大小为标准。
举个例子你就明白了。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { font-size: 30px; }
body { font-size: 14px; }
p.em { font-size: 1.2em; }
p.rem { font-size: 1.2rem; }
</style></head><body>
<p class="em">
Test <!-- 14 * 1.2 = 16.8px -->
<p class="em">
Test <!-- 16.8 * 1.2 = 20.16px -->
<p class="em">
Test <!-- 20.16 * 1.2 = 24.192px -->
</p>
</p>
</p>
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
</p>
</p>
</p></body></html>Les unités
ex et ch
ex et ch dépendent de la police actuelle font-family et de la taille de la police font-size. ex fait référence à la hauteur des lettres minuscules x dans l'environnement de police actuel, et ch fait référence à la largeur des chiffres 0 dans l'environnement de police actuel.
IE9+ et les navigateurs modernes sont déjà pris en charge.
vw et vh
Les techniques de conception de sites Web réactifs s'appuient fortement sur des règles de proportion. Cependant, l’échelle CSS n’est pas toujours la meilleure solution à chaque problème. Que faire si vous souhaitez utiliser la largeur ou la hauteur de la fenêtre d'affichage au lieu de la largeur de l'élément parent ? C’est exactement ce que proposent les unités vh et vw.
vh est égal à la hauteur de la fenêtre 1/100 Par exemple, si la hauteur du navigateur est 900px, la valeur obtenue par 1vh est 9px . De la même manière, si la largeur de la fenêtre d'affichage est 750px, la valeur obtenue par 1vw est 7.5px.
Les deux unités sont prises en charge dans IE10+ et les navigateurs modernes.
vmin 和 vmax
这两个单位是针对vw和vh
vmin 是vw和vh中比较 小 的值
vmax 是vw和vh中比较 大 的值
.box { height: 100vmin; width: 100vmin;}.box { height: 100vmax; width: 100vmax;}IE10+ 和现代浏览器都已经支持 vmin
webkit浏览器之前不支持vmax，现在已经支持，所有现代浏览器已经支持，但是IE不支持 vmax.
总结
尺寸单位虽然说不是很难的内容，但能够做到精准理解和熟练使用也是极其难得的，也许随着CSS的发展会有更多有用的单位引进。
对单位斤斤计较是一个优秀CSS使用者应该具备的品质，赶紧去挑选合适的单位去开发你的NB产品吧。
下面的代码用来检测您的浏览器是否支持常用单位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
padding: 20px;
}
div {
background: #99ff99;
padding: 5px;
margin-bottom: 10px;
white-space: nowrap;
width: 0;
}
div:after {
content: " (supported)";
}
div.fail {
width: 100% !important;
background: #ff6666 !important;
}
div.fail:after {
content: " (NOT supported)";
}
</style>
</head>
<body>
<div id="percentage">50% - percentage</div>
<div id="pixel">400px - pixels (device pixels)</div>
<div id="em">20em - relative unit</div>
<div id="rem">20rem - root em</div>
<div id="vw">15vw - viewport width</div>
<div id="vh">60vh - viewport height</div>
<div id="vmin">60vmin - smaller of vw or vh</div>
<div id="vmax">60vmax - larger of vw or vh</div>
<div id="inch">4in - inches</div>
<div id="cm">20cm - centimeters</div>
<div id="mm">200mm - millimeters</div>
<div id="pt">120pt - points</div>
<div id="pc">40pc - picas</div>
<div id="ex">60ex - x-height</div>
<div id="ch">60ch - based on width of zero (0) character</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 给指定元素设置宽度
var percentage = $("#percentage").css("width", "50%");
// 如果宽度值为0,即不支持，为此元素添加fail类
if (percentage.width() == 0) percentage.addClass("fail");
var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");
var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");
var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");
var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");
var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");
var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");
var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");
var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");
var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");
var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");
var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");
var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");
var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");
var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");
</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
