流动式布局html,HTML5CSS布局模型
在⽹页中，元素有三种布局模型：
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
流动模型
流动(Flow)是默认的⽹页布局模式。流动布局模型具有2个⽐较典型的特征：
css固定定位
1.块状元素都会在所处的包含元素内⾃上⽽下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
在流动模型下，内联元素都会在所处的包含元素内从左到右⽔平分布显⽰。(内联元素可不像块状元素那样占⼀⾏)，如a、span、em、strong等标签
⽰例：
流动模型
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
#box2{
width:100px;
height:100px;
}
box2
标题
⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段⽂本段。
box1
效果：
浮动模型
元素默认情况下是从上往下排列，如果想要并排显⽰，那么可以设置浮动
如：
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
两个div就会在左侧并排显⽰：
同理可以设置右侧，可以设置⼀个左⼀个右
层模型
层模型：类似PS中的图层，可以对每层进⾏单独处理，由于浏览器⼤⼩的活动性，限制了层模型的运⽤，不过在某些⽅⾯，还是很⽅便的
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--绝对定位
绝对定位，需要设置position:absolute，然后使⽤left、right、top、bottom属性相对于其最接近的⼀个具有定位属性的⽗包含块进⾏绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗⼝。
代码⽰例：
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
效果：
层模型--相对定位
既相对于之前位置的便宜量，需要设置position:relative，然后通过left、right、top、bottom属性确定元素在正常⽂档流中的偏移位置。
代码⽰例：
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
效果：
注意：
假如上⾯div后⾯有跟⼀个< span>的⽂字标签，那么在设置偏移后，仅仅是< div>标签进⾏了移动，⽂字还是在原来未发⽣偏移的位置，就把这个偏移看作是障眼法，假的偏移，实际位置还是在原来的位置，这样理解会简单点
层模型--固定定位
固定定位与绝对定位差不多，绝对定位是居于⽗包含块，如果不存在⽗包含块就居于浏览器，固定定位是直接居于浏览器
假如这么设定：
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
这样的效果是⽆论放⼤缩⼩浏览器，都会在浏览器的右下⾓

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。