第3章 定位元素
学习盒模型，页面版式主要由三个属性控制：
position属性，控制元素位置关系。
display属性，控制元素堆叠，并排，还是不在页面上出现。
float属性，提供控制的方式，以便把元素组成多栏布局。
3.1 理解盒模型
HTML实际就是一堆盒子组成的。
每个元素盒子属性：
- 边框(border),可以设置边框宽窄，样式，颜色。
- 内边距(padding),可以设置盒子内容区与边框距离。
- 外边距(margin),可以设置盒子与相邻元素的间距。
简写样式
CSS 为边框、内边距和外边距分别规定了简写属性，让你通过一条声明就可以完成设定。在每
个简写声明中，属性值的顺序都是上、右、下、左。想象一下顺时针旋转就记住了。举个例子
吧，如果要设定盒子的外边距，不用简写属性就得这样写：
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
使用简写属性，则可以简写为这样：
{margin:5px 10px 12px 8px;}
注意，4 个值之间有空格，但不能是其他分隔符（比如逗号之类的）。甚至，你都不用把4 值全都写出来——如果哪个值没有写，那就使用对边的值。
{margin:12px 10px 6px;}
对这个例子来说，由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即10px。
而在下面的例子中：
{margin:12px 10px;}
只写了两个值，上和右，因此缺少的下和左就会被设定为12px 和10px。最后，如果你只写一个值：
{margin:12px;}
那么4 个边都取这个值。使用这种简写属性，不能绕开上和右，只给下和左设定值，即使上和右都是零也不行。绕不开怎么办？如果它们真是零的话，那就写0 呗，比如：
{margin:0 0 2px 4px;}
另外，每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你想选择哪条边，以及那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。
1. 全部3 个属性，全部4 条边
{border:2px dashed red;}
2. 1 个属性，全部4 条边
{border-style:dashed;}
3. 1 个属性，1 条边
{border-left-style:dashed;}
混合使用这三种粒度的简写属性达成设计目标是很常见的。比如说吧，我想为盒子的上边和下边添加4 像素宽的红色边框，为左边添加1 像素宽的红色边框，而右边没有边框。可以这样写：
{border:4px solid red;} /* 先给4 条边设置相同的样式 /
{border-left-width:1px;} / 修改左边框宽度 /
{border-right:none;} / 移除右边框 */
类似地，其他属性也都有这三级粒度，例如padding 和border-radius 等。
3.1.1 盒子边框
- 宽度(border-width),可以使用thin,medium,thick等，也可以使用百分比和正数。
- 样式(border-style),有none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset等。
- 颜色(border-color),可以使用任意颜色值。
简写： p { border: 3px solid red; }
* 推荐下面规则作为样式表的第一天规则：* { margin:0;padding:0; }
* 叠加外边距，两个元素相邻，外边距以最大的为主。
外边距单位，px这些绝对值不会变，如果用em则会随着字体变大而变大。
3.2 盒子有多大
1.没有宽度的盒子，指的是不设置宽度的盒子，默认auto是父元素宽度。
2.有宽度的盒子，设定宽度，增加内外边距，整体宽度与box-sizing有关。
3.3 浮动与清除
影响浮动的因素还有很多，推荐读者看一看Eric Meyer 的那本Cascading Style Sheets2.0 Programmer’s Reference（2006，McGraw-Hill Osborne Media）。
3.3.1 浮动
CSS设计float的目的是实现文本绕排图片的效果。
此属性称为创建多栏布局最简单方式。
1.文本绕排图片
代码：图片脱离文档流了，p不认为在图片后面了，直接来到body左上角，但是文本内容会绕开浮动的图片，但浮动非图片元素时要给宽度，否则后果难以预料。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
width: 200px;
height: 120px;
float: left;
margin: 0 4px 4px 0;
}
p {
margin: 0;
border: 2px solid red;
}
</style>
</head>
<body>
<img src="./img/moon.jpg" alt="" />
<p>
8月20日凌晨
今年首个“超级月亮”现身
全国多地都能观赏
从天文学的角度称为
“近地点满月”
此时，月亮看起来特别大
在中国人的观念里
月亮不只是
围绕地球旋转的星球
还寄托了无限幻想与思念
“明月照高楼，流光正徘徊”
忙碌的火车站洒满皎洁月光
如同披上一层轻纱
静谧又朦胧
迎接南来北往的旅客
“露从今夜白，月是故乡明”
华灯初上，五彩斑斓
无数次重逢和离别在站台上演
乡愁是一轮明月
也是一张车票.
</p>
</body>
</html>2.创建分栏
在此基础上多用一次float属性，给p宽度200px，左浮动。
3.3.2 围住浮动元素三种方法
原始效果：
图片浮动后，footer被提上来了，紧挨section.
方法一：为父元素添加overflow:hidden
强制父元素包围浮动元素。
1.overflow真正的用途防止包含元素被超大内容撑大，包含元素还是原宽度，超大内容会被剪切掉。
2.能可靠的迫使父元素包含其浮动子元素。
方法二：同时浮动父元素
也让父元素浮动起来。
浮动section以后，不管子元素是否浮动，他都会仅仅包围住子元素。
宽度还是浏览器同宽，强制footer呆在下发，应用clear:left,被清除元素
无法提升到浮动元素旁边。
方法三：添加非浮动的清除元素。
clearfix规则：
.clearfix::after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
没有父元素如何清除
清除某些浮动元素，正好没有父元素作为容器包围他们。
最简单方法给浮动元素应用clear:both.
第二张图片右侧文字太少，导致第三张图片不是我们想要的。
解决方法：给段落增加clearfix清除两侧浮动。
