CSS的基本布局模型
CSS的基本布局模型有三种:Flow(流动)、Layer(层)、Float(浮动)。
Float模型(默认)
块状元素在所在处的包含元素内自上而下按顺序垂直延伸分布;
内联元素在所在处的包含元素内从左到右水平分布。
Float模型
float:left;
层模型
让html元素能在网页中精确定位。
层模型有三种形式:absolute、relative、fixed。
(1)绝对定位:设置position:absolute;将元素从文档流中拉出来,然后使用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,就相对于body。
(2)相对定位:设置position:relative;然后通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位的完成过程是先按照static(float)方式生成一个元素,然后相对于以前的元素移动,偏移前的位置不变(也就是说,后面的元素还是在原位置的后面)。
(3)固定定位:与绝对定位类似,但他的相对移动的坐标是视图(屏幕内的网页窗口),不熟文档流的影响,这与background-attachment:fixed;属性功能相同。
(4)通过relative和absolute结合定位
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0;
right:0;
left:0;
}<div id="box3">
<img src="https://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>效果如下: