CSS基础

一：Position

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置
定位元素（positioned element）position 为 relative, absolute, fixed 或 sticky 
相对定位元素（relatively positioned element）position:relative 
绝对定位元素（absolutely positioned element）position:absolute/fixed
粘性定位元素（stickily positioned element）position:sticky

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局
如果父级没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 
如果父级设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。 

This value creates a new stacking context when the value of z-index is not auto

fixed:相对于浏览器窗口定位 This value always creates a new stacking context. When an ancestor has the transform, perspective, or filter property set to something other than none, that ancestor is used as the container instead of the viewport

relative:相对于本来的位置定位 Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements;This value creates a new stacking context when the value of z-index is not auto

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）



If both top and bottom are specified (technically, not auto), top wins. 如果top和bottom同时设定 以top为准
If both left and right are specified, left wins 如果left,right同时设定 以left为准

sticky : 设定TRBL之中一个值生效，祖先有不能有overflow:hidden，不超过这个值相当于position:relative 当超过这个值后,相当于position:fixed

此外还有三个值（全局属性）：

inherit：继承

initial：默认值

unset：是继承属性的就继承，不是就默认值

二：盒模型
margin border padding content


标准模式：有DOCTYPE，实际宽度为width+padding-L&R+border-L&R 高度 height+padding-T&B+border-T&B
混合模式：宽，高css中设定(当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。)

三：块级元素和行内元素
块级元素：排斥与其他元素一行，可以设定宽高，一般是容器，div,p,h1~h6
行内元素：不可以设置宽高，可以与其他行内元素位于同一行。高度一般由字体大小决定，宽度由内容控制。a span em strong i等

不过 可以用display属性来改变 display:block 块级 display:inline 行内 display:inline-block 又是行内又能设置宽高

四：background

background是简写属性，用来集中设置各种背景属性

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

下面的一个或多个值，可以按任意顺序放置：

<attachment>

参看 background-attachment

background-attachment:

scroll:此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）

fixed:当页面的其余部分滚动时，背景图像不会移动

local:此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框

<box>

参看 background-clip

background-clip: 设置元素的背景是否延伸到边框下面

border-box背景延伸到边框外沿（但是在边框之下）。 padding-box边框下面没有背景，即背景延伸到内边距外沿。 content-box背景裁剪到内容区 ( content-box) 外沿。 text背景被裁剪为文字的前景色。
<background-color>

参看 background-color

background-color:<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color> transparent

<bg-image>

参看 background-image

可以设置多背景(多张图片)，也能设置无背景（none），先设置的图片层级高

<position>

See background-position

background-position:

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

<repeat-style>

参看 background-repeat

background-repeat

repeat:图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

no-repeat:不重复

repeat-x:x轴重复

repeat-y:y轴重复

space 中间有space重复

<bg-size>参看  background-size. 这个属性的定义必须在  <position> 之后, 并使用 '/' 符号分隔。