Eine Einführung in flüssiges Layout, Elemente und Abmessungen in CSS

Dieser Artikel bietet Ihnen eine Einführung in flüssiges Layout, Elemente und Größen in CSS. Ich hoffe, dass er für Freunde hilfreich ist.

1. Mehrere durch Fluid Layout eingeführte Webseiten-Layoutmethoden

布局方式	描述	特点	场景
静态布局	Static Layout，传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。一般需要设置最小宽度	不能根据用户的屏幕尺寸做出不同的表现	传统PC网页
流式布局	Liquid Layout，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）	网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用）	屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
自适应布局	Adaptive Layout，使用@media分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围	屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化	-
响应式布局	Responsive Layout，一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果	每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变	多终端页面
弹性布局	rem/em布局，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位	理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应	移动端

Fazit:

1. Wenn Sie nur die PC-Seite bearbeiten, ist ein statisches Layout (feste Breite) die beste Wahl.

2. Wenn Sie die mobile Seite verwenden und das Design nicht erforderlich ist Höhe und Elementabstand Hoch, dann ist flexibles Layout (rem+js) die beste Wahl. Ein Stück CSS + ein Stück JS, um die Schriftgröße anzupassen Ein PC muss mit Mobilgeräten kompatibel sein und die Anforderungen sind sehr hoch. Daher ist das responsive Layout immer noch die beste Wahl, vorausgesetzt, das Design ist je nach Höhe und Breite unterschiedlich gestaltet und das responsive Layout ist je nach Medium unterschiedlich gestaltet Abfragen.

3. In „CSS World“ wird das Konzept des „Fluid Layout“ vorgeschlagen:

Das sogenannte „Fluid Layout“ bezieht sich auf die Verwendung von Elementen Verschiedene Layouteffekte, die durch die „Flow“-Funktion erzielt werden. Denn „fließen“ selbst Es verfügt über adaptive Eigenschaften, daher ist „Fluid Layout“ oft adaptiv. Allerdings ist „Fluid Layout“ nicht dasselbe wie „Adaptives Layout“. „Adaptive Struktur“ ist ein allgemeiner Begriff für einen Strukturtyp mit adaptiven Eigenschaften, und „Fluidstruktur“ muss eng gefasst sein Viel schmaler. Beispielsweise kann das Tabellenlayout auch auf 100 % adaptiv eingestellt werden, aber Tabelle und „Flow“ gehören nicht zusammen und gehören nicht zum „Fluid-Layout“. Laienhaft ausgedrückt ist

eine Möglichkeit, das Layout von Inhalten zu beeinflussen, indem in

ein Rand/Rand/Abstand festgelegt wird oder in

2. Warum erscheinen Aufzählungszeichen im Listenelementelement? width:auto;

Jedes Element hat zwei Boxen, eine äußere Box und eine innere Box (Containerbox). Die äußere Box ist dafür verantwortlich, ob das Element in einer Zeile oder nur in einer neuen Zeile angezeigt werden kann; die innere Box ist für die Breite, Höhe, Inhaltsdarstellung usw. verantwortlich.

Entsprechend hat die äußere Box Außenmaße und die innere Box hat Innenmaße. Die äußere Größenbox verhält sich so, als würde sie „den verfügbaren Raum voll ausnutzen“ und hat die Eigenschaften eines „Flusses“

Die sogenannte Fluidität ist nicht so einfach wie die scheinbare Breite von 100 % Anzeige, sondern eine Art von Rand/Rahmen/Abstand und der Mechanismus zur automatischen Zuweisung von horizontalem Platz im Inhaltsbereich

So erstellen Sie eine Fluid-Box:

1. width:auto;Box auf Blockebene

2. Formatieren Sie das Breiten-/Höhenfeld

3. Hinweise zur Breite

1. Der Breitenwert Der Wirkungsbereich bezieht sich auf den box-sizing der aktuellen Box. Der Standardwert box-sizing: content-box; entspricht der Breite des Boxinhalts Rand hinzugefügt. box-sizing: border-box;, der Breitenwert entspricht dem Feld border*2+padding*2+content, die Belegung bleibt unverändert und der Inhaltsbereich ändert sich.

2. Die Berechnung des Breiten- und Höhenprozentsatzes absolut positionierter Elemente erfolgt relativ zum Füllfeld, was bedeutet, dass der Füllgrößenwert in die Berechnung einbezogen wird, jedoch nicht absolut Die nach Box berechneten Einstellungen von

3. width:100%; wirken sich auf die „Liquidität“ der Box aus,

4. max-/min - Breite/Höhe

Eigenschaften:

1. Beyond !important; Beyond !important bedeutet, dass die maximale Breite erreicht wird Überschreiben Sie die Breite, auch wenn sie zur Breite hinzugefügt wird! Konflikt zwischen minimaler und maximaler Breite >

Inhaltsbereich: Der Hintergrundfarbbereich des ausgewählten Textes wird als Inhaltsbereich verwendet

1. Inline-Box: reiner Text – anonym inline box; diejenigen, die von Inline-Elementen umschlossen sind, gehören zur Inline-Box Boxen"

Umfassende Box: besteht aus Zeilenboxboxen

Geisterleerknoten:

1. „Ghost Blank Node“ ist ein sehr wichtiges Konzept im Inline-Box-Modell, das sich insbesondere auf die Deklaration im HTML5-Dokument bezieht , verhält sich das gesamte Parsen und Rendern von Inline-Elementen so, als ob vor jedem Zeilenfeld ein „leerer Knoten“ vorhanden wäre. Das Ein „leerer Knoten“ ist immer transparent, nimmt keine Breite ein, kann nicht gesehen werden und kann nicht über Skripte abgerufen werden. Er ist wie ein Geist, aber er existiert und verhält sich wie ein Textknoten. Deshalb nenne ich ihn einen „Geist“. leerer Knoten" .
2. Der einfachste Fall, um die Existenz von Ghost-Blank-Knoten zu beweisen:

   <img src="1.jpg" style="width:480px!important;">
   img { max-width: 256px; }
   
   此刻，图片展示宽度为256px

   .container {
       min-width: 1400px;
       max-width: 1200px;
   }
   此刻，container展示为至少1400px

Die Höhe ist nicht im Code festgelegt, aber die letzte Seite hat eine Höhe. Dies kann durch leere Geisterknoten erklärt werden

Empfohlene verwandte Artikel:

CSS-Boxgrößeneigenschaft (Boxmodell). ) Einführung in die Verwendung

Css3 implementiert den Effekt der beweglichen Menüschaltfläche (Menü)

Code für die Anzeige in CSS: Flex-Attribut zur Implementierung der vertikalen Zentrierung von Elemente

Das obige ist der detaillierte Inhalt vonEine Einführung in flüssiges Layout, Elemente und Abmessungen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!