前言先废话介绍一下。好久没写文章了（间接沾沾自喜，坚持吃吃等死），几个月来看到一些人的收藏和点赞，都觉得惭愧。最近主要精力花在了react和redux上。我在写项目的过程中，发现目前的学习重点是js和framework的学习，css的知识还不够扎实。正好遇到公司的技术大牛分享他们的css经验，借此机会整理下自己的知识点。本文内容主要是PC端的常规布局。说起来，虽然flex布局和grid布局目前比较流行，使用起来也确实很方便，但是这两种方案都有一个致命的地方——需要高版本浏览器支持（IE10及以上），并且很多项目需要考虑IE8以下的兼容性，所以PC端的项目还是会使用一些常规的布局方案。为了让课文更容易理解，我还是用例子来解释知识点。水平布局类在一侧有固定宽度的元素，另一侧的元素自动填充父容器。情况一：比如你需要写这样一个评论区，左边是固定宽度的，评论区里放的是评论者的头像，右边是评论的内容和信息。这时候，你可以这样写。左{位置：绝对；宽度：200px；}.right{padding-left:200px;side元素自动填充父容器。案例二：如果把上一个案例中左边的头像换成评论者的昵称，由于昵称的长度不是固定的，所以左边的宽度是写死不了的。这时候就用到了下面的方法：.left{float:left;}.right{溢出：自动；}这种写法的原理是触发右边元素的BFC特性（BFC的详细介绍本文不做介绍，网上有很多文章），可以先简单说一下，简单来说，BFC主要是让元素成为一个独立的容器，不受外界因素的影响。这种写作风格也可以用于带有侧边栏的页面布局，以及带有标题和时间戳的常见文章列表项。看下面的例子：和上面类似，需要显示文章的标题和发布时间在某些情况下，有些人可能会使用左边的left-floatingtitle，右边的right-floatingtimestamp写。这种写法其实不够健壮：如果标题的长度过长，或者整个容器的宽度变小，效果就会变成这样：右边的元素会被挤到下一行，而上面的写法是这样的：如果在css文本超出部分的时候加上省略号，就可以变成这样的效果：当容器宽度较小的时候，根据长度自适应显示标题。（关于white-space的属性，后续文章会再提到，占个坑）关键代码：.left{float:left;背景色：浅粉色；文本溢出：省略号；最大宽度：171px；溢出：隐藏；空白：nowrap；}.right{溢出：自动；背景颜色：浅蓝色；}水平居中类对于固定宽度的元素，直接使用margin:0auto；设置其他值):.inner{width:300px;高度：400px；保证金：0自动；}对于非固定宽度的元素，在父容器上使用text-align:center.box{text-align:center;}上面两个比较简单常用，这里不再赘述。文本（行内）内容垂直居中案例三：还是文章列表项的正上方，如果需要让标题和时间戳垂直居中，那么可以让子元素的line-height值等于高度li的，就是可以实现内部文本居中。效果图（为了让效果更明显，特意设置两边字体大小不一样）：关键代码：//parentcontainer.box{height:40px;}//childcontainer.inner{line-height:40px;}这里要提一下line-hight只对行内元素或者行内内容有效。例如，为块级元素p标签设置行高，实际上是为p标签中的行内文本设置行高。（具体行高的计算本文不再赘述，后面视情况写）块状框垂直居中案例4：假设现在我们要写一个toolbar，其高度toolbar是不确定的，toolbar中图标的高度可能不一样，但是都是垂直居中的。目标效果图：像上面的效果，有人可能会建议对不同的图标使用不同的margin:top值来强制垂直居中，但是这种写法很不方便，如果toolbar的高度发生变化，需要作相应调整。比较合适的写法如下：//parentcontainer.toolbar{font-size:0height:300px;}.toolbar:after{content:"";显示：内联块；垂直对齐：中间；宽度：0；高度：100%；}//子容器.inner{display:inline-block;垂直对齐：中间；}这个例子可能需要详细解释一下。先问一个问题：vertical-align:middle;这个属性是如何工作的？直译是“垂直方向居中”，那么这里垂直方向居中指的是什么呢？，在css2.1中提到：对于行内非替换元素，用于对齐的框是高度为'line-height'的框（包含框的字形和每边的半行距，见上文）。对于所有其他元素，用于对齐的框是边距框。w3c上是这样描述的：该属性定义了内联元素的基线相对于元素所在行的基线的垂直对齐方式。允许负长度和百分比值。这会降低元素而不是升高它。在表格单元格中，此属性设置单元格框内单元格内容的对齐方式。简单来说，这些可以认为是设置inline-block内部的块框，它们的vertical-align是相对于父容器的行高设置的。那么第二个关键点就是在上面的例子中我们不确定父元素框的行高，那么父元素框的行高等于子行内元素中最高的高度。对于上面的伪类，想必大家都知道属性的作用，相当于给盒子添加了一个子元素。既然我们为这个伪类设置了inline-block具有内联元素的特性，并且设置了高度为100%，那么当父容器有固定高度的时候，这个伪类元素可以保证父容器的行高等于高度，从而保证其他元素的vertical-align:middle能够真正相对于父容器的高度居中。还有一点就是使用inline-block元素会导致块级元素出现空隙（具体原因与inline-block的属性特性有关，本文暂不赘述）。一般的解决方法是在父容器中添加font-size:0绝对定位元素的居中对于已知宽高的绝对定位元素，可以简单的写成这样：.inner{position:absolute;左：50%；顶部：50%；宽度：100px；高度：100px；左边距：-50px；margin-right:-50px;}关键思想是将负边距设置为其宽度和高度的一半。如果是ie9以上，可以使用transform属性来简化代码。这时候，你不需要知道元素本身的宽高。内部{位置：绝对；左：50%；顶部：50%；宽度：100px；高度：100px；transform:translate(-50%,-50%);}总结本文主要整理了一些PC端常用的layout写法。一般来说，写的是在某种情况下应该怎么做。其实很多都是值得深入研究的东西，比如BFC的一些内容，line-height和display:inline-block，但是由于(lan)和(duo)的关系，不能文中有详细解释，后面会一一补充（如果偷懒就不攻略了，毕竟写结构、画图、写代码、整理都花了不少功夫写文章前的语言，写完后会害怕一阵子。。。）还有，非常感谢支持和关注的人，是你们给了我前进的动力。然后是做法：如果本文对您有帮助，请大方点击收藏并推荐。以上内容为个人观点。如有不同意见，欢迎指出并讨论。请尊重作者版权，转载请注明出处，若用于商业用途，请联系作者，谢谢！
