Im CSS-Lernverzeichnis wurde die Verwendung von CSS ausführlich vorgestellt. Um zu wissen, was es ist, müssen Sie auch wissen, warum es so ist. In diesem Artikel werden die Gründe vorgestellt, warum jeder Teil von CSS angezeigt wird. Er dient nur dem persönlichen Verständnis. Wenn etwas nicht stimmt, teilen Sie uns dies bitte mit
Warum CSS
1. Wenn man die vollständige Trennung von Struktur und Stil in Betracht zieht, kann das Stylesheet in mehreren HTML-Codes verwendet werden Dateien, verwenden Sie ein externes Stylesheet
2. Wenn das Stylesheet nur für die aktuelle Seite verwendet wird und um die Anzahl der HTTP-Anfragen zu reduzieren, verwenden Sie das interne Stylesheet
3. Wenn Sie Wenn Sie nur einige Stile für ein einzelnes Element angeben möchten, können Sie das style-Attribut von HTML verwenden. So legen Sie einen Inline-Stil fest
Warum Selektor
1. Wildcard-Selektor wählt alle Elemente aus
2. Element-Selektor wählt Elemente gemäß HTML-Tags aus
3. Klassen-Selektor wählt a Typ des Elements durch Definieren eines Klassennamens
4. Der ID-Selektor wählt Elemente mit bestimmten IDs aus
5. Der Attributselektor wählt Elemente basierend auf ihren Attributen und Attributwerten aus
6. Der Nachkommenselektor wählt über hierarchische HTML-Beziehungen Elemente aus
7. Der Gruppenselektor kombiniert Elemente mit denselben Regeln, um
Warum Kaskadierung
CSS (Cascading Style Sheets) Chinesische Übersetzung ist Das grundlegendste Merkmal von Cascading Style Sheets ist die Kaskadierung. Widersprüchliche Deklarationen werden durch Kaskadierung sortiert, um die endgültige Dokumentdarstellung zu bestimmen Im folgenden Beispiel können sowohl der Elementselektor div als auch der Klassenselektor .test
<style>div{height: 100px;}.test{height: 200px;} </style><div class="test"></div><span style="color: #000000;">div{<br> color:red;<br> _color:blue;<br>}</span>a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/ Pseudoelemente sind gefälschte Elemente, ähnlich Durch Hinzufügen eines tatsächlichen Elements kann erreicht werden. Was hinzugefügt wird, ist natürlich kein Element, sondern generierter Inhalt
Generierter Inhalt bezieht sich hauptsächlich auf den vom Browser erstellten Inhalt
:before und:after
Absolute Längeneinheiten stellen eine physikalische Messung dar, einschließlich Pixel px (Pixel), Zoll in (Zoll), Zoll in (Zoll), Zoll in (Zoll), Zoll in (Zoll), 1/4 Millimeter q (Viertel). - Millimeter), Punkte pt (Punkte), Picas (Picas) Im Web ist Pixel px eine typische Maßeinheit, und viele andere Längeneinheiten werden direkt Pixeln zugeordnet. Abschließend werden sie pixelweise verarbeitet
【字体相关的长度单位】
字体相关的相对长度单位包括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
盒模型是CSS布局的基础，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小
【box-sizing】
在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸
在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式
在网页布局中，因为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>(分隔)
Dieses Attribut wird verwendet, um festzulegen, ob sich Ränder überlappen, und wirkt sich auf eines der beiden Elemente aus, bei denen eine Randüberlappung auftritt. Wenn beide dieses Attribut verwenden, ist eines auf „Verwerfen“ und das andere auf „Trennung“ eingestellt. Der Endeffekt ist eine überlappende Kollation.
Wenn Sie die visuelle Formatierung verstehen, können Sie feststellen, ob der Effekt, den Sie erhalten, der richtige Effekt ist, der angezeigt werden sollte, oder ob es sich um einen Browserkompatibilitätsfehler handelt. Eines der wichtigeren Konzepte bei der visuellen Formatierung ist Auto. Der Auto-Wert wird verwendet, um die Lücke zwischen dem tatsächlichen Wert und der erforderlichen Summe auszugleichen.
[Warum füllt sich die Breite eines Elements auf Blockebene? standardmäßig das übergeordnete Element]
Da der Standardwert der Elementbreite auf Blockebene automatisch ist und die Standardwerte für Rand, Rahmen und Polsterung alle 0 sind, ergibt sich gemäß der Berechnungsformel die horizontale Summe Die Breite des Blockebenenelementfelds entspricht standardmäßig der Breite des übergeordneten Elements. Die Breite des Blockebenenelements entspricht standardmäßig dem Einschluss. Der Block entspricht der Breite des übergeordneten Elements
[Warum? Das Blockebenenelement wird standardmäßig links angezeigt, nachdem die Breite festgelegt wurde Berechnungsformel, dass die horizontale Summe der Elementkästen auf Blockebene gleich der Breite des übergeordneten Elements ist. Diese Situation wird als überbeschränktes Formatierungsattribut bezeichnet. Zu diesem Zeitpunkt wird der rechte Rand immer auf automatisch gesetzt, sodass der rechte Rand auf der linken Seite angezeigt wird und der rechte Rand zum Ausfüllen der verbleibenden Breite
[Warum ist die Breite fest? Durch Festlegen von margin:auto für Elemente auf Blockebene kann eine horizontal zentrierte Anzeige erreicht werden.] Ebenso ist gemäß der Berechnungsformel die horizontale Summe der Elementboxen auf Blockebene gleich Zur Breite des übergeordneten Elements sind Rand und Abstand 0. Nach dem Festlegen einer festen Breite teilen margin -left und margin-right die verbleibende Breite gleichmäßig [Warum die Höhe von Elementen auf Blockebene standardmäßig auf die Höhe des Elements selbst] Persönlich denke ich, dass sich dies von der Tatsache unterscheidet, dass sich der Browser zuerst von links nach rechts und dann von oben nach unten bewegt. Dieser Rendering-Mechanismus bestimmt, dass der Breitenwert bestimmt wird und der Höhenwert die Höhe des Elements selbst ist. Wenn auch der Höhenwert bestimmt wird, dh die Höhe des Ansichtsfensters, nimmt jedes Mal, wenn ein Element auf Blockebene gerendert wird, die gesamte Bildschirmgröße ein, was zweifellos eine Katastrophe ist. Daher muss der Browser so klein wie möglich sein Stellen Sie dabei sicher, dass die Höhe breit genug ist. Diese Höhe ist so klein wie möglich und entspricht der Höhe des Elements selbst. [Warum Elemente auf Blockebene nicht vertikal mit margin:auto set angezeigt werden können] Der Browser setzt margin-top und margin-bottom auf auto , sie werden automatisch auf 0 zurückgesetzt. Wenn Sie eine vertikale Zentrierung erreichen möchten, können Sie diese mit calc() selbst berechnen. Wenn die Höhe 100 Pixel beträgt, der Rand 0 beträgt, der Abstand 10 Pixel beträgt und die Höhe des enthaltenden Blocks 200 Pixel beträgt, dann beträgt margin-top = calc((200px - 100px - 10px -10px) / 2) [Hinweis] Das Problem der Randüberlappung in vertikaler Richtung muss berücksichtigt werden[Warum die Bildeinstellung „margin:auto“ nicht möglich ist horizontale zentrierte Anzeige erreichen] Das Bild kann nicht horizontal zentriert werden, ähnlich wie bei Elementen auf Blockebene, die nicht vertikal zentriert werden können. Da die Breite des Bildes standardmäßig auf seine eigene Breite eingestellt ist, sind die linken und rechten Ränder auf „Auto“ eingestellt und werden auf 0 zurückgesetzt. Wenn Sie eine horizontale und zentrierte Anzeige erreichen möchten, stellen Sie die Bildanzeige auf „Blockieren“ ein Warum Zeilenhöhe und vertikale Ausrichtung Bei normalem Fluss basiert das Layout von Blockebenenelementen hauptsächlich auf dem Boxmodell, während das Layout von Inline-Elementen (einschließlich Inline-Blockelementen) basiert hauptsächlich aufvertical-align line-height. Die Zeilenhöhe bezieht sich auf den Abstand
zwischen den Grundlinien von Textzeilen. Vertical-Align wird verwendet, um die vertikale Ausrichtung festzulegen. Alle vertikal ausgerichteten Elemente wirken sich auf die Zeilenhöhe aus[Warum Inline-Block-Elemente untere Lücken haben]
inline- Das Blockelement hinterlässt eine Lücke im Blockebenenelement, da die standardmäßige vertikale Ausrichtung des Bildes die Grundlinienausrichtung ist (im Prinzip entspricht die Grundlinienausrichtung der Ausrichtung der Unterkante des Bildes an der Unterkante des englischen Großbuchstabens „X“) der anonyme Text); während anonymer Text Zeilen hoch hat, erbt er die vom übergeordneten Element festgelegte Zeilenhöhe, der Standardwert ist normal (1,334-fache Schriftgröße unter Chrome), sodass zwischen der Unterkante des X und ein Abstand besteht der untere Rand des Linienfelds, und dieser Abstand wird durch die Bildlücke gelassen Daher gibt es drei Lösungen, um dieses Problem zu lösen 1. Stellen Sie display:block ein, da die vertikale Ausrichtung möglich ist Betrifft nur Ersatzelemente und Inline-Elemente, ändern Sie es in Elemente auf Blockebene, wodurch die vertikale Ausrichtung ungültig wird 2. Legen Sie die Zeilenhöhe des übergeordneten Elements fest: 0, sodass der Abstand zwischen dem anonymen Text und der Zeile box ist 0 3. Vertikale Ausrichtung auf oben/Mitte/unten einstellen[Warum der vertikale Rand von Inline-Elementen ungültig ist] Aufgrund des vertikalen Layouts von Inline-Elementen wird hauptsächlich von der Zeilenhöhe und der vertikalen Ausrichtung beeinflusst, der vertikale Rand hat keinen Einfluss auf sie und somit auch nicht auf das vertikale Layout. Im Anzeigemodus zeigt der Randbereich den Elementhintergrund nicht an, sodass die Anzeige seiner eigenen Elemente nicht beeinträchtigt wird. Daher ist der vertikale Rand von Inline-Elementen ungültig. Warum schwebendDas schwebende Element löst sich vom normalen Fluss, bewegt sich dann nach links oder rechts in die angegebene Richtung und stoppt, wenn es auf die übergeordnete Grenze oder ein anderes schwebendes Element trifft . Floating hat die folgenden 4 Eigenschaften:
1. Floating-Flow: Elemente im normalen Flow werden nacheinander angeordnet; Floating-Elemente bilden ebenfalls einen Floating-Flow
2. Box auf Blockebene: Floating Elemente erzeugen sich selbst. Eine Box auf Blockebene, unabhängig vom Element selbst, verhindert, dass die Ränder um das schwebende Element verschmelzen
3. Umbruch: Der enthaltende Block eines schwebenden Elements bezieht sich auf seinen nächsten Block. Ebene-Vorfahrenelement und Nachkommen von schwebenden Elementen. Elemente sollten nicht über die obere, linke oder rechte Grenze des enthaltenden Blocks hinausragen. Wenn die Höhe des umschließenden Blocks nicht festgelegt ist und der umschließende Block schwebend ist, wird der umschließende Block erweitert, um alle seine untergeordneten schwebenden Elemente einzuschließen Der umschließende Block wird durch die absteigenden schwebenden Elemente gedehnt.
4 Das darin enthaltene Blockelement wird ausgeblendet, wodurch das Linienfeld neben dem schwebenden Feld verkürzt wird, sodass Platz für das schwebende Feld bleibt und die Linienfelder um das schwebende Feld herum neu angeordnet werden
[Warum Sie das löschen müssen float]
Das Löschen des Floats dient eigentlich dazu, die Höhe des enthaltenden Blocks des Floating-Elements zu lösen. Das Problem des Zusammenbruchs
Für Standardbrowser Es gibt tatsächlich zwei Methoden zum Löschen von schwebenden Elementen. Die andere besteht darin, ein neues Element unter dem schwebenden Element hinzuzufügen und das klare Attribut festzulegen BFC des enthaltenden Blocks, sodass er Floating-Elemente enthält
Oft verwenden wir BFC, um Floats zu löschen, aber in Wirklichkeit gibt es das Es gibt viele andere Verwendungsmöglichkeiten für BFC
Bevor wir BFC erklären, sprechen wir zunächst über den Dokumentenfluss. Der Dokumentenfluss, über den wir oft sprechen, ist tatsächlich in drei Typen unterteilt: Positionierungsfluss, schwebender Fluss und gewöhnlicher Fluss. Der gewöhnliche Fluss bezieht sich tatsächlich auf den FC in BFC. FC ist die Abkürzung für Formatierungskontext, was wörtlich „Formatierungskontext“ bedeutet. Es handelt sich um einen Rendering-Bereich auf der Seite. Er verfügt über eine Reihe von Rendering-Regeln, die bestimmen, wie seine Unterelemente angeordnet sind und welche Beziehung sie zu anderen Elementen haben. Wirkung. Zu den gängigen FCs gehören BFC, IFC, GFC und FFC. BFC ist ein Blockformatierungskontext, ein Formatierungskontext auf Blockebene, der zum Layout von Feldern auf Blockebene
verwendet wird Die folgenden Bedingungen BFC können ausgelöst werden, sobald 1. Das Wurzelelement ist das HTML-Element 2. Der Wert von float ist nicht none 3. Der Wert Der Überlauf ist nicht sichtbar4. Der Wert der Anzeige ist Inline-Block, Tabellenzelle, Tabellenüberschrift 5. Der Wert der Position ist absolut oder fest
BFC ist ein isolierter unabhängiger Container. Die untergeordneten Elemente im Container haben keinen Einfluss auf die äußeren Elemente und umgekehrt . BFC wird häufig verwendet, um die folgenden drei Zwecke zu erreichen
1. Verhindern Sie, dass Elemente durch schwebende Elemente abgedeckt werdenZwei benachbarte untergeordnete Elemente auf Blockebene, die zu der gehören gleicher BFC Die oberen und unteren Ränder der Elemente überlappen sich (wenn writing-mode:tb-rl eingestellt ist, überlappen sich die horizontalen Ränder). Wenn also zwei benachbarte Unterelemente auf Blockebene zu unterschiedlichen BFCs gehören, können Sie Randüberlappungen verhindern.
Warum Positionierung CSS verfügt über drei grundlegende Layoutmechanismen: normaler Fluss, schwebender Fluss und Positionierungsfluss. Durch die Positionierung können Sie genau definieren, wo die Box eines Elements relativ zu seiner normalen Position oder relativ zu einem übergeordneten Element, einem anderen Element oder sogar dem Browserfenster selbst erscheinen soll
Wenn ein Element absolut positioniert ist, wird vollständig aus dem Dokumentenfluss entfernt. Ein Element wird relativ zu seinem nächsten positionierten Vorfahren positioniert. Wenn das Element keine positionierten Vorfahren hat, dann ist seine Position relativ zum ursprünglichen enthaltenden Blockdokument, dessen Grenzen entsprechend der Offset-Eigenschaft platziert werden. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat. Positionierte Elemente fließen nicht in den Inhalt anderer Elemente ein und umgekehrt
Wenn ein Element relativ positioniert ist, wird es von seiner normalen Position verschoben, jedoch von dem Platz, den es ursprünglich einnahm wird nicht, also verschwindet es. Relativ positionierte Elemente erstellen einen neuen umschließenden Block für alle ihre untergeordneten Elemente. Dieser enthaltende Block entspricht der Position , an der sich das Element ursprünglich befand
固定定位与绝对定位很类似，元素会完全从文档流中去除，但固定元素的偏移是相对于视窗
【为什么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
对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index
利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放
对于CSS2.1来说，页面元素的堆叠规则如下图所示
Wenn bei positionierten Elementen (Elementen, deren Position nicht statisch ist) der Z-Index nicht festgelegt ist oder der Z-Index gleich ist, decken die folgenden Elemente die vorherigen Elemente für Elemente derselben Ebene in derselben Stapelung ab Kontext, die Standardeinstellung z - Höhere Werte des Index überschreiben kleinere Werte des Z-Index
Sobald ein Z-Index-Wert (nicht automatisch) für ein Element angegeben wird, erstellt das Element seinen eigenen lokalen Wert Stapelkontext. Dies bedeutet, dass alle Nachkommen des Elements ihre eigene Stapelreihenfolge relativ zum Vorgängerelement haben
[Hinweis] Der Wert „auto“ bedeutet, dass die im aktuellen Stapelkontext generierte Stapelebene mit der Ebene des übergeordneten Elements übereinstimmt In diesem Feld wird kein neuer lokaler Overlay-Kontext erstellt. Die Werte von z-index:auto und z-index:0 sind gleich, aber z-index:0 erstellt einen neuen lokalen Stapelkontext
Das Aufkommen von CSS3 hat viele Regeln der Vergangenheit in Frage gestellt. Die Auswirkung auf den Z-Index des Stapelkontexts ist bedeutender und umfasst hauptsächlich die folgenden 8 Attribute
1. Flex-Elemente mit anderen Z-Index-Werten als auto (Anzeige des übergeordneten Elements: flex | inline-flex)
2. Der Transparenz-Deckkraftwert des Elements ist nicht gleich 1
3. Die Transformationstransformation des Elements ist nicht „none“
4. Der Mix-Blend-Modus-Wert des Elements ist nicht normal
5. Der Filterwert des Elements ist nicht „none“
6. Der Isolationswert des Elements ist „isolate“
7. Der durch will- angegebene Attributwert Änderung ist eines der oben genannten
8 , das -webkit-overflow-scrolling des Elements ist auf touch eingestellt
Das Festlegen eines der oben genannten 8 Attribute ähnelt dem Festlegen von absolut, der kaskadierende Kontext z- Index wird wirksam
Wenn ein Element auf eine bestimmte Größe festgelegt ist, der Inhalt jedoch nicht in das Element passt. Zu diesem Zeitpunkt können Sie overflow (overflow) verwenden, um diese Situation zu steuern.
Die Attribute von overflow-x und overflow-y waren ursprünglich IE-Browsing Die vom Browser allein entwickelten Eigenschaften wurden später von CSS3 übernommen und standardisiert. Überlauf-x wird hauptsächlich zum Definieren der Scherung des horizontalen Inhaltsüberlaufs verwendet, während Überlauf-y hauptsächlich zum Definieren der Scherung des vertikalen Inhaltsüberlaufs verwendet wird
BFC kann ausgelöst werden, wenn der Überlauf auf „Automatisch“ oder „Scrollen“ oder „Ausgeblendet“ eingestellt ist, sodass der Überlauf einige verwandte Anwendungen implementieren kann
[Warum Bildlaufleisten angezeigt werden]
Bildlaufleisten und Überlauf sind eng miteinander verbunden . Nur wenn der Wert des übergeordneten Überlaufs „Auto“ oder „Scroll“ ist und der Inhalt des Elements den Elementbereich überschreitet, wird möglicherweise die Bildlaufleiste
angezeigt Egal. In jedem Browser stammt die Standard-Bildlaufleiste von , nicht von . Da das Element standardmäßig einen Rand von 8 Pixeln hat. Wenn die Bildlaufleiste vom -Element stammt, sollte zwischen der Bildlaufleiste und der Seite eine Lücke bestehen. Tatsächlich gibt es keine Lücke, die Bildlaufleiste stammt also vom -Element >
chrome/firefox/ Die Standardbreite der Bildlaufleiste des IE-Browsers beträgt 17 Pixel und die des Safari-Browsers 21 Pixel Warum Flex CSS3 einführt ein neues Layout-Modell-Flex-Layout. Flex ist die Abkürzung für flexible Box und wird allgemein als flexibles Boxmodell bezeichnet. Das flexible Layout bietet eine effizientere Möglichkeit, Elemente innerhalb eines Containers anzuordnen, um sie an verschiedene Arten von Anzeigegeräten und Bildschirmen unterschiedlicher Größe anzupassen.
Das obige ist der detaillierte Inhalt vonWarum wird CSS häufig verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
