css常用技巧整理-布局综述篇

摘要：效果图为了让效果更明显，特意设置了两边字体大小不同关键代码父容器子容器这里要提一下的是，只对于内联元素或者内联内容有效，比如说为块级元素标签设置行高，实际上是为标签中的内联文字设置了行高。允许指定负长度值和百分比值。

先扯一段废话来引入好了。又很久没有写文章了（间接性踌躇满志，持续性混吃等死），几个月了登上来看到有人收藏和点赞，感到很惭愧，最近主要精力花费在react和redux，在写项目的过程中发现当前学习重心偏向js和框架学习，css的知识不够扎实，正好碰到公司的技术大牛分享css心得，借此机会恰好梳理一下自己的知识。

本篇的内容主要是pc端的常规布局，说到这里，虽然目前flex布局和grid布局比较火，用起来也确实很方便，但是这两个方案有个比较致命的地方--需要高版本浏览器的支持（IE10以上），而很多项目需要考虑到IE8以下的兼容，所以目前在pc端项目中仍然使用一些常规的布局方案。

为了更容易理解，还是采用举例的方式进行知识点说明

案例1:比如需要写这样一个评论区域，左侧是固定宽度的区域放置评论者的头像，右侧是评论的内容和信息等

这时候可以这样写

 .left{
    position:absolute;
    width:200px;
  }
  .right{
    padding-left:200px;
  }

案例2：如果把上个案例左边的头像换成评论者昵称，由于昵称长度不一定，所以左侧的宽度不能写死，此时采用如下写法：

  .left{
    float: left;
  }
  .right{
   overflow: auto;  }

这种写法的原理是触发右边元素的BFC特性（关于bfc的详细介绍不在本篇提出，网上有比较多的文章介绍），可以先简单的说一下，BFC的简单来说，主要是使元素成为一个独立的容器，不受外界因素的影响。这种写法也可以用在有侧边栏的页面布局上，以及常见的带有标题和时间戳的文章列表项上，看下面的例子：

类似于上图这种，需要显示文章标题和发布时间情况，可能有些人会采取左侧标题左浮动，右侧时间戳右浮动的写法来写，这样的写法其实是不够稳健的：如果标题的长度太长，或者说整个容器的宽度变小的时候，效果会变成这样：右侧的元素会被挤到下一行去

，而采用上面的写法时是这样的：

如果再配合上css的文字超出部分省略号，就可以变成这种效果：当容器宽度小的时候，标题根据长度自适应显示。

(关于white-space这个属性，在后续的文章会再提到，占个坑)
关键代码：

.left{
    float: left;
    background-color: lightpink;
    text-overflow: ellipsis;
    max-width: 171px;
    overflow: hidden;
    white-space: nowrap;
  }
  .right{
    overflow: auto;
    background-color: lightblue;
  }

对于定宽元素,直接使用margin:0 auto;(其实只有左右是auto即可 上下的可以设置其它值)：

.inner{
      width: 300px;
      height:400px;
      margin: 0 auto;
    }

对于非定宽的元素，在父容器上使用text-align:center即可

.box{
      text-align:center;
    }

以上两种都比较简单和常见，不再赘述。

案例3：还是刚刚上面的文章列表项，如果需要让标题和时间戳都垂直居中， 那么可以让子元素的line-height值等于li的高度，即可实现内部的文字居中。
效果图（为了让效果更明显，特意设置了两边字体大小不同）:

关键代码：

    //父容器
   .box{
        height:40px;
    }
    //子容器
    .inner{
        line-height:40px;
    }
       

这里要提一下的是，line-hight只对于内联元素或者内联内容有效，比如说为块级元素p标签设置行高，实际上是为p标签中的内联文字设置了行高。（行高的详细计算也不在本文赘述，后续看情况是否另写）

案例4：假设现在我们需要写一个工具条，工具条的高度不确定，工具条内的图标高度有可能不一样，但是都要垂直居中。 目标效果图：

像上面这种效果，可能会有人提出对不同的图标使用不同margin:top的值来使它们强制垂直居中，但是这样的写法是很不方便的，如果工具栏的高度有所变化，需要进行相应调整。比较合适的写法是像下面这样：

//父容器
.toolbar{
    font-size:0
    height：300px;
}
  .toolbar:after{
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
  }
//子容器
  .inner{
    display: inline-block;
    vertical-align: middle;
  }

这个例子可能需要详细解释下。首先先问一个问题吧：vertical-align: middle;这个属性是怎么生效的？字面上翻译过来是“垂直方向居中”，那请问这里的垂直方向居中是以什么为参照物的呢？,
css2.1里面提到：

for inline non-replaced elements, the box used for alignment is the box whose height is the "line-height" (containing the box"s glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.
在w3c上是这样描述的：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

简单的来说，可以认为这些设置了inline-block内部块盒，它们vertical-align的是相对于父容器的行高来设置的。好了，第二个关键点是,在上面的案例中 我们并不确定父元素box的行高，那这时候父元素box的行高就等于子行内元素中高度最高的一个，对于上面伪类属性的作用大家肯定都知道，相当于给box添加一个子元素，由于我们给这个伪类设置了inline-block，使之具有内联元素的特征，又设置了高度为100%，那么当父容器具有固定高度时，这个伪类元素能保证，父容器的行高等于高度,从而保证了其他元素的vertical-align: middle;能够真正相对于父容器的高度居中。

还有一点就是，使用inline-block的元素会导块级元素出现间隙（具体的原因关系到inline-block的属性特性，本文暂时不提），通用的解决方案是给父容器加上font-size:0

对于已知宽高的绝对定位元素，可以简单的这样写：

.inner {
   position: absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    marigin-right: -50px;
}

关键思路就是设置负边距为自身宽高的一半。
如果在ie9以上，可以使用transform属性简化代码,此时可以不需要知道元素自身的宽高

.inner {
   position: absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%,-50%);
}

本文主要是对pc端常用的一些布局写法做了整理，总体上还是偏向于在某种情况下怎么做的思路来写的， 其实其中很多的东西值得深入研究，比如BFC,line-height和display:inline-block的一些内容，但是由于篇（lan）幅（duo）的关系无法在文中详细说明，后续再一一补上吧（如果懒癌没有发作的话，毕竟每次写文章之前写结构、画图、写代码、组织语言都要花费一番功夫，写完一次都会恐惧一段时间。。。）还有就是，很感谢那些支持和关注的人，你们给了我前进的动力。
然后是惯例：如果这篇文章对你有帮助，请大方的点收藏和推荐吧，以上内容属于个人见解，如果有不同意见，欢迎指出和探讨。请尊重作者的版权，转载请注明出处，如作商用，请与作者联系，感谢！