Heim > Artikel > Web-Frontend > Zusammenfassung wichtiger und schwieriger Wissenspunkte in HTML und CSS

Zusammenfassung wichtiger und schwieriger Wissenspunkte in HTML und CSS

小云云Original: 2018-03-02 10:33:171834Durchsuche

Dieser Artikel gibt Ihnen hauptsächlich eine Zusammenfassung der wichtigen und schwierigen Wissenspunkte von HTML und CSS und hofft, allen zu helfen.

Wie zentriere ich ein P mit variabler Breite und Höhe vertikal und horizontal?
Verwenden Sie Flex

Sie müssen nur Folgendes einstellen: Anzeige in die übergeordnete Box: flex; justify-content: center;align-items: center;

CSS3-Transformation verwenden

Einstellungen der übergeordneten Box: position:relative
p-Einstellungen: transform: Translate( -50% , -50%);Position: absolut;oben: 50%;links: 50%;

Verwenden Sie die display:table-cell-Methode

Einstellungen der übergeordneten Box: display:table -cell; text -align:center;vertikal-align:middle;
p Einstellungen: display:inline-block;vertical-align:middle;

2 Vier gemeinsame Positionen Attributwerte: relativ, absolut, fest, statisch. Wird im Allgemeinen in Verbindung mit den Attributen „links“, „oben“, „rechts“ und „unten“ verwendet.

relativ: relative Positionierung. Die relative Positionierung erfolgt relativ zur Standardposition des Elements. Die Versatzwerte oben, rechts, unten und links basieren alle auf der ursprünglichen Position, unabhängig davon, was mit anderen Elementen geschieht. Beachten Sie, dass das relativ verschobene Element immer noch Platz an seiner ursprünglichen Position einnimmt.
absolut: absolute Positionierung. Wenn für ein Element, das auf „absolut“ gesetzt ist, das Positionsattribut des übergeordneten Containers festgelegt ist und der Wert des Positionsattributs absolut oder relativ ist, erfolgt ein Offset entsprechend dem übergeordneten Container. Wenn der übergeordnete Container die Positionseigenschaft nicht festlegt, basiert der Offset auf dem Körper. Beachten Sie, dass Elemente mit dem absoluten Attributsatz keine Position im Standardfluss belegen.
fixed: Feste Positionierung. Elemente, deren Position auf „Fest“ eingestellt ist, können an angegebenen Koordinaten relativ zum Browserfenster positioniert werden. Das Element bleibt an dieser Position, unabhängig davon, ob das Fenster gescrollt wird oder nicht. Es basiert immer auf dem Körper. Beachten Sie, dass Elemente mit dem festen Attributsatz keine Position im Standardfluss belegen.

Floating und Clearing Float
3.1 Floating-bezogenes Wissen
Wert des Float-Attributs:

left: Element schwebt nach links .

rechts: Das Element schwebt nach rechts.
keine: Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.

Eigenschaften von Floating:

Floating-Elemente werden vom normalen Dokumentenfluss getrennt, aber Floating-Elemente wirken sich nicht nur auf sich selbst aus, sondern auch auf die Ausrichtung umgebender Elemente.

Unabhängig davon, ob es sich bei einem Element um ein Inline-Element oder ein Element auf Blockebene handelt, generiert das schwebende Element eine Box auf Blockebene, und seine Breite und Höhe können festgelegt werden Wird häufig zum Erstellen horizontal angeordneter Menüs verwendet. Legen Sie die Größe fest und richten Sie sie horizontal aus.

Für die Anzeige von schwebenden Elementen gelten unter verschiedenen Umständen unterschiedliche Regeln:

Wenn eines der beiden Elemente nach links und das andere nach rechts schwebt, grenzt das marginRight des linken schwebenden Elements nicht an das marginLeft vom rechten schwebenden Element.
Wenn mehrere schwebende Elemente vorhanden sind, werden die schwebenden Elemente der Reihe nach ohne Überlappung angeordnet.
Wenn mehrere schwebende Elemente vorhanden sind, überschreitet die Höhe des folgenden Elements nicht die Höhe des vorherigen Elements und überschreitet nicht die Höhe des enthaltenden Blocks.
Wenn nicht schwebende Elemente und schwebende Elemente gleichzeitig vorhanden sind und die nicht schwebenden Elemente vorne liegen, sind die schwebenden Elemente nicht höher als die nicht schwebenden Elemente.
Die schwebenden Elemente werden ausgerichtet so weit wie möglich nach oben, links oder rechts

