Heim >Web-Frontend >CSS-Tutorial >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:
Wenn Sie nur die PC-Seite bearbeiten, ist ein statisches Layout (feste Breite) die beste Wahl.
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.
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 inein Rand/Rand/Abstand festgelegt wird oder in
2. Warum erscheinen Aufzählungszeichen im Listenelementelement? width:auto;
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: Formatieren Sie das Breiten-/Höhenfeld 3. Hinweise zur Breite Der Breitenwert Der Wirkungsbereich bezieht sich auf den 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 4. max-/min - Breite/Höhe Eigenschaften: 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 >
width:auto;Box auf Blockebene
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. width:100%; wirken sich auf die „Liquidität“ der Box aus,
Inhaltsbereich: Der Hintergrundfarbbereich des ausgewählten Textes wird als Inhaltsbereich verwendet Geisterleerknoten:
<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }
此刻，图片展示宽度为256px
.container {
min-width: 1400px;
max-width: 1200px;
}
此刻，container展示为至少1400px
Empfohlene verwandte Artikel:
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!