CSS 的布局应该是 CSS 体系中的重中之重了，主要的布局方式有 table 表格布局（早期），float 浮动布局和 flex 布局，还有针对于移动端的响应式布局，不论是工作还是面试都是非常重要的知识。
table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式
但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)，但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。
在介绍 flex 布局之前，我们先了解一下盒模型的概念，这个是 css 最基础的概念，首先，我们引用一张图来解释
这是百度百科里面盒模型的一张图。首先最中间的是 content 区域，即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域，这部分指的是内容区到边框的区域，即我们常说的内边距。然后就是 border 区，border 区本身也是占据空间的。边框外面是 margin 区，这部分指的是当前元素与其他元素的距离，即常说的外边距。
absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）
flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度，来看一个经典的三栏布局的例子
但是 flexbox 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。
浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。
从图中可以看出，两个 float 元素虽然包含在第一个 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
这也是目前各大网站比较主流的清除浮动的方式，还有一些其他方式这里就不详细讲了，毕竟这是一篇讲布局的文章。
首先我们要明白为什么可以用 float 实现布局。其实上面的例子我们大概就可以看出来了，黄红黄这不就是一个标准的三栏布局吗。其实并没有，我们看看下面的例子
上面代码中最重要的是margin-left: 100px;，这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div。
讲完两栏布局再讲一下三栏布局，思路主要是左边一个浮动元素，右边一个浮动元素。这里有个小问题，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位，这里演示一下
因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是
意思就是： 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。
有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。
这里只是简单的介绍了一下 css 的各种布局，如果想深入了解的话建议多看看相关的文章，比如浮动布局还包括圣杯布局，双飞翼布局等，本文只是 css 布局的基本入门，并不能真正满足一些需求，所以如果想深入了解的话还是需要多看看相关的文章、
面试问到一个问题,要设计左右两边固定100px，中间自动填充，总长度为100%的一个页面刚开始我说用栅格，实践上确实不行，所以去百度下如何实现，自己去实现了4种
的时候走了很多弯路，一直复现失败，但后调整了html中的div顺序解决了问题，直到现在我还是不能理解这个问题，等我看懂了再......
前言被这个问题折磨很久了，一直没有系统的整理，今天就系统的整理一下比较常用的，以后回顾的时候也可以参照1. line-height适用场景：单行文字，下拉框，按钮等原理：将单行文字设置行高以后，文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。示例如下tent{ width: 400px; ......
这篇文章不适合拿到 BAT 的大佬及自制力特别差的人本文只是提供复习的思路，以及我自己的一些面经，并没有具体的题目基本情况据说先把 offer 亮出来才能吸引你们看下去。目前一共有五个。分别是顺丰，拼多多，远景智能，老虎证券和贝壳。其实拿到拼多多以后很多笔试面试就没有继续参加了，比如苏宁，虎牙的面试都没有去。还有一些直接笔试就拒了。因为过了也不会去，所以也就不败人品了。再说一下我的情况......
前言UDPTCPTCP 的三次握手TCP 四次挥手累计确认顺序问题和丢包问题流量控制的问题拥塞控制的问题总结及面试问题前言前端的面试中经常问的 TCP 和 UDP 的区别，网上也有好多内容，比如 TCP 和 UDP 的区别TCP 是面向连接的，UDP 是面向无连接的UDP程序结构较简单 TCP 是面向字节流的，UDP 是基于......
将每个元素看成是一个矩形盒子，占据一定空间。 盒子模型两方面理解：1.独立的盒子内部结构；2.多个盒子之间的香菇关系。 1.盒子模型概念 独立盒子模型由：内容、border、padding、margin四部分组成。详见之前的文章内容。 盒子的实际宽（高）= 内容（width/height）+padding（两边）+border（两边）+margin（两边）...
