CSS 布局模型有哪些? 下面本篇文章给大家介绍一下 CSS 的布局模型. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 三种基本网页布局模型:
流动模型(flow): 元素没有转换类型, 没有设置 float 的默认显示状态
浮动模型(float): 通过给元素设置 float 进行页面布局
层模型: 语法: position:static|absolute | relative |fixed
流动模型(默认状态下的模型)
流动 (Flow) 模型是默认的网页布局模式. 也就是说网页在默认状态下的 html 网页元素都是根据流动模型来分布网页内容的.
流动布局模型具有 2 个比较典型的特征:
第一点, 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布, 因为在默认状态下, 块状元素的宽度都为 100%. 实际上, 块状元素都会以行的形式占据位置.
(每一个便签都显示着自己本来默认的那个宽高)
第二点, 在流动模型下, 行内元素都会在所处的包含元素内从左到右水平分布显示.(内联元素可不像块状元素这么霸道独占一行)
浮动模型
任何元素在默认情况下是不能浮动的, 但可以用 CSS 定义为浮动
- div{
- float:left;
- }
- div{
- float:right;
- }
可以为不同的 div 设置不同的浮动方式来布局.
层模型
让元素在网页中精确定位, 像 Photoshop 中的图层一样对每个图层精确定位, 定义 position 属性
层模型三种形式:
1, 绝对定位(position:absolute)
2, 相对定位(position:relative)
3, 固定定位(position:fixed)
绝对定位: position:absolute --- 将元素从文档流中拖出, 使用 left,right,top,bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位, 如果不存在包含块, 则相对于 body 元素, 也就是浏览器窗口绝对定位
相对定位: position:relative --- 通过 left,right,top,bottom 属性确定元素在正常文档流中的偏移位置, 相对于以前的位置偏离, 移动的方向和幅度由 left,right,top,bottom 属性确定, 偏移前的位置保留不动
固定定位: position:fixed , 不会随浏览器滚动条滚动而滚动, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置, 不会受文档流动影响
relative 和 absolute 组合使用实现相对于其它元素进行定位
参照定位的元素必须是相对定位元素的前辈元素, 参照定位的元素必须加入 position:relative; 定位元素加入 position:absolute, 便可以使用 top,bottom,left,right 来进行偏移定位了.
实现 box2 相对于父元素 box1 定位:
- <div id="box1"><!-- 参照定位的元素 -->
- <div id="box2">相对参照元素进行定位</div><!-- 相对定位元素 -->
- </div>
- #box1{
- width:200px;
- height:200px;
- position:relative;
- }
- #box2{
- position:absolute;
- top:20px;
- left:30px;
- }
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18654.html