Heim > Artikel > Web-Frontend > [CSS-Hinweise 10] Tipps zur Einstellung des CSS-Stils

[CSS-Hinweise 10] Tipps zur Einstellung des CSS-Stils

黄舟Original: 2016-12-29 14:02:291073Durchsuche

1. Horizontale Zentrierung: Inline-Elemente
In der Praxis kommt es häufig vor, dass die horizontale Zentrierung festgelegt werden muss. Aus Gründen der Schönheit wird beispielsweise der Titel eines Artikels im Allgemeinen horizontal angezeigt Center.

Hier haben wir zwei verschiedene Situationen: Inline-Elemente oder Blockelemente werden in Blockelemente mit fester Breite und Blockelemente mit variabler Breite unterteilt. Heute lernen wir zunächst, wie man Inline-Elemente horizontal zentriert.

Wenn das Set-Element ein Inline-Element wie Text oder Bild ist, wird die horizontale Zentrierung erreicht, indem text-align:center auf das übergeordnete Element gesetzt wird. (Übergeordnetes Element und untergeordnetes Element: Wie im folgenden HTML-Code ist div das übergeordnete Element des Textes „Ich möchte ihn horizontal und zentriert im übergeordneten Container anzeigen“. Im Gegenteil, dieser Text ist das untergeordnete Element von div.) Der folgende Code:

HTML-Code:

<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style>

2. Horizontale Mitteneinstellung: Blockelement mit fester Breite
Wenn das festzulegende Element ein Blockelement ist, verwenden Sie Text- align: center funktioniert nicht. Es gibt auch zwei Situationen: Blockelemente mit fester Breite und Blockelemente mit variabler Breite.

In diesem Abschnitt werden wir zunächst über Blockelemente mit fester Breite sprechen. (Blockelemente mit fester Breite: Die Breite von Blockelementen ist ein fester Wert.)

Elemente, die die beiden Bedingungen feste Breite und Block erfüllen, können erreicht werden, indem der Wert „linker und rechter Rand“ auf „ auto" Zentriert. Sehen wir uns ein Beispiel für die horizontale Zentrierung des div-Blockelements an:

HTML-Code:

<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ 
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>

kann auch wie folgt geschrieben werden:

margin-left:auto; margin-right:auto;

Hinweis : Das Element „Oberer und unterer Rand“ kann beliebig eingestellt werden.

3. Zusammenfassung der horizontalen Zentrierung: Methode 1 von Blockelementen mit variabler Breite

Bei der tatsächlichen Arbeit werden wir auf die Notwendigkeit stoßen, die Mitte für „blockförmige Elemente mit variabler Breite“ festzulegen. B. auf Webseiten SeitennavigationDa die Anzahl der Seiten ungewiss ist, können wir ihre Flexibilität nicht durch Festlegen der Breite einschränken. (Blockelemente mit variabler Breite: Die Breite von Blockelementen ist nicht festgelegt.)

Es gibt drei Methoden zum Zentrieren von Blockelementen mit variabler Breite (diese drei Methoden werden derzeit häufig verwendet):

1. Fügen Sie das Tabellen-Tag hinzu
2. Legen Sie die Anzeigeart fest: Inline-Methode: Stellen Sie den Anzeigetyp auf Inline-Elemente ein und legen Sie die Attribute der Elemente mit variabler Breite fest
3. relativ und links: 50 %: Verwenden Sie die relative Positionierung, um das Element um 50 % nach links zu verschieben, um den Zweck der Zentrierung zu erreichen.

In diesem Abschnitt wird die erste Methode erläutert:

Warum Methode 1 zum Verbinden wählen? Das Tabellen-Tag nutzt die Längenanpassungsfähigkeit des Tabellen-Tags – das heißt, es definiert nicht seine Länge und verwendet nicht standardmäßig die Länge des übergeordneten Elementkörpers (die Länge der Tabelle wird basierend darauf bestimmt). abhängig von der Länge des darin enthaltenen Textes), sodass es als Blockelement mit fester Breite betrachtet werden kann, und dann einen blockförmigen Rand mit fester Breite verwenden, um es horizontal zu zentrieren.

