Ausführliche Erklärung zur Verwendung von Listenstil und Inline in CSS

In der Vergangenheit wurde nur list-style:none; verwendet. Diese Methode entfernt einfach CSS: list-style und eine detaillierte Erklärung der Inline-Verwendung Wer Interesse hat, sollte es sich nicht entgehen lassen Normalerweise konzentriere ich mich nur auf das Schreiben von Programmen wie p oder span oder ul li und stoße oft auf ein unerklärliches Problem: top: -10px oder float:left. Natürlich kann das Problem gelöst werden. Das Ergebnis ist das Gleiche, wie wenn man ein Schiff nach New York nimmt und ein Flugzeug nach New York nimmt. Im Vergleich dazu ist das Fliegen schneller und bequemer >

display:inline; 
list-style:none outside none; 
white-space
:nowrap

Schauen wir uns zunächst die Verwendung von list-style an:

Früher habe ich nur list-style:none verwendet; Auf diese Weise dachte ich, dass es die einzige Methode wäre, das Tag vor li zu entfernen.
Tatsächlich kann der Listenstil in drei Attribute unterteilt werden:
Listenstiltyp list -style-position list-style-image

Schauen Sie sich an, was w3c sagt:

Definition und Verwendung
Kurzschrifteigenschaft im Listenstil legt alle Listeneigenschaften in einer Deklaration fest.

Beschreibung

Dieses Attribut ist ein Kurzattribut, das alle anderen Listenstilattribute abdeckt. Da es für alle Elemente mit der Anzeige list-item gilt, kann es nur für li-Elemente in normalem HTML und XHTML verwendet werden. Tatsächlich kann es jedoch auf jedes Element angewendet werden und wird von list-item-Elementen geerbt.

kann die folgenden Attribute der Reihe nach festlegen:

list-style-type

list-style-position

list-style-image

Sie können keinen der Werte festlegen, z. B. „list-style:circle inside;“ ist ebenfalls zulässig. Nicht festgelegte Eigenschaften verwenden ihre Standardwerte.

Disc außerhalb noneyesCSS1object.style.listStyle="decimal inside"


Beispiel
Legen Sie das Bild als Listenelement-Markup in der Liste fest:

ul { list-style:square inside url('/i/arrow.gif'); }

Browser-Unterstützung

Alle Browser unterstützen das List-Style-Attribut.

Hinweis: Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.


CSS list-style-type-Attribut

Definition und Verwendung
list-style-type-Attribut legt den Typ des Listenelement-Markups fest.
discyesCSS1object.style.listStyleType="square" Instanz

Verschiedene Listenstile festlegen:

ul.circle {list-style-type:circle;} 
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;} 
ol.lower-alpha {list-style-type:lower-alpha;}

Browserunterstützung

Alle Browser unterstützen den Listenstil -type-Attribut.

Hinweis: Jede Version von Internet Explorer (einschließlich IE8) unterstützt nicht die Attributwerte „decimal-leading-zero“, „lower-greek“, „lower-latin“, „upper- lateinisch“, „armenisch“, „georgisch“ oder „erben“.
Mögliche Werte CSS2-Werte: keine Kein Markup. Disc-Standard. Markierungen sind gefüllte Kreise. Die Kreismarkierung ist ein Hohlkreis. Die Quadratmarkierung ist ein durchgezogenes Quadrat. Dezimalzeichen sind Zahlen. Dezimal-führende Null0 Startnummernmarkierung. (01, 02, 03 usw.) römische Kleinbuchstaben in Kleinbuchstaben (i, ii, iii, iv, v usw.) römische Großbuchstaben in Großbuchstaben (I, II, III, IV, V usw.) Lower-AlphaDer Marker ist Lower-Alpha (a, b, c, d, e usw.)Upper-AlphaDer Marker ist Upper-Alpha (A, B, C, D, E usw.) ) Kleingriechisch Kleinbuchstaben Griechisch Buchstaben (Alpha, Beta, Gamma usw.) kleinlateinische lateinische Kleinbuchstaben (a, b, c, d, e usw.) großlateinische lateinische Großbuchstaben (A, B, C, D, E usw.) ) hebräisch traditionelle hebräische Nummerierung armenisch traditionelle armenische Nummerierung georgan traditionelle georgische Nummerierung (an, ban, gan usw.) cjk-ideographisch einfache ideographische Zahl Hiragana-Zeichen ist: a, i, u, e, o, ka, ki usw. (Japanisches Katakana) Katakana-Zeichen sind: A, I, U, E, O, KA, KI usw. (Japanisches Katakana) Hiragana-Iroha-Zeichen sind: i, ro, ha, ni, ho, he, to usw. (Japanisches Katakana) Katakana-Iroha-Marker sind: I, RO, HA, NI, HO, HE, TO usw. (Japanische Katakana) |. Kreis-Dezimalzahl |


CSS-List-Style-Position-Eigenschaft
Definition und Verwendung

List-Style-Position-Eigenschaft legt fest, wo das Listenelement-Markup platziert werden soll.
Beschreibung

Dieses Attribut wird verwendet, um die Position der Listenmarkierung relativ zum Inhalt des Listenelements anzugeben. Die Außenflagge wird in einem bestimmten Abstand vom Rand des Listenelements platziert, dieser Abstand ist jedoch in CSS nicht definiert. Inside-Flags werden so behandelt, als wären sie Inline-Elemente, die am Anfang des Inhalts des Listenelements eingefügt werden.
outsideyesCSS1object.style.listStylePosition="inside" Instanz

Gibt die Position der Listenelementmarkierung in der Liste an:

ul { list-style-position:inside; }

浏览器支持

所有浏览器都支持 list-style-position 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值 inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定应该从父元素继承 list-style-position 属性的值。

CSS list-style-image 属性

定义和用法

list-style-image 属性使用图像来替换列表项的标记。
说明

这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。

注释：请始终规定一个 "list-style-type" 属性以防图像不可用。
noneyesCSS1object.style.listStyleImage="url('/images/blueball.gif')"实例

把图像设置为列表中的项目标记：

ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; }

浏览器支持

所有浏览器都支持 list-style-image 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值 URL图像的路径。none默认。无图形被显示。inherit规定应该从父元素继承 list-style-image 属性的值。

二. inline 的说明 :

display:block就是将元素显示为块级元素.

block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185和25edfb22a4f469ecb59f1190150159c6是块元素的例子。

display:inline就是将元素显示为行内元素.

inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b, 8e99a69fbe029cd4e2b854e244eab143和907fae80ddef53131f3292ee4f81644b是inline元素的例子。

inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

IE下块元素如何实现display:inline-block的效果？

有两种方法：

1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

p {display:inline-block;...} 
p {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

p {display:inline; zoom:1;}

CSS white-space 属性

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

normalyesCSS1object.style.whiteSpace="pre"实例

规定段落中的文本不进行换行：

p { white-space: nowrap }

浏览器支持

所有浏览器都支持 white-space 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值 normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 e03b848252eb9375d56be284e690e873 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 0c6dc11e160d3b678d68754cc175188a 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Listenstil und Inline in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!