Maison >interface Web >tutoriel HTML >Pourquoi CSS est-il largement utilisé ?
Pourquoi CSS est-il largement utilisé ?
- 零下一度original
- 2017-06-27 10:16:571954parcourir
Les mots précédents
Dans le répertoire d'apprentissage CSS, comment utiliser CSS a été présenté en détail. Pour savoir de quoi il s’agit, il faut aussi savoir pourquoi il en est ainsi. Cet article présentera les raisons de l'émergence de chaque partie du CSS. C'est uniquement pour une compréhension personnelle. S'il y a quelque chose qui ne va pas, n'hésitez pas à communiquer
Pourquoi CSS
.La plupart des premières balises de sites Web étaient presque entièrement composées de tableaux et d'éléments de police et ne peuvent transmettre aucune signification réelle au contenu à afficher, ce qui rend le document moins utilisable et difficile à maintenir. Ainsi, en 1995, le W3C a publié un brouillon CSS pour tenter de résoudre le problème de la structure et du style mixtes
1. Si l'on considère la séparation complète de la structure et du style, la feuille de style peut être utilisée dans plusieurs HTML fichiers, utilisez une feuille de style externe
2. Si la feuille de style est utilisée uniquement pour la page en cours et pour réduire le nombre de requêtes HTTP, utilisez la feuille de style interne
3. Si vous je veux juste spécifier certains styles pour un seul élément, vous pouvez utiliser l'attribut style de HTML Pour définir un style en ligne
Pourquoi le sélecteur
Appliquer certaines règles à un ensemble des types d'éléments dans le document via des sélecteurs CSS
1. Le sélecteur de caractères génériques sélectionne tous les éléments
2. Le sélecteur d'éléments sélectionne les éléments en fonction des balises HTML
3. Le sélecteur de classe sélectionne un type d'élément en définissant un nom de classe
4. Le sélecteur d'ID sélectionne les éléments avec des ID spécifiques
5. Le sélecteur d'attribut sélectionne les éléments en fonction de leurs attributs et valeurs d'attribut
6. Le sélecteur descendant sélectionne les éléments via des relations hiérarchiques HTML
7. Le sélecteur de regroupement combine des éléments avec les mêmes règles pour définir
Pourquoi la cascade
CSS (feuilles de style en cascade) La traduction chinoise est La fonctionnalité la plus fondamentale des feuilles de style en cascade est la cascade. Les déclarations en conflit sont triées en cascade pour déterminer la représentation finale du document
Dans l'exemple ci-dessous, le sélecteur d'élément div et le sélecteur de classe .test peuvent sélectionner
<style>div{height: 100px;}.test{height: 200px;} </style><div class="test"></div>
Pourquoi pirater
CSS Hack est une méthode infaillible pour assurer la compatibilité des styles de navigateur, donc ne l'utilisez pas si vous le pouvez. Essayez de ne pas l'utiliser. Cependant, pour certains bugs du navigateur, tels que les bugs des anciennes versions d'IE, l'utilisation de CSS Hack est parfois un dernier recours
Par exemple, pour IE6 - le navigateur utilise principalement underscore_ et underscore - ces deux caractères implémentent le hack. Comme indiqué ci-dessous, dans le navigateur IE6, la couleur du texte du div est bleue, et dans les autres navigateurs, elle est rouge
<span style="color: #000000;">div{<br> color:red;<br> _color:blue;<br>}</span>
Pourquoi les pseudo-classes et pseudo-classes Éléments
Je crois personnellement que les pseudo-classes et les pseudo-éléments sont une extension des éléments HTML, à travers laquelle ils peuvent enrichir l'expression de style des éléments
Les pseudo-classes sont de fausses classes , similaire à l'ajout d'une classe réelle pour obtenir l'effet, comme l'effet commun de survol de la souris
a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/Les pseudo-éléments sont de faux éléments, similaires à l'ajout d'éléments réels peut être réalisé. Bien entendu, ce qui est ajouté n'est pas un élément, mais du contenu généré Le contenu généré fait principalement référence au contenu créé par le navigateur , tel que :avant et:après
<.> 
Les unités de longueur absolue représentent une mesure physique, y compris les pixels px (pixels), les pouces en (pouces), les pouces en (pouces), les pouces en (pouces), les pouces en (pouces), 1/4 de millimètre q (quart - millimètres), points pt (points), picas (picas) Sur le Web, le pixel px est une unité de mesure typique, et de nombreuses autres unités de longueur sont directement mappées aux pixels. Enfin, ils sont traités en fonction des pixels
1in = 2.54cm = 96px 1cm = 10mm = 96px/2.54 = 37.8px 1mm = 0.1cm = 3.78px 1q = 1/4mm = 0.945px 1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px 1pc = 12pt = 1/6in = 1/6*96px = 16px
【字体相关的长度单位】
字体相关的相对长度单位包括em、ex、ch、rem
em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size
rem是相对于根元素html的font-size属性的计算值
ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值
ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值
【视口相关的长度单位】
视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在
关于视口相关的单位有vh、vw、vmin、vmax4个单位
vh:布局视口高度的 1/100 vw:布局视口宽度的 1/100 vmin:布局视口高度和宽度之间的最小值的 1/100 vmax:布局视口高度和宽度之间的最大值的 1/100
Why 盒模型
盒模型是CSS布局的基础，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小
【box-sizing】
在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸
在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式
Why margin重叠
在网页布局中，因为margin重叠的原因，我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上，它是在很大的作用的
HTML文档创建的初衷只是用来展示信息的。HTML文档只使用默认样式的前提下，如果上下margin不发生重叠，则会出现以下几个问题：1、连续段落或列表之类，如果没有margin重叠，首尾项间距会和其他兄弟元素呈现1:2的关系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都会影响原生的布局，与web设计原则相违背；3、遗落的空的任意多个p标签，会影响原来的阅读排版
所以，我们要善用重叠，可以在列表项中同时使用margin-top和margin-bottom。这样，使页面结构更具有健壮性，最后一个元素移除或位置调换，都不会破坏原生的布局
【-webkit-margin-collapse】
-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)
Cet attribut est utilisé pour définir si la marge se chevauche et agit sur l'un des deux éléments où se produit le chevauchement des marges. Si les deux utilisent cet attribut, l'un est défini pour être supprimé et l'autre est défini pour se séparer, l'effet final est un assemblage superposé
Pourquoi auto
Comprenez le formatage visuel et vous pourrez déterminer si l'effet que vous obtenez est le bon effet qui doit être affiché, ou s'il s'agit d'un bug de compatibilité du navigateur. L'un des concepts les plus importants dans le formatage visuel est auto. La valeur auto est utilisée pour combler l'écart entre la valeur réelle et la somme requise
[Pourquoi la largeur d'un élément au niveau du bloc se remplit-elle. l'élément parent par défaut]
Puisque la valeur par défaut de la largeur de l'élément au niveau du bloc est auto et que les valeurs par défaut de margin, border et padding sont toutes 0, selon la formule de calcul selon laquelle la somme horizontale de la boîte de l'élément au niveau du bloc est égale à la largeur de l'élément parent, la largeur de l'élément au niveau du bloc est égale à inclure par défaut Le bloc est la largeur de la largeur de l'élément parent
[Pourquoi l'élément de niveau bloc affiché à gauche par défaut après avoir défini la largeur]
Parce qu'une fois la largeur définie pour l'élément de niveau bloc, les valeurs par défaut de marge, de bordure et de remplissage sont toutes deux 0, selon le formule de calcul selon laquelle la somme horizontale des boîtes d'éléments au niveau du bloc est égale à la largeur de l'élément parent. Cette situation est appelée attribut de formatage surcontraint. À ce stade, la marge droite est toujours forcée à être automatique, de sorte que la marge droite soit affichée à gauche et que la marge droite soit utilisée pour constituer la largeur restante
[Pourquoi la largeur est-elle fixe ? Le réglage de margin:auto pour les éléments au niveau du bloc peut obtenir un affichage centré horizontalement】
De même, selon la formule de calcul, la somme horizontale des boîtes d'éléments au niveau du bloc est égale à la largeur de l'élément parent, la bordure et le remplissage sont égaux à 0. Après avoir défini une largeur fixe, margin -left et margin-right divisent la largeur restante de manière égale
[Pourquoi la hauteur par défaut des éléments au niveau du bloc est la hauteur de l'élément lui-même]
Personnellement, je pense que cela est différent du fait que le navigateur se déplace d'abord de gauche à droite, puis de Lié au mécanisme de rendu de haut en bas. Ce mécanisme de rendu détermine que la valeur de largeur est déterminée et que la valeur de hauteur est la hauteur de l'élément lui-même. Si la valeur de la hauteur est également déterminée, c'est-à-dire la hauteur de la fenêtre d'affichage, chaque fois qu'un élément au niveau du bloc est rendu, il occupera toute la taille de l'écran, ce qui est sans aucun doute un désastre, le navigateur doit donc être aussi petit que possible ; tout en veillant à ce qu'il soit suffisamment large. Hauteur, cette hauteur la plus petite possible est la hauteur de l'élément lui-même
[Pourquoi les éléments au niveau bloc ne peuvent pas être affichés verticalement avec margin:auto set]
Le navigateur définit margin-top et margin-bottom sur auto , ils seront automatiquement réinitialisés à 0. Si vous souhaitez obtenir un centrage vertical, vous pouvez utiliser calc() pour le calculer vous-même. Si la hauteur est de 100 px, la bordure est de 0, le remplissage est de 10 px et la hauteur du bloc conteneur est de 200 px, alors margin-top =. calc((200px - 100px - 10px -10px) / 2)
[Remarque] Le problème du chevauchement des marges dans le sens vertical doit être pris en compte
[Pourquoi le réglage de l'image margin:auto ne peut pas obtenir un affichage central horizontal]
L'image ne peut pas être centrée horizontalement, comme les éléments au niveau du bloc qui ne peuvent pas être centrés verticalement. Étant donné que la largeur de l'image est par défaut sa propre largeur, les marges gauche et droite sont définies sur automatique et seront réinitialisées à 0 ; si vous souhaitez obtenir un affichage horizontal et centré, définissez l'affichage de l'image sur bloc
.
Pourquoi la hauteur des lignes et l'alignement vertical
Dans un flux normal, la disposition des éléments au niveau du bloc est principalement basée sur le modèle de boîte, tandis que la disposition des éléments en ligne (y compris les éléments de bloc en ligne) repose principalement sur line-height et vertical-align
line-height La hauteur de ligne fait référence à la distance entre les lignes de base des lignes de texte. vertical-align est utilisé pour définir l'alignement vertical. Tous les éléments alignés verticalement affecteront la hauteur de la ligne
[Pourquoi les éléments de bloc en ligne ont des espaces inférieurs]
inline- L'élément bloc laisse un espace dans l'élément de niveau bloc car l'alignement vertical par défaut de l'image est l'alignement de la ligne de base (en principe, l'alignement de la ligne de base équivaut à aligner le bord inférieur de l'image avec le bord inférieur de la lettre anglaise majuscule X de le texte anonyme); alors que le texte anonyme a des lignes hautes, hérite de la hauteur de ligne définie par l'élément parent, la valeur par défaut est normale (1,334 fois la taille de la police sous chrome), il y a donc une distance entre le bord inférieur du X et le bord inférieur de la boîte de ligne, et cette distance est laissée par l'espace d'image
Par conséquent, il existe trois solutions pour résoudre ce problème
1. Définissez display:block, car l'alignement vertical peut ne doit être utilisé que sur les éléments de remplacement et les éléments en ligne, remplacez-le par des éléments de niveau bloc, ce qui invalidera l'alignement vertical
2. Définissez la hauteur de ligne du parent : 0, de sorte que la distance entre le texte anonyme et la zone de ligne est 0
3. Définissez l'alignement vertical en haut/milieu/bas
[Pourquoi la marge verticale des éléments en ligne n'est pas valide]
Parce que la disposition verticale de Les éléments en ligne sont principalement affectés par la hauteur de ligne et l'alignement vertical, la marge verticale ne les affectera pas, donc cela n'affectera pas la disposition verticale. En mode d'affichage, la zone de marge n'affichera pas l'arrière-plan de l'élément, elle n'affectera donc pas l'affichage de ses propres éléments, donc la marge verticale des éléments en ligne n'est pas valide
Pourquoi flottant
La première utilisation de float vient de , qui est utilisé pour la composition du texte entourant les images. De nos jours, le flottant est une méthode de mise en page couramment utilisée en CSS
L'élément flottant s'éloigne du flux normal, puis se déplace vers la gauche ou la droite dans la direction spécifiée et s'arrête lorsqu'il rencontre la limite parent ou un autre élément flottant . Flottant a les 4 caractéristiques suivantes :
1. Flux flottant : les éléments du flux normal sont disposés les uns après les autres ; les éléments flottants constituent également un flux flottant
2. Boîte au niveau bloc : flottant les éléments se généreront eux-mêmes Une boîte au niveau du bloc, quel que soit l'élément lui-même, empêche les marges autour de l'élément flottant de fusionner
3. Wrapping : le bloc contenant d'un élément flottant fait référence à son bloc le plus proche- élément ancêtre de niveau et descendants d'éléments flottants. Les éléments ne doivent pas s'étendre au-delà des limites supérieure, gauche ou droite du bloc conteneur. Si la hauteur du bloc conteneur n'est pas définie et que le bloc conteneur flotte, le bloc conteneur s'étendra pour inclure tous ses éléments flottants descendants. Si la largeur du bloc conteneur n'est pas définie et que le bloc conteneur flotte, la largeur de ; le bloc contenant sera étiré par les éléments flottants descendants.
4. Destructivité : l'élément flottant se détache du flux normal et détruit son propre attribut de boîte de ligne, provoquant la hauteur du. l'élément de bloc qu'il contient s'effondre, ce qui entraîne le raccourcissement de la zone de ligne à côté de la boîte flottante, laissant de l'espace pour la boîte flottante, et les zones de ligne sont réorganisées autour de la boîte flottante
[Pourquoi devez-vous effacer le float]
Effacer le float consiste en fait à résoudre la hauteur du bloc contenant de l'élément flottant Le problème de l'effondrement
Pour les navigateurs standards , il existe en fait deux méthodes pour effacer les éléments flottants. L'une consiste à ajouter un nouvel élément sous l'élément flottant et à définir l'attribut clear. L'autre consiste à ajouter un nouvel élément sous l'élément flottant et à définir l'attribut clear. BFC du bloc conteneur pour qu'il contienne des éléments flottants
Pourquoi BFC
Souvent, on utilise BFC pour effacer les flotteurs, mais en réalité là Il existe de nombreuses autres utilisations de BFC
Avant d'expliquer BFC, parlons d'abord du flux de documents. Le flux de documents dont nous parlons souvent est en fait divisé en trois types : le flux de positionnement, le flux flottant et le flux ordinaire. Le flux ordinaire fait en réalité référence au FC dans BFC. FC est l'abréviation de contexte de formatage, qui signifie littéralement contexte de formatage. Il s'agit d'une zone de rendu sur la page. Elle possède un ensemble de règles de rendu qui déterminent la disposition de ses sous-éléments et sa relation avec les autres éléments. effet. Les FC courants incluent BFC, IFC, GFC et FFC. BFC est un contexte de formatage de bloc, qui est un contexte de formatage au niveau du bloc. Il s'agit d'une zone de rendu utilisée pour disposer des boîtes au niveau du bloc
qui répondent. les conditions suivantes BFC peuvent être déclenchées dès 1. L'élément racine est l'élément HTML 2. La valeur de float n'est pas nulle 3. La valeur du débordement n'est pas visible4. La valeur d'affichage est inline-block, table-cell, table-caption 5. La valeur de position est absolue ou fixe
BFC est un conteneur indépendant isolé, les éléments enfants à l'intérieur du conteneur n'affecteront pas les éléments externes, et vice versa . BFC est souvent utilisé pour atteindre les trois objectifs suivants
1. Empêcher les éléments d'être recouverts par des éléments flottantsDeux enfants adjacents au niveau du bloc appartenant au même BFC Les marges supérieure et inférieure des éléments se chevaucheront (lorsque writing-mode:tb-rl est défini, les marges horizontales se chevaucheront). Ainsi, lorsque deux sous-éléments adjacents au niveau du bloc appartiennent à des BFC différents, vous pouvez empêcher le chevauchement des marges
Pourquoi le positionnement CSS dispose de trois mécanismes de mise en page de base : le flux normal, le flux flottant et le flux de positionnement. Le positionnement vous permet de définir exactement où doit apparaître la boîte d'un élément par rapport à sa position normale, ou par rapport à un élément parent, un autre élément, ou même la fenêtre du navigateur elle-même
Lorsqu'un élément est positionné de manière absolue, sera complètement supprimé du flux documentaire. Un élément est positionné par rapport à son ancêtre positionné le plus proche. Si l'élément n'a pas d'ancêtre positionné, sa position est alors relative au document bloc contenant l'original, dont les limites sont placées en fonction de la propriété offset. L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal. Les éléments positionnés ne couleront pas dans le contenu des autres éléments, et vice versa
Lorsqu'un élément est positionné relativement, il sera déplacé de sa position normale, cependant, de l'espace qu'il occupait à l'origine ne le fera pas. Alors il disparaît. Les éléments relativement positionnés créent un nouveau bloc contenant pour tous leurs éléments enfants. Ce bloc conteneur correspond à la position où résidait initialement l'élément
固定定位与绝对定位很类似，元素会完全从文档流中去除，但固定元素的偏移是相对于视窗
【为什么clip属性无效】
绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果
.hide{
position:absolute;
clip: rect(0,0,0,0);
}【为什么静态位置的元素会发生跳动】
对于居中对齐的行内元素来说，将元素设置为absolute或fixed会发生静态位置跳动问题。而relative或static则不会有此问题。这是因为元素默认的居中对齐是元素的内容中线对应父级块级元素中线，而当元素绝对定位或固定定位之后，定位元素左边界将与其父级块级元素的中线对齐
【为什么overflow属性会失效】
当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被父级overflow属性剪裁
解决办法就是有两种， 一种是让overflow元素自身成为包含块，给父级设置position:absolute或fixed或relative；另一种是设置overflow元素的子元素为包含块，在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative
Why z-index
对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index
利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放
对于CSS2.1来说，页面元素的堆叠规则如下图所示
Pour les éléments positionnés (éléments dont la position n'est pas statique), si le z-index n'est pas défini ou si le z-index est le même, les éléments suivants couvrent les éléments précédents pour les éléments de même niveau dans le même empilement ; contexte, les valeurs z -Higher par défaut de l'index remplacent les valeurs plus petites de z-index
Une fois qu'une valeur z-index (pas auto) est spécifiée pour un élément, l'élément établira son propre local contexte d’empilement. Cela signifie que tous les descendants de l'élément ont leur propre ordre d'empilement par rapport à l'élément ancêtre
[Note] La valeur auto signifie que le niveau de pile généré dans le contexte d'empilement actuel est le même que le niveau de son parent Cette boîte Aucun nouveau contexte de superposition local n'est créé. Les valeurs de z-index:auto et z-index:0 sont égales, mais z-index:0 créera un nouveau contexte d'empilement local
L'émergence de CSS3 a remis en question de nombreuses règles du passé. L'impact sur le z-index du contexte d'empilement est plus significatif, incluant principalement les 8 attributs suivants
1. Éléments flexibles avec des valeurs d'index z autres que auto (affichage de l'élément parent : flex | inline-flex)
2. La valeur d'opacité de transparence de l'élément n'est pas égale à 1
3. La transformation de l'élément n'est pas nulle
4. La valeur mix-blend-mode de l'élément est pas normal
5. La valeur de filtre de l'élément n'est pas nulle
6. La valeur d'isolement de l'élément est isolate
7. La valeur d'attribut spécifiée par will- le changement est l'un des éléments ci-dessus
8, le -webkit-overflow-scrolling de l'élément est défini sur touch
La définition de l'un des 8 attributs ci-dessus est similaire à la définition absolue, le contexte en cascade z- l'index prendra effet
Pourquoi débordement
Lorsqu'un élément est fixé à une taille spécifique, mais que le contenu ne peut pas tenir dans l'élément. À ce stade, vous pouvez utiliser overflow (overflow) pour contrôler cette situation
Les attributs de overflow-x et overflow-y étaient À l'origine navigation IE Les propriétés développées par le navigateur seul ont ensuite été adoptées et standardisées par CSS3. overflow-x est principalement utilisé pour définir le cisaillement du débordement de contenu horizontal, tandis que overflow-y est principalement utilisé pour définir le cisaillement du débordement de contenu vertical
BFC peut être déclenché lorsque le débordement est réglé sur automatique, à défilement ou masqué, afin que le débordement puisse implémenter certaines applications associées
[Pourquoi les barres de défilement apparaissent]
Les barres de défilement et le débordement sont étroitement liés . Ce n'est que lorsque la valeur du débordement du parent est auto ou scroll et que le contenu de l'élément dépasse la zone de l'élément que la barre de défilement peut apparaître
Peu importe Dans n'importe quel navigateur, la barre de défilement par défaut provient de et non de . Parce que l'élément a une marge de 8px par défaut. Si la barre de défilement provient de l'élément , il doit y avoir un espace de 8 pixels entre la barre de défilement et la page. En fait, il n'y a pas d'espace, donc la barre de défilement provient de l'élément >
chrome/firefox/ La largeur par défaut de la barre de défilement du navigateur IE est de 17 px et celle du navigateur Safari est de 21 px Pourquoi flex CSS3 introduit une nouvelle mise en page modèle-flex. Flex est l'abréviation de boîte flexible, généralement appelée modèle de boîte flexible. La disposition flexible offre un moyen plus efficace de disposer les éléments dans un conteneur pour s'adapter à différents types de dispositifs d'affichage et d'écrans de différentes tailles
<.>
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!