Schritt eins: Fügen Sie ein Tabellen-Tag (einschließlich 92cee25da80fac49f6fb6eec5fd2c22a, a34de1251f0d9fe1e645927f19a896e8, b6c5a531a458a2e790c1fd6421739d1c) außerhalb des zentrierten Elements hinzu, das festgelegt werden muss.

Schritt 2: Legen Sie die „zentrierten linken und rechten Ränder“ für diese Tabelle fest (dies ist die gleiche Methode wie beim Blockelement mit fester Breite).

Zum Beispiel:

HTML-Code:

<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>

CSS-Code:

<style> table{ border:1px solid; margin:0 auto; } </style>

4. Zusammenfassung der horizontalen Zentrierung: variabel Breite Blockelement-Methode 2
Zusätzlich zum im vorherigen Abschnitt erwähnten Einfügen von Tabellen-Tags, mit denen Blockelemente mit variabler Breite horizontal zentriert werden können, wird in diesem Abschnitt die zweite Methode vorgestellt, um diesen Effekt zu erzielen, indem der Anzeigetyp des Elements in For geändert wird Inline-Elemente verwenden ihre Eigenschaften, um sie direkt festzulegen.

Zweite Methode: Ändern Sie den Anzeigetyp von Elementen auf Blockebene in Inline-Typ (stellen Sie ihn auf Inline-Elementanzeige ein) und verwenden Sie dann text-align:center, um den Zentrierungseffekt zu erzielen. Das folgende Beispiel:

HTML-Code:

<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>

CSS-Code:

<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>

Der Vorteil dieser Methode gegenüber der ersten Methode besteht darin Es ist nicht erforderlich, hinzuzufügen. Es gibt keine semantischen Tags, aber es gibt auch einige Probleme: Es ändert den Anzeigetyp des Blockelements in Inline und verwandelt es in ein Inline-Element, sodass einige Funktionen verloren gehen, z. B. das Festlegen des Längenwerts.

3. Zusammenfassung der horizontalen Zentrierung: Methode drei für Blockelemente mit variabler Breite
Zusätzlich zum Einfügen von Tabellen-Tags und zum Ändern des Anzeigetyps von Elementen, die in den beiden vorherigen Abschnitten erwähnt wurden, können Sie Folgendes vornehmen: Blockelemente mit variabler Breite Zusätzlich zur horizontalen Zentrierung wird in diesem Abschnitt die dritte Methode zur Erzielung dieses Effekts vorgestellt, die durch Festlegen der schwebenden und relativen Positionierung erreicht wird.

Methode 3: Legen Sie float für das übergeordnete Element fest, legen Sie dann position:relative und left:50 % für das übergeordnete Element fest und legen Sie position:relative und left: -50 % für das untergeordnete Element fest, um eine horizontale Zentrierung zu erreichen .

Wir können es so verstehen: Nehmen wir an, dass sich in der Mitte der übergeordneten Ebene der ul-Ebene (d. h. der div-Ebene im Beispiel unten) eine Winkelhalbierende befindet, die die übergeordnete Ebene der ul teilt Der CSS-Code besteht darin, das äußerste linke Ende der UL-Ebene an der Winkelhalbierenden der übergeordneten Ebene (Div-Ebene) auszurichten Ausrichtung der li-Schicht mit dem äußersten linken Ende der ul-Schicht (die auch die Winkelhalbierende der div-Schicht ist), um eine Zentrierung der li-Schicht zu erreichen.

Der Code lautet wie folgt:

<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>

CSS-Code:

<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>

Diese drei Methoden sind sehr weit verbreitet, jede hat ihre eigenen Vorteile und Nachteile, bitte wählen Sie die spezifische aus. Welche Methode verwendet werden kann, hängt von der spezifischen Situation ab.

六、垂直居中：父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。

这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 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）！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：[CSS Note 9] Einheiten und WerteNächster Artikel：[CSS Note 9] Einheiten und Werte

In Verbindung stehende Artikel

Mehr sehen