CSS-positioning

#CSS 框模型

CSS Box Model

element: 元素。实际内容，属性有 width 和 height，改变 padding 和 margin 不会影响实际内容（元素）的大小，仅会改变元素框的大小。
padding: 内边距。内边距呈现了元素的背景。背景应用于由内容和内边距、边框组成的区域。
border: 边框。内边距的边缘是边框。
margin: 外边距。外边距默认是透明的，因此不会遮挡其后的任何元素。值可以为负数。

#padding

按照上、右、下、左的顺序（顺时针）分别设置各边的内边距，或者使用单独的属性设置，各边均可以使用不同的单位或百分比值。

CSS 定义了一些规则，允许为外边距指定少于 4 个值：

缺少左，则使用右的值
缺少下，则使用上的值
缺少右，则使用上的值

百分数值是相对于其父元素的 width 计算的（不是相对于高度 height）。

1
2
3
4
5
6
7
8


h1 {padding: 10px 0.25em 2ex 20%;}
/* 等同于 */
h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

#border

每个边框有 3 个方面：宽度、样式，以及颜色。

样式是边框最重要的一个方面，因为如果没有样式（默认为 none），将根本没有边框。如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0。

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

#margin

margin 除了和 padding 一样可以使用不同单位和百分比之外，还可以使用 auto 自适应。

1
2
3
4
5
6
7
8
9


h1 {margin: 10px 0.25em 2ex 20%;}
/* 等同于 */
h1 {
  margin-top: 10px;
  margin-right: 0.25em;
  margin-bottom: 2ex;
  margin-left: 20%;
  }
/* 百分比同样是相对于父元素的 width */

#外边距合并

外边距会合并的情况

#CSS position 属性

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它没有被 “positioned”，一个 position 属性被设置为其他值的元素表示它被 “positioned”。
relative 表现的和 static 一样，除非你添加了一些额外的属性。在一个相对定位（position 属性的值为 relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
fixed 元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。top、 right、 bottom 和 left 属性都可用。
absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的 “positioned” 祖先元素。如果绝对定位（position 属性的值为 absolute）的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

#参考

W3CSchool-css-positioning

学习CSS布局