Probleme mit dem CSS-Layout behoben

1, Mehrere Elemente werden horizontal zentriert

Erzielen Sie den folgenden Effekt:

Wenn normale Menschen die Frage sehen, haben sie zunächst das Gefühl, dass es nicht schwierig ist, den Effekt im Bild zu erzielen. Legen Sie einfach die Breiten- und Höhenränder fest Klicken Sie auf das kleine schwarze Kästchen und zentrieren Sie die Schriftart horizontal und vertikal. Tatsächlich sollte die Frage die horizontale Zentrierung mehrerer Elemente untersuchen, d. h. unabhängig von der Kardinalität der Elemente (kleine schwarze Kästchen) können sie als Ganzes horizontal zentriert werden.

Im Website-Layout werden häufig Inline-Elemente wie Span- oder Blockelement-Li-Tags in untergeordneten Elementen verwendet, und die Anzahl der Tags ist variabel, und wir möchten, dass dieser Block vorhanden ist Egal wie viele (die Gesamtbreite der untergeordneten Elemente ist variabel), sie können immer in der Mitte angezeigt werden. Dies erfordert die Einstellung des untergeordneten Elements display:inline-block. Gleichzeitig weist das untergeordnete Element selbst gemäß dem Attribut display: inline-block die Eigenschaften von inline auf, sodass das übergeordnete Element text-align: center festlegen muss, um die horizontale Zentrierung des untergeordneten Elements als Ganzes zu erreichen im übergeordneten Element.

main{
  text-align:center;
}p{
  display:inline-block;
  *display:inline;/*hack IE*/
  *zoom:1;/*hack IE*/}

Verwenden Sie das display:inline-block-Attribut, um das Inline-Element oder zu erstellen block Das Element kann seine eigene Breite und Höhe definieren, ohne Float-Attribute hinzuzufügen, und gleichzeitig kann das Element in der Mitte des übergeordneten Elements angezeigt werden.

Definieren Sie das Attribut display:inline-block im Inline-Element und stellen Sie fest, dass der Anzeigeeffekt in IE6 und IE7 mit anderen Browsern übereinstimmt, Tatsache ist jedoch, dass IE7 und niedrigere Versionen von IE surft. Der Server unterstützt das display:inline-block-Attribut nicht.

Unter IE löst display: inline-block nur das Layout des Elements aus. Wenn Sie beispielsweise display: inline-block auf p setzen, kann nur sichergestellt werden, dass p die Eigenschaften eines Blockelements aufweist (Sie können Breite, Höhe usw. festlegen), es führt jedoch weiterhin zu Zeilenumbrüchen. Als nächstes müssen Sie display: inline so einstellen, dass es keine Zeilenumbrüche verursacht. Schreiben Sie display:inline-block;*display:inline; in den gleichen Stil. Das Attribut inline-block löst das Layout des Elements nicht aus, daher müssen wir *zoom:1 hinzufügen, um das Layout auszulösen.

Zusätzlich zu den oben genannten wirksamen Methoden gibt es noch eine weitere Methode:

Zuerst verwenden Die Anzeige: Das inline-block-Attribut löst das Blockelement aus und definiert dann display:inline, um das Blockelement als Inline-Objekt darzustellen (zwei Displays müssen in zwei CSS-Stildeklarationen platziert werden, um eine Wirkung zu erzielen. Dies ist ein klassischer Fehler von IE, wenn display :inline-block wird zuerst definiert und dann wird die Anzeige wieder auf inline oder block gesetzt, das Layout verschwindet nicht).

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

Aber das sollte beachtet werden , Display:inline-block-Elemente erzeugen zusätzlichen Leerraum (wird in dieser Frage nicht behandelt). Lösung: Das übergeordnete Element definiert „font-size:0“, um den horizontalen Leerraum des Inline-Blockelements zu entfernen. Das untergeordnete Element definiert das Attribut „vertikal-align“, um den vertikalen Leerraum des Inline-Blockelements zu entfernen.

http://codepen.io/floralam/pen/XJwWZJ?editors=110

Implementierung mehrerer Elemente Horizontal und vertikal zentrieren

mit Flexbox

http://codepen.io/floralam/pen/MwKmGP

2, Zaunlayout

Erzielen Sie das folgende Layout:

http://codepen.io/floralam/pen/OPYyEE

.parent{
    display: flex;
    flex-direction: column;//上面两行等同于flex-flow：colomn
    flex-wrap: wrap;// 显示 wrap一行显示不完的时候换行
    height: 440px;
    width: 660px;
}

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

伸缩方向与换行(flex-flow)

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。

如果伸缩容器设置了“flex-flow”值为“row”，伸缩项目排列由左向右排列。

如果“flex-flow”值设置为“column”，伸缩项目排列由上至下排列。

制作一个20%、60%、20%网格布局

.main-content {
      width: 60%;
}.main-nav,.main-sidebar {
     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      width: 20%;               /* For old syntax, otherwise collapses. */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */}

3，  未知高度多行文本垂直居中

方法一，使用display：inline-block+伪元素：http://codepen.io/floralam/pen/WbBrwV?editors=110

.container{
   position: fixed;
    left: 0;
    top:0;
    height: 100%;
    width: 100%;
    text-align: center;
}.mask:after{
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%}.dialog{
    display: inline-block;
    border: 3px solid lightblue;
}

box 容器通过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了

 方法二（感谢超级课程表胡晋哥哥的提示），使用display：table-cell：

http://codepen.io/floralam/pen/yNeMPg

通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果。

display:table    此元素会作为块级表格来显示（类似

display:table-cell 此元素会作为一个表格单元格显示（类似

.container{
  display:-webkit-box;
}.left{
  -webkit-box-flex:1;
}.right{
  -webkit-box-flex:1;
}

p{
    white-space:nowrap;
}

p{　　word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行
　　word-break: normal; //让浏览器实现在任意位置的换行}

.nowrap li{
   white-space:nowrap;
   width:100px;
   overflow:hidden;
   text-overflow: ellipsis;
}

{
:;
:;:;
:;
:;
}{
:;
:;
:;
}{
:;
}