设计师学习HTML/CSS之路-12
不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!
第12章 CSS布局模型
12-1 css布局模型
网页中，css的三种布局模型分别是：
- 流动模型（flow）
- 浮动模型（float）
- 层模型（layer）
12-2 流动flow模型（一）
流动（flow）是默认的网页布局模式。
流动布局模型的典型特征：
块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认情况下，块状元素的宽度都是100%。
如：
image
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>
12-3 流动flow模型（二）
在流动模式下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素不像块状元素独占一行）
如：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
p{border:1px solid red;}
</style>
</head>
<body>
<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>
<p>aljsdlfjaljksdlf</p>
</body>
</html>
12-4 浮动float模型
为两个块状元素定义浮动（float），可以实现两个块状元素在同一行显示。
如下代码可以实现两个div元素一行显示：
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
image
如果想设置元素右浮动可以输入：
div{float:right;}
也可以单独设置两个元素：
#div1{float:left;}
#div2{float:right;}
12-5 层模型
层模型（layer）类似于ps和sketch的图层。层模型可以对每个图层做精确定位操作。
层模型有三种形式：
- 绝对定位(position:absolute)
- 相对定位(position:relative)
- 固定定位(position:fixed)(类似于App中的导航栏或者吸低按钮)
12-6 层模型-绝对定位absolute
如想为元素设置层模型中的绝对定位，需要设置position: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>
image
12-7 层模型-相对定位relative
如想为元素设置相对定位，需要设置position:relative,同样通过使用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>
12-8 固定定位fixed
如想为元素设置固定定位，需设置position:fixed;,与background-attachment:fixed;一样,固定定位的元素始终会位于浏览器窗口内视图的某个位置，不会受文档滚动影响。
以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
12-9 relative与absolute组合使用
如想某元素相对其他元素定位，需遵循以下规范：
- 参照定位的元素必须是相对定位元素的父元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
上段代码表示box1是box2的父元素。
- 参照定位元素必须加入
position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
- 定位元素需加入
position:absolute;,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
如：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
#box3{border:1px red solid;}
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:100%;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id="box3">
<div id="box4">阿斯蒂芬捡垃圾删掉了看风景333333333</div>
</div>
</body>
</html>
补充：宽度也可以用百分比显示：width:100%;
