元素有三种布局模型:
1、流动模型(Flow):默认就是流动模型。
- 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。
- 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
2、浮动模型 (Float):float:left; 左浮动。任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。
3、层模型(Layer):让html元素在网页中精确定位,图层的感觉。层模型有三种定位方法,position,绝对的 相对的 固定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模型</title>
<style type="text/css">
/* 浮动模型 float */
div {
border: 2px red solid;
width: 200px;
height: 300px;
}
#div1{float:left;}
#div2{float:left;}
</style>
</head>
<body>
<h2>流动模型</h2>
<p>默认就是流动模型</p>
<hr><br>
<h2>浮动模型</h2>
<p>浮动模型的 div </p>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
<hr><br><br>
<h2>层模型</h2>
<p>
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
<br><br>
层模型有三种形式:
<br>
1、绝对定位(position: absolute)
<br>
2、相对定位(position: relative)
<br>
3、固定定位(position: fixed)
</p>
</body>
</html>
效果:
为啥层模型是在右边而不是在下面???
来自:html5+css3:https://www.imooc.com/learn/9