recherche

Maison  >  Article  >  interface Web  >  Compréhension approfondie du style de liste en CSS

Compréhension approfondie du style de liste en CSS

黄舟
黄舟original
2017-06-29 09:25:552874parcourir

Regardez d'abord l'explication de list-style dans le manuel CSS

Définition et utilisation
L'attribut raccourci list-style définit tous les attributs de liste dans une seule instruction.

Description
Cet attribut est un attribut abrégé qui couvre tous les autres attributs de style de liste. Puisqu'il s'applique à tous les éléments avec display list-item, il ne peut être utilisé que sur les éléments li en HTML et XHTML normaux, mais en fait, il peut être appliqué à n'importe quel élément et est hérité par les éléments list-item.
Vous pouvez définir les attributs suivants dans l'ordre :
•list-style-type
•list-style-position
•list -style -image
Vous ne pouvez pas définir l'une des valeurs. Par exemple, "list-style:circle inside;" est également autorisé. Les propriétés qui ne sont pas définies utilisent leurs valeurs par défaut.
Valeur par défaut : disque extérieur aucun

Dans le travail quotidien, il est souvent nécessaire d'effectuer une réinitialisation CSS sur ul et li pour masquer les symboles de liste. La manière d'écrire la plus couramment utilisée.
est Ul, li,ol{list-style:none;}(Certaines personnes utilisent également ul,li,ol{list-style-type:none;})

Exécutez la boîte de code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>常见的用法</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
ul,li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul>
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>

Il n'y a aucun problème avec la page dans IE6, 7, 8 et FF

Mais ce que nous ne pouvons pas ignorer, c'est que list-style: contient trois attributs :

<.>list-style-type

list-style-position
list-style-img

Si vous ne faites pas attention à ces trois attributs, list-style causera parfois des problèmes

Par exemple, lorsque ul, float , lorsque display:inline est nécessaire pour résoudre le problème de double marge dans IE6, quelque chose d'étrange s'est produit :

Exécutez la boîte de code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>奇怪的事情发生了</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
</style>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>
.ul01{float:left;display :inline;}

.ul01,.ul01 li{list-style:none;}

La page ci-dessus est toujours normale dans ie8 et ff

Mais dans IE6 et 7, l'intérieur de ul est le même que li crée une distance.
On peut voir que lorsque nous définissons list-style:none, bien que le symbole de liste n'apparaisse pas, sa position est toujours laissée dans IE6 et 7.
Regardez Quels attributs cette UL dans FF a-t-elle

Compréhension approfondie du style de liste en CSS

Comme on peut le voir sur l'image, lorsque list-style:none est défini en CSS, cela n'a aucun effet sur la position du style de liste, c'est toujours le paramètre par défaut du navigateur FF est à l'extérieur

, tandis qu'IE6 et 7 sont susceptibles d'être par défaut sur la position de style de liste : à l'intérieur
Pour confirmer cela, J'ai changé list-style:none en list-style:none Je l'ai testé à nouveau dans none

Exécutez la boîte de code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>强制inside</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</style>
</head>
<body>
<div>
<p>强制inside list-style:none inside none;</p>
<ul>
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>
Après l'avoir exécuté, j'ai trouvé que dans IE6 et 7, les performances sont exactement les mêmes que celles de list-style:none.

Donc, on suppose que dans IE6 et 7, lorsque UL a les attributs float:left et display:inline, et que list-style:none est défini, list- style-position est également défini par défaut sur inside;

J'en suis donc arrivé à ceci. Le résumé est le suivant :

Sous IE6 et 7, lorsque UL n'a pas float: display: inline;:
Indépendamment de l'attribut list-style: none, les symboles de liste sont masqués et n'occupent pas d'espace (en dessous de 5,6) dans le code
Quand UL a float:left;display:inline attribut
list-style:none; , le symbole de la liste est masqué, mais la position est toujours laissée (list-style-position:inside ); (UL1, ul3 dans le code ci-dessous)
list-style:none n'est pas défini ; n'occupe pas de position (list-style-position:outside) (code UL4)

UL02 a relativement bien fonctionné dans tous les navigateurs participant au test

Le dernier morceau de code compare les performances de style de liste dans diverses circonstances, en particulier les performances de 4, 5 et 6 sous IE6 et 7.

Exécutez la boîte de code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list-style:none还是list-style:none outside none;</title>
<style type="text/css">
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
.ul02,.ul02 li{list-style:none outside none;}
.ul03,.ul03 li{list-style:none inside none;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{list-style:none;}
.ul06{}
.ul06,.ul06 li{}
</style>
</head>
<body>
<div>
<p>1:float:left;display:inline; list-style:none;</p>
<ul class="ul01">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; list-style:none outside none;</p>
<ul class="ul02">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none inside none;</p>
<ul class="ul03">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;未做css reset</p>
<ul class="ul04">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>5: 无 display,float属性 list-style为none;</p>
<ul class="ul05">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
<div>
<p>6: 无 display,float属性 无list-style:none;</p>
<ul class="ul06">
<li><a href="#">纯净的文字 奇异的梦幻 奔腾的思想</a></li>
<li><a href="#">就像对爱情一样 要求是近乎完美的</a></li>
<li><a href="#">校园里淡淡的青春 单纯的男孩女孩</a></li>
<li><a href="#">我彷徨而又彷徨 早已没有了距离之感</a></li>
<li><a href="#">凝望着她的脸 朗诵起熟悉而又陌生的诗句</a></li>
<li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li>
<li><a href="#">交错出现明暗线索和不确定的主角</a></li>
<li><a href="#">细腻而真挚的感情渐渐突显出来 身临其境</a></li>
<li><a href="#">高密度的情绪在文字中反复发酵</a></li>
</ul>
</div>
</body>
</html>
En comparant les résultats de performances du code ci-dessus , je pense :

Tant que list-style-type n'est aucun dans Firefox, quel que soit le type de liste. Que la valeur de position soit à l'extérieur ou à l'intérieur, le style de liste peut très bien être masqué
Dans IE6. et 7, il suffit de définir list-style:none pour résoudre tous les problèmes
donc je pense qu'en CSS, il est préférable d'utiliser list-style:none en dehors de none lors de la réinitialisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelle est la signification de list-style-type: none en CSS ?Article suivant：Quelle est la signification de list-style-type: none en CSS ?

Articles Liés

Voir plus