CSS layout issues sorted out

1, Multi-element horizontal centering

##Achieve the following effect:

When ordinary people see the question, they initially feel that it is not difficult to achieve the effect in the picture. Just set the width and height margins of the small black box and center the font horizontally and vertically. In fact, the question should actually examine the horizontal centering of multiple elements, that is, no matter what the cardinality of the elements (small black boxes) is, they can be horizontally centered as a whole.

In website layout, many times, inline elements such as span or block element li tags are used in child elements, and the number of tags is variable, and we want this block to have no matter the number. No matter how many (the overall width of the child elements is variable), they can always be displayed in the center. This requires setting the child element display:inline-block. At the same time, according to the attribute of display:inline-block, the child element itself has the characteristics of inline, so the parent element needs to set text-align: center to achieve the horizontal centering of the child element as a whole in the parent element.

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

Use the display:inline-block attribute to make inline elements or block elementsYou can define its own width and height without adding float attributes, and at the same time, the element can be displayed in the center of the parent element.

Define the display:inline-block attribute on the inline element and find that the display effect in IE6 and IE7 is consistent with other browsers, but the fact is that IE7 and lower versions of IE browse The server does not support the display:inline-block attribute.

Under IE, display: inline-block only triggers the layout of the element. For example, setting display: inline-block to p can only ensure that p has the characteristics of a block element (width, height, etc. can be set), but line breaks will still occur. Next, set display: inline so that it does not cause line breaks. Write display:inline-block;*display:inline; on the same style. The inline-block attribute will not trigger the layout of the element, so we have to add *zoom:1 to trigger the layout.

In addition to the effective methods mentioned above, there is also another method:

Use first The display:inline-block attribute triggers the block element, and then defines display:inline to render the block element as an inline object (two displays must be placed in two CSS style declarations to have an effect. This is a classic bug of IE , if display:inline-block is defined first, and then the display is set back to inline or block, the layout will not disappear).

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

But it should be noted that, display: There will be extra white space between inline-block elements (not covered in this question). Solution: The parent element defines font-size:0 to remove the horizontal white space of the inline block element; the child element defines the vertical-align attribute to remove the vertical white space of the inline block element.

Implementing multiple elements Center horizontally and vertically

Use flexbox

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

2, Fence layout

Implement the following layout:

.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;
}

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