定位元素
《CSS设计指南(第3版)》第3章定位元素 读书笔记
盒模型就是浏览器为页面中的每个HTML元素生成矩形的盒子。这些盒子都要按照可见的版式模型在页面上排布。可见的页面版式由三个属性控制：dispaly属性、float属性、position属性。
-
dispaly：控制元素是堆叠（块元素）、并排(行内元素)、还是根本不在页面上出现。
-
float：属性提供控制的方式，以便把元素组成多栏布局
-
position：控制页面上元素间的位置关系
理解盒模型
每个元素都会在页面上生成一个盒子。因此，HTML是页面实际上是由一堆盒子组成的。
默认情况，每个盒子的边框不可见、背景也是透明的，所以不能直接看到页面中盒子的结构。可以使用Web Developer工具条，方便地显示盒子的边框和背景从另外一个角度来审视页面的构成。
-
每个元素盒子的属性：
-
外边距margin：设置盒子与相邻元素的间距
-
边框border：设置边框的宽窄、样式和颜色
-
内边距padding：设置盒子内容区与边框的间距
-
布局边距margin与padding小技巧：父子padding 兄弟margin
简写样式
CSS为外边距、边框和内边距分别规定了简写属性，通过一条声明就可以完成设定。每个简写声明中，属性值的顺序都是：上右下左，顺时针方向。
## 简写方式
# 1.margin和padding
{margin: 上 右 下 左;}
{padding: 上 右 下 左;}
# 2.border
# 1)全部边，全部3个属性
{border: 1px solid pink;}
# 2)全部边，1个属性
{border-style/width/color: 属性值}
# 3)一个边,一个属性
{border-上下左右-style/width/color: 属性值1 属性值2 属性值3}
盒子边框border
边框border有3个相关属性。
-
border-width
文本值thin、medium、thick
除百分比之外的任何正绝对值
-
border-style
none 不显示
solid 实线
dotted 点线
dashed 虚线
-
border-color
任意颜色值，RGB、RGBA、16进制颜色、颜色关键字
border的第四个属性border-radius并不影响盒模型的定位，放在第七章在介绍。
盒子内边距padding
内边距是盒子内容区与盒子边框之间的距离。
如果不设置padding，那么文字内容就会紧挨着元素的边框，看着不舒服。添加padding后，就会舒服很多，防止文本挨上它的边框。
由于内边距在盒子内部，所以它也会取得盒子的背景。
盒子外边距margin
与边框和内边距相比，盒子的外边距要复杂一些。
中和外边距和内边距
把下面的规则作为样式表的第一条规则
* {
margin: 0;
padding: 0;
}
这条规则会把所有元素默认的外边距和内边距都设置为零。然后，可以为那些真正需要外边距和内边距的元素再添加内、外边距。保证各个浏览器上获得一致的效果。
叠加外边距
**垂直方向上的外边距会叠加，这是需要知道的一件事。**
<style>
p {
margin-top: 50px;
margin-bottom: 30px;
}
</style>
<p >第一段</p>
<p >第二段</p>
<p>第三段</p>
第一段和第二段之间，第二段和第三段之间的外边距是：$50px$，而不是$50px+30px = 80px$。垂直情况下，较宽的外边距决定了两个元素最终离多远。这个过程就是外边距叠加。
注意，叠加只是垂直外边距，水平外边距不叠加。
对于水平相邻的元素，它们的水平间距是相邻外边距之和。
外边距的单位
根据经验，为文本元素设置外边距时通常需要混合使用不同的单位。比如：
-
段落左右使用$px$
保证文本始终与包含元素边界保持固定间距，不受字号大小影响。
不会让字号的变化影响到布局的宽度 -
段落上下使用$em$
而对于上下外边距，以$em$为单位可以让段间距随着字号的变化而变化。
p { font-size: 20pxp; margin: 0.75em 30px; }
盒子有多大
-
盒子宽度
元素的宽度是创建多栏布局的头等大事。
-
没有宽度的盒子
没有宽度，是没有显式地设置元素的width的属性。补充：元素和盒子代表同一个意思。
不设置块级盒子的宽度，属性默认值为auto，元素的宽度拓宽到与父元素同宽度。
没有宽度（没有显示设置width）宽度的元素始终会拓展到填满其父元素的宽度位置。添加内边距、边框和外边距，会导致内容宽度减少，减少量等于内边距、边框、外边距之和。
$盒子宽度=内容宽度+内边距宽度+边框宽度+外边距宽度$
**盒子宽度不变，内容宽度随着设置内边距、边框、外边距的变化而变化。**注意：margin是透明的，但是也会影响布局。
-
有宽度的盒子
为设定宽度的盒子添加内边距、边框和外边距，会导致盒子拓展的更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
这两种盒子所表现出来的完全不同的行为，对将来构建多栏布局具有重要的启示。因为在多栏布局中，每一栏都必须时刻维护自己的宽度。
-
CSS新增了一个box-sizing属性，通过它可以将宽度的盒子也设定成具有默认auto状态下的行为。但只有最新版本的浏览器才支持该属性。
浮动与清除
浮动和清除是用来组织页面布局一柄利剑，剑刃就是float和clear属性。浮动的元素脱离常规文档流，具有行内块元素的属性。
- 浮动的作用
- 实现文字围绕图片的效果（浮动元素不会压着文字）
- 可以让原来上下排列的元素，变成左右排列
浮动元素脱离了常规文档流后，原来后面的元素会在空间允许的情况下，向上提升。
浮动
CSS实现浮动的主要目的：实现文本围绕图片的效果。然而，这个属性也成为了创建多栏布局最简单的方式。
-
文本绕排文字效果
为了实现文本绕排图片的效果，必须先在标记中些图片，然后再写环绕它的文本。
<style> img { /*省略其他样式*/ float: left; } p { /*省略样式*/ } </style> <img src='' /> <p>... This para ...</p>浮动停留在哪里？：直到碰到父元素的内边界或者其他浮动元素的外边界。
**浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身默认没有** -
创建分栏
在上述内容的基础上，同时浮动文字(要给宽度添加宽度)和图片，创建了两个多栏。
如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间足够容纳它们，它们就会并列排在一行。
围住浮动元素的三种方法
浮动元素位于“文档流外部”。因而它已经不被包围在标记中的父元素之内了。它会被布局产生影响。
浮动元素脱离文档流，它的父元素看不见它了，因而也不会包围它。这种情况有时候并不是我们想要的。本节介绍三种为主浮动子元素的方法，这三种方法都需要掌握，这样才能根据需要选择最合适的一种。
为父元素添加overflow:hidden
第一个方法简单，缺点是不直观，即为父元素应用overflow:hidden，强制它包围浮动元素。
实际上，overflow:hidden声明真正的用途：防止包含元素被超大内容撑大，应用overflow：hidden后，包含元素依旧保持其设定的宽度，而超大盒子内容则会被容器剪切掉。
除此之外，overflow:hidden还有另外一个作用：它能可靠的迫使父元素包含其浮动的子元素。
同时浮动父元素
第二种促使父元素包围其浮动子元素的方案，是：让其父元素浮动起来。
浮动父元素后，不管其子元素是否浮动，都会紧紧地包围(也称收缩包裹)住它的子元素。记住，如果父元素浮动，需要给父元素设置宽度。
浮动父元素后，为了强制父元素后面的元素依然待在其下方保持不动，要给下方元素应用clear:both清楚元素，**被清除的元素不会被提升到浮动元素的旁边**。
clear
clear属性指定一个元素是否移动(清除浮动后)到在它之前的浮动元素下面。是清除浮动的一种方法
# clear 适用浮动元素和非浮动元素,属性值为
none: 默认值。允许两边都可以有浮动对象
left: 不允许左边有浮动对象
right: 不允许右边有浮动对象
both: 不允许左边和右边有浮动对象
在使用这个之前，请记住一句话：“float是魔鬼，会影响其他相邻元素；但clear是小白，只会影响自身，不会对其他相邻元素造成影响”（来自张鑫旭）。
添加非浮动的清除元素
没有父元素如何清除浮动
有时候，在清除某些浮动元素时，不一定正好有父元素作为容器来强制包围他们。
定位
静态定位
相对定位
绝对定位
固定定位
定位上下文
显示属性dispaly
所有元素都有postion属性，所有的元素也都有display属性。
# display属性值
none # 该元素及其所包围在其中的元素，都不会在页面中显示；占据的空间也被回收。
inline # 可以将块级转换转换为行内元素
block # 可以将行内元素转换为块级元素
与display属性相对的属性visibility。
visibility
visible # 默认值，显示元素
hidden # 隐藏该元素,但它仍然占据这个空间。和dispaly:none不同,该方法不会占用空间。