回炉再造Css Layout-CSDN博客

大家好，我叫张文轩，这是我的第5篇分享

初衷

有次看了篇文章，文章有句话对我印象深刻，这句话是废掉一个人的最好方式，就是让他忙的停不下来。意思就是在前进的过程中，如果只知道不停的奔跑，而不间歇性的停下来梳理总结，最终也并不会跑的很远。

就拿我自己来讲吧，我从事前端也好几年了，平常主要工作是承接公司（口袋购物-微店）业务开发，说实在的用的东西挺多的，很多东西都知道一点，但每每自己静下来想想的时候，发现自己很多东西又了解不够深，平常业务开发功能实现就行，受限于时间，很多时候并没有想为什么这样做可以，为什么那样做不行，停下来思考总结的次数不是特别多，再加上前端界的快速发展，因而会有点点焦虑，直到最近自己学会停下来，好好回顾一下自己用过的东西，结构化梳理自己的知识，查漏补缺，构建自己的知识网络，让自己对一些经常用的知识有了更深的认识，同时还补缺了自己之前很多并不知道的一些细节点，才稍微有了种踏实的感觉，希望跟我有同样感想的童鞋也要学会停下来，系统化整理下自己所掌握的，相信你会收获很多。

如题，今天我要讲的是关于Css Layout相关的知识，可能很多知识你都知道，但我们今天的重点是构建基础知识网络，查漏补缺。

Float

我们都知道，css布局正常情况下都是从左至右依次排列，行内元素依次展示，块元素单独占据一行。然而有些时候我们想要一些特定的布局，就需要改变元素的布局方式。比如float,float被用于移动元素到左或者到右，允许文本或者形内元素环绕它，并且会从正常文档流脱离出来。

<div class="container">
  <div class="item"></div>
  <p>我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，</p>
  <p>我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，我是一条狗，</p>
</div>

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}
<!--关键代码-->
.item{
    display:float
}
复制代码

float最初被设计出来是用来实现文字环绕的效果的，后面逐渐被开发者用来完成两列布局、三列布局等的效果，若想要达成类似的布局，我们就需要清除浮动带来的影响,主要有以下几种方式。

清除浮动

方式一常规方式

正常文字是环绕浮动块的，如果我们想要文本在元素下面，可以给p元素增加一个名为clear的类

.clear{
    clear：both
}
复制代码

如果我们想实现一个文本不环绕的左右布局呢，如果文本内容较多，支撑的高度能够覆盖左边块元素，可以不需要清除浮动就可以实现。但如果右边文本元素支撑的高度不足以覆盖左边块元素，就会出现像下面这样

这个时候给p元素清除浮动不行的，我们要给它们共同的父元素container清除浮动

.container::after{
  content:"";
  display:table;
  clear:both
}
复制代码

方式二 BFC

BFC(块格式上下文)，什么是BFC可以点击链接去详细回顾下，这里我们要知道的就是浮动不会影响其它BFC中元素的布局，本例子中左边块状元素是个BFC，我们给container父元素也创建个BFC，那浮动就不会对container内部文本有影响。

.container{
    overflow:auto
}
复制代码

一个新属性

创建BFC有很多方式，比如display:float,overflow:auto,position:absolute等，但这些方式多多少少会有一定负面影响，比如overflow:auto会产生滚动条，最新css出了一个新属性display:flow-root,该属性能够创建一个纯粹的BFC环境。

.container{
    display:flow-root
}
复制代码

添加上述代码实现的效果和overlfow:auto一致

position

relative

设置为position:relative的元素，未脱离文档流，占据空间，相对于自己原本位置进行偏移，不影响邻近元素。这个比较简单，看张图就会明白。

absolute

设置为position:relative的元素,脱离文档流，不占据空间，可以设置外边距，且不会与其它边距合并(由于此时创建了BFC)

fixed

设置为position:fixed的元素,脱离文档流，类似于绝对定位，但它始终相对viewport视口,一般用来固定某个元素在视窗中。

sticky

position:sticky一个新特性，被称为粘性定位，怎么理解粘性定位的概念呢，可以简单理解为元素在跨越特定阈值前为相对定位，之后为固定定位，比如如下代码

#one { position: sticky; top: 10px; }
复制代码

理解就是，在 viewport 视口滚动，元素top距离小于10px之前，元素为相对定位。之后，元素将固定在与顶部距离10px的位置，直到viewport视口回滚到阈值以下。这个特性特别适合用来完成如下交互的布局，查看demo地址

Flex

flex是display属性新增的一个值，display:flex能使一个容器变成伸缩容器，详细文档可以点击这个flex使用指导，这里我主要讲一个我们平常开发经常使用的一个写法，也是被推荐的写法，因为浏览器会根据这个去计算布局，如果是一个个的，浏览器解析的时候需要一步步的来回计算，这很浪费性能。比如这样的代码

flex: 1 1 auto
复制代码

flex是flex-grow``flex-shrink flex-basis组合的缩写，这3个都是伸缩容器内元素的属性，flex-grow指明元素在容器空间足够大的时候，是否放大，默认值是1，放大;flex-shink刚好和flex-grow相反，指明元素在容器空间不足时，是否缩小，默认值是1;flex-shrink定义初始伸缩元素的大小，伸缩容器根据此值去调整伸缩元素实际渲染大小。举个例子：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  flex: 1 1 0;
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}
复制代码

item元素flex:1 1 0指明元素均分伸缩容器

如果我们把item元素flex调整为flex:0 1 0,指明item元素不放大，表现如下

如果想某个item元素宽度是其它的两倍，可如下调整

.container :first-child {
  flex: 2 1 0; 
}
复制代码

但实际发现1的宽度并不是2和3的两倍宽，为什么呢？因为flex-grow：2并不能简单的理解为该元素就是其它元素的2倍，而应该理解为1最大可以是其它元素的2倍宽，尽量往2倍宽的距离去靠。关于这方面的知识可以点击这篇文章的介绍。

Grid

grid布局，又称之为网格布局，如果说flex布局是一维布局的话，grid就可以理解为是个二维布局，定义display:grid的容器被从横线和纵向切割，里面容纳一个个网络元素。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows:25% 100px auto;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}
复制代码

解析下上述例子，纵向轨道被分为5个轨道，分别为40px、50px、auto、50px、40px，第三个轨道（网络线line3-line4）自动分配剩余空间，横向轨道同理。

其中里面的一个个网络可以被移动，比如如下：

.container > div:nth-child(3n+1) {
  grid-row-end: span 2;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}
复制代码

其中grid-row-end：span 2表示第1、4、7网络分别在横向轨道到被移动到横向轨道线third-line的位置，渲染的效果如下：

通过chrome开发者工具我们可以清晰的看到布局的处理

对于grid布局我就介绍到此，因为这块的内容实在是太多了，我并不想写成一个教程类的文章，要想掌握只能熟练使用，多练习。推荐一个好的学习地址。

到这里为止，对于css layout这条线的知识我就做了个整理，在不断整理的过程中，你才能把自己的知识串联起来，构建自己的知识网络，然后基于其中的一些知识网络节点，不熟悉或者了解不深的再去加强学习下，通过这样的流程，才能加强自己对知识的理解度，在实际需求使用的时候才能对症下药，不断提升自己的技术水平。

最后上传一下自己整理的知识图谱，感谢您花时间阅读我的文章，如果我的文章或者我的思路能够稍微帮助到你一点点，我就很开心?了~

参考链接：