css读书笔记3：定位元素

定位元素
要掌握css技术，核心就是要掌握元素定位。

一般把下面这条规则作为所有css样式表的第一条，初始化所有元素的内边距和外边距都为0：

* {padding:0;margin:0;}

盒模型
浏览器为页面中的每个元素生成一个矩形盒子。作为该元素的容器。默认情况下，每个盒子的边框不可见，背景也是透明的，所以我们不能直接看到这些盒子。

元素盒子的3个属性：
边框（border），可以设置边框的宽窄、样式和颜色；
内边距（padding），盒子内容区与边框的间距；
外边距（margin），盒子与相邻元素的间距。
一个盒子有4条边，因此与边框、内边距、外边距相关的属性也各有4个：上（top）、右（right）、下（bottom）、左（left）。

盒子边框有3个相关属性：
宽度；
样式；
颜色。
在声明时，先后顺序没有关系，用空格分隔就可以：
p{border:1px solid #ccc;}

盒子内边距：
盒子内容区与盒子边框之间的距离。

盒子外边距：
垂直外边距——
2个垂直方向的外边距会重叠，也就是说，只有较宽的外边距决定2个元素的距离，较窄的那个不起作用。
水平外边距——
水平相邻的元素，它们的外边距是各自的外边距之和，也就是直接相加。

盒子有多大？
没有设置宽度的盒子——
没有设置宽度的元素，会扩展到填满其父元素的宽度。添加边框、内边距和外边距，会导致内容宽度减少，减少量等于边框、内边距和外边距之和。
设置了宽度的盒子——
为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

浮动与清除
使用float进行浮动的元素，会脱离文档流，也已经不被包含在父元素之内了。可以看成，在一张白纸上用剪子剪去了一块。
强迫父元素包围其浮动的子元素的3种方法：
1.为父元素应用overflow:hidden
2.浮动父元素
3.在父元素内容的末尾添加非浮动元素（清除元素）

定位
对元素盒子使用position属性，可以相对于它在常规文档流中的位置重新定位。
position属性有4个值：
static——
静态定位。默认值；
relative——
相对定位。相对它原来在文档流中的位置重新定位。除了这个元素自己挪动了一下外，这个元素原来占据的空间没有动，其他元素也没动。
p{position:relative;top:25px;left:30px;}
absolute——
绝对定位。绝对定位会把元素彻底从文档流中拿出来，再相对于body进行定位。元素之前占据的空间自然也被回收了。
同时，也可以自己选择相对于的定位上下文。任何想使用绝对定位元素的祖先元素都可以成为它的定位上下文，前提是给该元素设置为相对定位。
p{position:absolute;top:25px;left:30px;}
fixed——
固定定位。固定定位也完全移出了文档流。但固定定位元素是相对于视口的，它不随页面滚动而移动。通常用它来创建不随页面滚动的导航元素。

显示属性
display属性有3个值——
block；
inline；
none

背景
css背景相关属性：
background-color（设置背景颜色）
background-image（设置背景图片）
background-repeat（设置背景重复）
background-position（设置背景位置）
background-size（设置背景尺寸）
background-attachment（设置背景粘附）