Überlappungsproblem

Wenn ein Inline-Element ein schwebendes Element überlappt, werden sein Rand, Hintergrund und Inhalt über dem schwebenden Element angezeigt

Wenn ein Element auf Blockebene ein schwebendes Element überlappt, werden der Rahmen und der Hintergrund unter dem schwebenden Element angezeigt, und der Inhalt wird über dem schwebenden Element angezeigt.

clear-Attribut

clear-Attribut: Stellen Sie sicher, dass sich auf der linken und rechten Seite des aktuellen Elements keine schwebenden Elemente befinden. clear wirkt sich nur auf das Layout des Elements selbst aus.
Werte: links, rechts, beide
3.2 Das Problem des Höheneinbruchs des übergeordneten Elements
Warum sollten wir den Float und den Höheneinbruch des übergeordneten Elements löschen
Lösen Sie das Problem des Höheneinbruchs des übergeordneten Elements: Wenn a Das Element auf Blockebene legt die Höhe nicht fest, deren Höhe durch untergeordnete Elemente erweitert wird. Nach der Verwendung von Float für das untergeordnete Element bricht das untergeordnete Element vom Standarddokumentfluss ab. Das heißt, es gibt keinen Inhalt im übergeordneten Element, sodass die Höhe des übergeordneten Elements ignoriert wird ist der sogenannte Höhenkollaps.
3.3 Methode zum Löschen von Floats
Methode 1: Höhe für übergeordnetes p definieren
Prinzip: Durch Definieren einer festen Höhe (Höhe) für übergeordnetes p kann das Problem gelöst werden, dass übergeordnetes p die Höhe nicht ermitteln kann.
Vorteile: Der Code ist prägnant.
Nachteile: Die Höhe ist fest, sodass er für Module mit festem Inhalt geeignet ist. (Nicht empfohlen)
Methode 2: Verwenden Sie leere Elemente, z. B.

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顾 IE6，IE7 就可以了

