css盒子模型

盒子模型

一、display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

二、display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

三、display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

行内元素(display:inline)

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：
    text-align: center
适用元素：文字，链接，及其其它inline或者inline-*类型元素
（inline-block，inline-table，inline-flex）

块状元素(display:block)

#块级元素一个占一行
设置
.center {
  margin-left :auto;
  margin-right :auto;
}
需要居中的块级元素必须有固定的宽度，否则占据整个宽度

多个块级元素居中

#设置为inline-block
.center{
  display:inline-block;
}
#设置父节点: text-align: center;
body{
  text-align:center;
}

<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>

其他方法

使用flexbox布局:
  只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

单行行内元素垂直居中

#将原来的inline元素设置为
height = line-height = 父元素的高度
a {
  height :200px;
  line-height :200px;
}

多行的行内元素

#设置父元素属性：
display:table-cell;
vertical-align: center;

已知高度的块状元素

.item {
  top: 50%;
  margin-top:-50px; //设置为高度的一半
  position:absolute
  padding: 0;
}

未知高度的块级元素

.item{
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

水平垂直居中

.item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px; //控件高的一半
  margin-left: -75px;
}

未知宽度和高度的控件水平垂直居中

.item{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

使用flex布局实现水平垂直居中

.item{
  background: #222;
  color: #FFF;
  width: 100px;
  height: 100px;
}


.parent{
  display: flex;
  justify-content:center;
  align-items: center;
  
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}