CSS就像个API，只要照着说明书，怎么地也能凑出一个像样的页面。如果正面凑不出来，通过各种属性的调整，也能绕路把它实现。CSS的结果就是可视化的页面，一旦效果出来，就感觉自己“掌握”了CSS，一心死磕JS去了 。这或许是大多数新晋前端都有的经历，也是导致后来写页面让然感觉困难重重的原因，因为那并不是掌握了CSS，只是会用了CSS的属性堆页面，没有理解其背后的原理。
用从PC端页面的布局说起。我们那边的土话说，凡事都有章法，写页面CSS的章法就是：先整体后局部。这个整体就是布局，不是仅仅指html的标签配置，更是样式上的布局，主要有：定位、浮动、尺寸。
浏览器渲染页面的过程其实跟我们画一张画的步骤几乎一样，画哪个位置，哪里开始落笔，画多大。这几个完成，基本上布局就完成了，定位、浮动、尺寸（盒模型）刚好解决了这三个问题。
定位
定位的意思确定自己的位置，但是是相对于另外一个参照物（比如上级元素或者窗口）来确定自己位置。这里有个基础知识是标准文档流，在标准文档中，任何一个html元素都会有一个默认的位置，这个是定位的基础，是定位的参照物。
定位的属性名称是：position，属性值目前有6个：static、inherit、relative、absolute、fixed、sticky。
static(默认值)：元素框正常生成。这个时候top, bottom, left, right即使有值，也会被忽略 。
inherit ：继承，规定应该从父元素继承 position 属性的值。
relative：元素框相对于自身在标准文档流中的位置发生偏移，但不脱离文档标准流，位置保留。此时设置top、right、bottom、left四个属性会生效，其相对的参照物就是自身在文档标准流的位置。
absolute：脱离标准文档流，后面的元素会补位。此时设置top、right、bottom、left，并且往上相对其所有级别中第一个position值不为static的父级元素，直至相对于窗口。
fixed：脱离标准文档流，并且相对于视窗进行定位。经常用到的地方必须一直贴在页面顶端的导航，侧边的工具栏等。比如我现在在用的百家号的编辑器工具栏。
sticky：粘性定位，是css3新增的属性值， 可以理解是relative和fixed混合使用。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会变成fixed定位，相对于视口进行定位。
浮动
浮动是不同与定位的一个属性，名称float,属性值有left、right、none、inherit。none就是正常的标准文档流，inherit指继承自父级。
浮动是和很奇葩的存在，你说他脱离文档流了，但是他的内容好像又还在原来的文档流占着位置，因为他后面的元素都是在浮动元素的内容之后开始布局，这曾经让无数工程师百思不得其解。
设置DIV1的float:left，DIV2元素补位，左上角开始点与DIV1开始点重合，但是DIV2的内容元素并没有按照正常理解的在DIV2的开始点开始，而是在DIV1之后开始，仍然有环绕的效果。所以让然对后续元素的布局有影响。
说到浮动，不能不提的是清除浮动。清除浮动需要用到clear属性，在浮动元素的背后加一个空元素然后设置clear的属性，可以达到效果。但是添加元素的方法太过low，代码也不简洁，所以比较常用的是使用after伪类：对子元素的after伪类设置clear属性值。另外一个方法是将父元素的overflow设置成hidden。
尺寸（盒模型）
尺寸就是确定自身的大小。这里有两个知识点，一个是自身是什么形式存在的，第二个是大小的单位是什么。
先第一个问题，答案是盒模型。每个元素都是以矩形块的形式存在的，不是圆形或者其他什么形状。css中存在两种不同的盒子模型，标准盒子盒子模型和box盒子模型，通过box-sizing属性设置不同的模型。如图：
这两个模型的主要区别是width的宽度不同，当设置box-sizing:border-box时，盒子模型的width=border+padding+content的总和，也就是除了margin之外的所有宽度之和：
当然，布局的鼻祖table，除了一些要EDM中建议使用，现在很少用于布局了。以上是关于布局的为一个整体的介绍。让写页面能够游刃有余，还得将知识的理解用在敲的代码里。比如实现有自适应要求的两栏布局和三栏布局，你有几种方法呢？
发表评论