4.BFC 相关知识
定义：BFC(Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC 布局规则
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC 这个元素的垂直方向的边距会发生重叠，垂直方向的距离由 margin 决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible

5.box-sizing 是什么
设置 CSS 盒模型为标准模型或 IE 模型。标准模型的宽度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border 和 padding 不计算入 width 之内
padding-box，padding 计算入宽度内
border-box，border 和 padding 计算入宽度之内

6.px，em，rem 的区别
px 像素 (Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位 (root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的区别是?
有四种：内联 (元素上的 style 属性)、内嵌 (style 标签)、外链 (link)、导入 (@import)
link 和 @import 的区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

Da die reaktionsfähige Entwicklung umständlicher ist, wird im Allgemeinen ein reaktionsfähiges Framework eines Drittanbieters wie Bootstrap verwendet, um einen Teil der Arbeit abzuschließen. Natürlich können Sie die reaktionsfähige Entwicklung auch selbst schreiben.
Unterschied

-
Flusslayout
Responsive Entwicklung

Entwicklungsmethode
Mobile Web-Entwicklung + PC-Entwicklung
Responsive Entwicklung

Anwendung Szenarien
Wenn bereits eine PC-Website vorhanden ist und eine mobile Version entwickelt wird, müssen Sie im Allgemeinen nur die mobile Version separat entwickeln.
Bei einigen neuen Websites ist jetzt eine Anpassung an die mobile Version erforderlich Satz von Seiten ist mit verschiedenen Terminals kompatibel

Entwicklung
Starke Ausrichtung, hohe Entwicklungseffizienz
Kompatibel mit verschiedenen Terminals, geringe Effizienz

Anpassung
Nur an mobile Geräte angepasst, Die Erfahrung auf dem Pad ist relativ schlecht
Kann an verschiedene Terminals angepasst werden

Effizienz
Einfacher Code, schnelles Laden
Relativ komplexer Code, langsames Laden

Progressive Verbesserung und Graceful Degradation
Der Hauptunterschied besteht darin, worauf sie sich konzentrieren, und der durch diesen Unterschied verursachte Unterschied im Arbeitsablauf

Graceful Degradation baut die vollständige Funktionalität am Anfang auf und zielt dann auf Browser mit niedrigeren Versionen ab, die kompatibel sind. .
Progressive Erweiterung erstellt Seiten für Browser mit niedriger Version, um die grundlegendsten Funktionen sicherzustellen, und verbessert dann Effekte und Interaktionen und fügt zusätzliche Funktionen für fortgeschrittene Browser hinzu, um ein besseres Benutzererlebnis zu erreichen.

Unterschied:

Graceful Degradation geht von einem komplizierten Status Quo aus und versucht, das Angebot an Benutzererfahrung zu reduzieren.
Progressive Verbesserung geht von einer sehr einfachen, funktionierenden Version aus und wird weiter ausgebaut den Anforderungen der zukünftigen Umgebung gerecht werden
Downgrade (funktionale Abschwächung) bedeutet, zurückzublicken, während progressive Verbesserung bedeutet, nach vorne zu blicken und gleichzeitig sicherzustellen, dass sich das Fundament in einer sicheren Zone befindet

10.CSS Mehrere Möglichkeiten und Unterschiede des Versteckens Elemente
display:none

Das Element verschwindet vollständig auf der Seite und der ursprünglich vom Element belegte Platz wird durch andere Elemente belegt, was bedeutet, dass der Browser die Zeile neu lädt und neu zeichnet .
Das Klickereignis wird nicht ausgelöst

visibility:hidden

Der Unterschied zwischen display:none besteht darin, dass nach dem Verschwinden des Elements von der Seite der von ihm belegte Platz weiterhin erhalten bleibt. Es führt also nur dazu, dass der Browser neu gezeichnet wird, ohne dass ein Reflow erfolgt.
Kann sein Klickereignis nicht auslösen
Gilt für Szenarien, in denen Sie nicht möchten, dass sich das Seitenlayout ändert, nachdem das Element ausgeblendet wird

Opazität:0

Nach dem Festlegen der Transparenz des Element auf 0. In den Augen unserer Benutzer werden Elemente auch ausgeblendet. Eine Sache, die
und Visibility:hidden gemeinsam haben, ist, dass das Element nach dem Ausblenden immer noch Platz einnimmt. Wir alle wissen jedoch, dass das Element nach dem Setzen der Transparenz auf 0 einfach unsichtbar ist und immer noch auf der Seite vorhanden ist.
Klickereignisse können ausgelöst werden

Setzen Sie die Eigenschaften des Boxmodells wie Höhe und Breite auf 0

Einfach ausgedrückt: Der Rand, der Rahmen, der Abstand, die Höhe und die Breite des Elements wirken sich auf das aus Element-Box-Modell. Das Attribut ist auf 0 gesetzt. Wenn das Element Unterelemente oder Inhalte enthält, sollte es auch so eingestellt werden, dass die Unterelemente ausgeblendet werden.
Wenn für das Element Rahmen, Abstand und andere Attribute auf ungleich 0 gesetzt sind, ist es offensichtlich, dass das Element immer noch auf der Seite sichtbar ist und es kein Problem beim Auslösen des Klickereignisses des Elements gibt. Wenn alle Attribute auf 0 gesetzt sind, ist es offensichtlich, dass das Element verschwindet, d. h. das Klickereignis kann nicht ausgelöst werden.
Diese Methode ist nicht praktikabel und kann einige Probleme verursachen. Einige Seiteneffekte, die wir normalerweise verwenden, können jedoch auf diese Weise vervollständigt werden, z. B. die slideUp-Animation von jquery, die den Overflow:hidden des Elements festlegt und dann über einen Timer kontinuierlich die Höhe, den Rand unten und den Rand des Elements festlegt , border-bottom, padding-top, padding-bottom sind 0, wodurch der slideUp-Effekt erzielt wird.

Andere kreative Methoden

Legen Sie die Position des Elements fest (links, oben, unten, rechts usw.) und verschieben Sie das Element aus dem Bildschirm.
Legen Sie die Position und den Z-Index des Elements fest , change z -index wird auf eine möglichst kleine negative Zahl eingestellt

Beschreiben Sie kurz den Unterschied zwischen src und href
href zeigt auf den Standort der Netzwerkressource, der Einrichtung und das aktuelle Element (Anker) oder das aktuelle Dokument. Ein Link zwischen (Links), der für Hyperlinks verwendet wird.
src bezieht sich auf den Speicherort externer Ressourcen, und der Inhalt, auf den verwiesen wird, wird in den Speicherort des aktuellen Tags im Dokument eingebettet. Beim Anfordern der src-Ressource wird die Ressource, auf die er verweist, heruntergeladen und auf das Dokument angewendet , wie z. B. JS-Skripte, IMG-Bilder und Frames und andere Elemente. Wenn der Browser dieses Element analysiert, unterbricht er das Herunterladen und Verarbeiten anderer Ressourcen, bis die Ressource geladen, kompiliert und ausgeführt wird. Dasselbe gilt für Elemente wie Bilder und Frames, was dem Einbetten der verwiesenen Ressource ähnelt aktuelles Tag. Aus diesem Grund wird das js-Skript auch unten und nicht im Kopf platziert.
Was sind die Inline-Elemente? Was sind Elemente auf Blockebene? Was sind die Leereelemente?
Diese Frage wird gelegentlich in Interviews gestellt und ich bin etwas verwirrt~~~ Normalerweise schenke ich ihr keine Beachtung. . . .
Inline-Elemente: a, b, span, img, input, strong, select, label, em, button, textarea
Elemente auf Blockebene: p, ul, li, dl, dt, dd, p, h1 - h6, Blockquote
Leeres Element: Es ist ein HTML-Element ohne Inhalt, wie zum Beispiel: br, meta, hr, link, input, img

Wie zentriere ich ein P mit variabler Breite und Höhe vertikal und horizontal?
Verwenden Sie Flex

Nur in der übergeordneten Box Einstellungen: display: flex; justify-content: center;align-items: center;

CSS3-Transformation verwenden

Parent-Box-Einstellungen: position:relative
p Einstellungen: transform: Translate( -50%, -50%);Position: absolut;oben: 50%;links: 50%;

Verwenden Sie die display:table-cell-Methode

Einstellungen der übergeordneten Box: display:table - cell; text-align:center;vertikal-align:middle;
p-Einstellungen: display:inline-block;vertical-align:middle;

2.position Die Rolle mehrerer Attribute
Position Vier gemeinsame Attributwerte: relativ, absolut, fest, statisch. Wird im Allgemeinen in Verbindung mit den Attributen „links“, „oben“, „rechts“ und „unten“ verwendet.

statisch: Standardspeicherort. Unter normalen Umständen müssen wir es nicht speziell deklarieren. Wenn wir jedoch auf Vererbung stoßen, möchten wir nicht, dass sich die vom Element geerbten Attribute auf sich selbst auswirken. Daher können wir Position: static verwenden, um die Vererbung abzubrechen , um den Standardwert des Elements wiederherzustellen. Ein auf „statisch“ gesetztes Element befindet sich immer an der durch den Seitenfluss angegebenen Position (statische Elemente ignorieren alle Top-, Bottom-, Left- oder Right-Deklarationen). Im Allgemeinen nicht häufig verwendet.
relativ: relative Positionierung. Die relative Positionierung erfolgt relativ zur Standardposition des Elements. Die Versatzwerte oben, rechts, unten und links basieren alle auf der ursprünglichen Position, unabhängig davon, was mit anderen Elementen geschieht. Beachten Sie, dass das relativ verschobene Element immer noch Platz an seiner ursprünglichen Position einnimmt.
absolut: absolute Positionierung. Wenn für ein Element, das auf „absolut“ gesetzt ist, das Positionsattribut des übergeordneten Containers festgelegt ist und der Wert des Positionsattributs absolut oder relativ ist, erfolgt ein Offset entsprechend dem übergeordneten Container. Wenn der übergeordnete Container die Positionseigenschaft nicht festlegt, basiert der Offset auf dem Körper. Beachten Sie, dass Elemente mit dem absoluten Attributsatz keine Position im Standardfluss belegen.
fixed: Feste Positionierung. Elemente, deren Position auf „Fest“ eingestellt ist, können an angegebenen Koordinaten relativ zum Browserfenster positioniert werden. Das Element bleibt an dieser Position, unabhängig davon, ob das Fenster gescrollt wird oder nicht. Es basiert immer auf dem Körper. Beachten Sie, dass Elemente mit dem festen Attributsatz keine Position im Standardfluss belegen.

Floating und Clearing Float
3.1 Floating-bezogenes Wissen
Wert des Float-Attributs:

left: Element schwebt nach links .
rechts: Das Element schwebt nach rechts.
keine: Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.

Eigenschaften von Floating:

Floating-Elemente werden vom normalen Dokumentenfluss getrennt, aber Floating-Elemente wirken sich nicht nur auf sich selbst aus, sondern auch auf die Ausrichtung umgebender Elemente.
Unabhängig davon, ob es sich bei einem Element um ein Inline-Element oder ein Element auf Blockebene handelt, generiert das schwebende Element eine Box auf Blockebene, und seine Breite und Höhe können festgelegt werden Wird häufig zum Erstellen horizontal angeordneter Menüs verwendet. Legen Sie die Größe fest und richten Sie sie horizontal aus.

Für die Anzeige von schwebenden Elementen gelten unter verschiedenen Umständen unterschiedliche Regeln:

Wenn ein schwebendes Element schwebend ist, überschreitet sein Rand nicht den Abstand des enthaltenden Blocks. PS: Wenn Sie möchten, dass das Element überschritten wird, können Sie das Margin-Attribut festlegen.
Wenn eines der beiden Elemente nach links und das andere nach rechts schwebt, grenzt das marginRight des linken schwebenden Elements nicht an das marginLeft vom rechten schwebenden Element.
Wenn mehrere schwebende Elemente vorhanden sind, werden die schwebenden Elemente der Reihe nach ohne Überlappung angeordnet.
Wenn mehrere schwebende Elemente vorhanden sind, überschreitet die Höhe des folgenden Elements nicht die Höhe des vorherigen Elements und überschreitet nicht die Höhe des enthaltenden Blocks.
Wenn nicht schwebende Elemente und schwebende Elemente gleichzeitig vorhanden sind und die nicht schwebenden Elemente vorne liegen, sind die schwebenden Elemente nicht höher als die nicht schwebenden Elemente.
Die schwebenden Elemente werden ausgerichtet so weit wie möglich nach oben, links oder rechts

Überlappungsproblem

Wenn ein Inline-Element ein schwebendes Element überlappt, werden sein Rand, Hintergrund und Inhalt über dem schwebenden Element angezeigt
Wenn ein Element auf Blockebene ein schwebendes Element überlappt, werden der Rahmen und der Hintergrund unter dem schwebenden Element angezeigt, und der Inhalt wird über dem schwebenden Element angezeigt.

clear-Attribut
clear-Attribut: Stellen Sie sicher, dass sich auf der linken und rechten Seite des aktuellen Elements keine schwebenden Elemente befinden. clear wirkt sich nur auf das Layout des Elements selbst aus.
Werte: links, rechts, beide
3.2 Das Problem des Höheneinbruchs des übergeordneten Elements
Warum sollten wir den Float und den Höheneinbruch des übergeordneten Elements löschen
Lösen Sie das Problem des Höheneinbruchs des übergeordneten Elements: Wenn a Das Element auf Blockebene legt die Höhe nicht fest, deren Höhe durch untergeordnete Elemente erweitert wird. Nach der Verwendung von Float für das untergeordnete Element bricht das untergeordnete Element vom Standarddokumentfluss ab. Das heißt, es gibt keinen Inhalt im übergeordneten Element, sodass die Höhe des übergeordneten Elements ignoriert wird ist der sogenannte Höhenkollaps.
3.3 Methode zum Löschen von Floats
Methode 1: Höhe für übergeordnetes p definieren
Prinzip: Durch Definieren einer festen Höhe (Höhe) für übergeordnetes p kann das Problem gelöst werden, dass übergeordnetes p die Höhe nicht ermitteln kann.
Vorteile: Der Code ist prägnant.
Nachteile: Die Höhe ist fest, sodass er für Module mit festem Inhalt geeignet ist. (Nicht empfohlen)
Methode 2: Verwenden Sie leere Elemente wie

(.clear{clear:both})
Prinzip: Fügen Sie ein Paar leerer p-Tags hinzu und verwenden Sie das Attribut „clear:both“ von CSS, um den Float zu löschen, damit das übergeordnete p die Höhe erhalten kann.
Vorteile: Gute Browserunterstützung
Nachteile: Es gibt viele leere p-Tags. Wenn die Seite viele schwebende Module enthält, gibt es viele leere p-Tags, was nicht sehr zufriedenstellend erscheint. (Nicht empfohlen)
Methode 3: Lassen Sie das übergeordnete p auch floaten
Dies kann zunächst das aktuelle Floating-Problem lösen. Es führt jedoch auch dazu, dass das übergeordnete Element schwebt, was zu neuen Schwebeproblemen führt. Nicht empfohlen
Methode 4: Übergeordnetes p definiert display:table
Prinzip: Erzwinge das p-Attribut in einer Tabelle
Vorteile: Rätselhaft
Nachteile: Es entstehen neue unbekannte Probleme. (Nicht empfohlen)
Methode 5: Überlauf der übergeordneten Elementeinstellungen: versteckt, automatisch;
Prinzip: Der Schlüssel zu dieser Methode besteht darin, BFC auszulösen. In IE6 muss auch hasLayout (Zoom: 1) ausgelöst werden
Vorteile: Codeeinführung, keine strukturellen und semantischen Probleme
Nachteile: Elemente, die überlaufen müssen, können nicht angezeigt werden (nicht empfohlen)
Methode 6: Parent p definiert Pseudoklassen: after und zoom
content:'.';display:block
clear:both; >Sichtbarkeit: versteckt;
}
.clearfix {zoom:1;}
Prinzip: IE8 oder höher und Nicht-IE-Browser unterstützen nur: Danach ähnelt das Prinzip etwas der Methode 2, Zoom (IE Die Übertragung hat Eigenschaften) kann das Floating-Problem von ie6 und ie7 lösen
Vorteile: Die Struktur und Semantik sind völlig korrekt, die Codemenge ist moderat und sie ist wiederverwendbar (es wird empfohlen, eine öffentliche Klasse zu definieren)
Nachteile: Der Code ist nicht sehr prägnant (sehr zu empfehlen). 🎜>clear:both;
}
.clearfix {*zoom:1;} Achten Sie nur auf IE6 und IE7

Detaillierte Informationen zum Floating finden Sie in diesem Artikel:
http://luopq.com/2015/11 /08/CSS-float/

4. BFC-bezogenes Wissen
Definition: BFC (Blockformatierungskontext) bedeutet wörtlich „Formatierungskontext auf Blockebene“ . Es handelt sich um einen unabhängigen Rendering-Bereich, an dem nur Boxen auf Blockebene beteiligt sind. Er gibt an, wie die internen Boxen auf Blockebene angeordnet sind, und hat nichts mit der Außenseite dieses Bereichs zu tun.
BFC-Layoutregeln
BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente im Container haben keinen Einfluss auf die Elemente außerhalb. Und umgekehrt.

BFC Die vertikalen Ränder dieses Elements überlappen sich. Der vertikale Abstand wird durch den Rand bestimmt und der Maximalwert wird verwendet.

Der Bereich des BFC überlappt sich nicht mit dem schwebenden Feld Floating-Prinzip).

