Maison >interface Web >tutoriel CSS >[CSS Notes 10] Conseils pour la configuration du style CSS
[CSS Notes 10] Conseils pour la configuration du style CSS
- 黄舟original
- 2016-12-29 14:02:291089parcourir
1. Paramètre de centrage horizontal : éléments en ligne
Dans le travail réel, nous rencontrons souvent des scénarios où le centrage horizontal doit être défini. Par exemple, par souci de beauté, le titre d'un article est généralement affiché horizontalement dans le texte. centre.
Ici, nous avons deux situations différentes : les éléments en ligne ou les éléments de bloc sont divisés en éléments de bloc à largeur fixe et en éléments de bloc à largeur variable. Aujourd'hui, apprenons d'abord comment centrer horizontalement les éléments en ligne ?
Si l'élément défini est un élément en ligne tel qu'un texte ou une image, le centrage horizontal est obtenu en définissant text-align:center sur l'élément parent. (Élément parent et élément enfant : Comme dans le code html suivant, div est l'élément parent du texte "Je souhaite être affiché horizontalement et centré dans le conteneur parent". Au contraire, ce texte est l'élément enfant de div) Le code suivant :
code html :
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style> 2. Réglage du centre horizontal : élément de bloc à largeur fixe
Lorsque l'élément à définir est un élément de bloc, en utilisant du texte- align: center ne fonctionnera pas. Il existe également deux situations : les éléments de bloc à largeur fixe et les éléments de bloc à largeur variable.
Dans cette section, nous parlerons d'abord des éléments de bloc à largeur fixe. (Éléments de bloc à largeur fixe : la largeur des éléments de bloc est une valeur fixe.)
Les éléments qui remplissent les deux conditions de largeur fixe et de bloc peuvent être obtenus en définissant la valeur "marge gauche et droite" sur " auto" Centré. Regardons un exemple de définition de l'élément de bloc div pour qu'il soit centré horizontalement :
code HTML :
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>peut également être écrit comme :
margin-left:auto; margin-right:auto;
Remarque : l'élément "Marge supérieure et inférieure" peut être paramétré à volonté.
3. Résumé du centrage horizontal : Méthode 1 pour les éléments de bloc à largeur variable
Dans le travail réel, nous rencontrerons la nécessité de définir le centre pour les "éléments de bloc à largeur variable", tels comme sur les pages Web Navigation par pagination, le nombre de pagination étant incertain, on ne peut pas limiter sa flexibilité en définissant la largeur. (Éléments de bloc à largeur variable : la largeur des éléments de bloc n'est pas fixe.)
Il existe trois méthodes pour centrer les éléments de bloc à largeur variable (ces trois méthodes sont actuellement beaucoup utilisées) :
1. Ajoutez la balise de table
2. Définissez la méthode display: inline : similaire à la première méthode, définissez le type d'affichage sur les éléments en ligne et définissez les attributs des éléments à largeur variable
3. relatif et gauche : 50 % : utilisez le positionnement relatif pour déplacer l'élément de 50 % vers la gauche, c'est-à-dire pour atteindre l'objectif de centrage
Cette section parlera de la première méthode :
Pourquoi choisir la méthode 1 pour joindre ? La balise table ? utilise l'adaptabilité de la longueur de la balise table, c'est-à-dire qu'elle ne définit pas sa longueur et ne prend pas par défaut la longueur du corps de l'élément parent (la longueur de la table est déterminée en fonction sur la longueur du texte qu'il contient), il peut donc être considéré comme un élément de bloc de largeur fixe, puis utilisez une marge en forme de bloc de largeur fixe pour le centrer horizontalement.
Première étape : ajoutez une balise de tableau (y compris 92cee25da80fac49f6fb6eec5fd2c22a, a34de1251f0d9fe1e645927f19a896e8, b6c5a531a458a2e790c1fd6421739d1c) en dehors de l'élément centré qui doit être défini.
Étape 2 : Définissez les "marges gauche et droite centrées" pour ce tableau (c'est la même méthode que l'élément de bloc à largeur fixe).
Par exemple :
code html :
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
code css :
<style> table{ border:1px solid; margin:0 auto; } </style> 4. Résumé du centrage horizontal : variable width Méthode d'élément de bloc 2
En plus d'insérer des balises de tableau mentionnées dans la section précédente, qui peuvent centrer horizontalement des éléments de bloc de largeur variable, cette section présente la deuxième méthode pour obtenir cet effet, en changeant le type d'affichage de l'élément en Pour éléments en ligne, utilisez leurs propriétés pour les définir directement.
Deuxième méthode : modifiez le type d'affichage des éléments au niveau du bloc en type en ligne (défini sur l'affichage des éléments en ligne), puis utilisez text-align:center pour obtenir l'effet de centrage. L'exemple suivant :
code html :
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li><li><a href="#">3</a></li> </ul> </div> </body>
code css :
<style>
.container{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/
.container li{ margin-right:8px; display:inline; } 3
</style>L'avantage de cette méthode par rapport à la première méthode est qu'il Il n'y a pas besoin d'ajouter Il n'y a pas de balises sémantiques, mais il y a aussi quelques problèmes : il change le type d'affichage de l'élément de bloc en inline, le transformant en un élément en ligne, il perd donc certaines fonctions, comme la définition de la valeur de longueur.
3. Résumé du centrage horizontal : troisième méthode pour les éléments de bloc à largeur variable
En plus d'insérer des balises de tableau et de modifier le type d'affichage des éléments mentionnés dans les deux sections précédentes, vous pouvez faire éléments de bloc à largeur variable En plus du centrage horizontal, cette section présente la troisième méthode pour obtenir cet effet, qui est obtenue en définissant un positionnement flottant et relatif.
Méthode 3 : définissez float pour l'élément parent, puis définissez position:relative et left:50% pour l'élément parent, et définissez position:relative et left: -50% pour l'élément enfant pour obtenir un centrage horizontal .
Nous pouvons le comprendre de cette façon : supposons qu'il y ait une bissectrice au milieu de la couche parent de la couche ul (c'est-à-dire la couche div dans l'exemple ci-dessous) qui divise la couche parent de la couche ul couche (couche div) en deux parties. Le code CSS consiste à aligner l'extrémité la plus à gauche de la couche ul avec la bissectrice de la couche parent de la couche ul (couche div) tandis que le code CSS de la couche li consiste à aligner la bissectrice de ; la couche li avec l'extrémité la plus à gauche de la couche ul (qui est également la bissectrice de la couche div) pour obtenir le centrage de la couche li.
Le code est le suivant :
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li><li><a href="#">3</a></li> </ul> </div> </body>
code css :
<style>
.container{ float:left; position:relative; left:50% }
.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; }
.container li{ float:left; display:inline; margin-right:8px; }
</style>Ces trois méthodes sont très largement utilisées, chacune a ses propres avantages et inconvénients, veuillez choisir la méthode spécifique. La méthode qui peut être utilisée dépend de la situation spécifique.
六、垂直居中：父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container"> hi,imooc! </div>
css代码：
<style> .container{ height:100px; line-height:100px; background:#999; } </style>七、垂直居中：父元素高度确定的多行文本一
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码：
table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
八、垂直居中：父元素高度确定的多行文本二
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>
css代码：
<style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
九、隐性修改display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{ position:absolute; width:200px; background:#ccc; } </style> 以上就是【CSS笔记十】CSS样式设置小技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！