写在前面
微信最近出的小程序火的一塌糊涂，作为一个前端基础几乎为0的我来说，在看文档的时候遇到 CSS 中关于布局问题的一些困扰，在此记录下来，可能就是蛮浅的一些知识点儿，还是记下来，加深印象吧，不会说的太深。
关于布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
- 1、流动模型（Flow）
- 2、浮动模型 (Float)
- 3、层模型（Layer）
那这三个布局模型究竟是什么布局？
流动模型（一）
流动（Flow）是默认的网页布局模式，也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的，流动布局模型具有两个比较典型的特征：
第一点，块状元素都会在速出的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都是为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（什么是内联元素？）
<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>
比如代码块中的内联元素标签 a、span、em、strong 都是内联元素。
浮动模型（二）
如上面再 默认 Flow 流动模型中我们说的默认情况下块状元素都是很霸道的独占一行，如果我们想让两个块状元素并排显示该怎么办呢？嘿嘿嘿，我们设置元素浮动就可以解决这个问题啦，任何元素在默认情况下都是不能浮动的，但是可以用 CSS 定义为浮动，如div、p、table、img 等这些元素都可以被定义为浮动：
div{
border:2px red solid;
width:200px;
height:400px;
float:left;
}
像这样，元素 div 就会在一行居左显示了。或者你想把这两个元素并排居右显示float:right。或者一左一右
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
层模型（三）
层布局模型就像是PhotoShop 中非常流向的图层编辑动能一样，每个图层能够精确定位操作，但是在网页设计中，由于网页大小的活动性，层布局使用没有受到很大热盘管，但是在网页中局部使用层布局还是有很大方便之处的。CSS 定义了一组定位postioning属性来支持层布局模型。层布局模型有三种形式：
- 绝对定位(position:absolute)
- 相对定位(postion:relative)
- 固定定位(postion:fixed)
一、绝对定位
如果想为元素设置层模型中的绝对定位，需要设置 postion:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，既相对于浏览器窗口。
如下代码可以实现 div 元素相对于浏览器窗口向右移动100px，向下移动50px：
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
二、相对定位
如果想为元素设置层模型中的相对定位，需要设置 postion:relative，它通过 left、right、top、bottom属性确定元素在正常文档流中的便宜位置。相对定位完成的过程是首先按 static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动*。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
relative.png
什么叫做“偏移前的位置保留不动”呢？将代码改成：
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
relative1.png
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
三、固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<div id="div1"></div>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
...
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
** Relative与Absolute**组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
- 1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
- 2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
- 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
relative+absolute.png
小结
以上就是关于 CSS 布局模型的简单记录。
网友评论