Bei der Berechnung der BFC-Höhe sind auch schwebende Elemente an der Berechnung beteiligt.

Welche Elemente generieren BFC?

Wurzelelement
Float-Attribut ist nicht keines
Position ist absolut oder fest

Anzeige ist Inline-Block, Tabellenzelle, Tabellen- caption, flex, inline-flex

Überlauf ist nicht sichtbar

5. Was ist Box-Sizing?

Setzt das CSS-Box-Modell auf das Standardmodell oder IE-Modell. Die Breite des Standardmodells umfasst nur den Inhalt, und das zweite IE-Modell umfasst Rahmen und Auffüllung. Das Attribut

box-sizing kann einer von drei Werten sein:

content-box, nur der Standardwert Berechnet die Breite des Inhalts, Rand und Innenabstand werden nicht in die Breite eingerechnet
padding-box, Innenabstand wird in die Breite eingerechnet
border-box, Rand und Innenabstand werden in die Breite eingerechnet

6. Der Unterschied zwischen px, em, rem

px Pixel (Pixel). Absolute Einheit. Pixel px ist relativ zur Bildschirmauflösung. Es handelt sich um eine virtuelle Längeneinheit und die digitale Bildlängeneinheit des Computersystems. Wenn px in physische Länge umgewandelt werden soll, muss die Genauigkeit DPI angegeben werden.

em ist eine relative Längeneinheit, relativ zur Schriftgröße des Textes im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. Es erbt die Schriftgröße des übergeordneten Elements, es handelt sich also nicht um einen festen Wert.
rem ist eine neue relative Einheit (root em) in CSS3. Wenn Sie rem zum Festlegen der Schriftgröße für ein Element verwenden, handelt es sich immer noch um eine relative Größe, jedoch nur relativ zum HTML-Stammelement.
7. Welche Möglichkeiten gibt es, CSS einzuführen? Was ist der Unterschied zwischen Link und @import? ), Import (@import) Der Unterschied zwischen

link und @import:

link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann es auch andere Transaktionen wie RSS definieren der CSS-Kategorie und kann nur CSS laden.
Wenn der Link auf CSS verweist, wird er gleichzeitig mit dem Laden der Seite geladen; @import erfordert, dass die Seite vor dem Laden vollständig geladen wird.

Link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf. @import wurde in CSS2.1 vorgeschlagen und wird von Browsern niedrigerer Versionen nicht unterstützt.

Link unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。