前端--关于背景、浮动和定位

原文链接： http://www.cnblogs.com/momox/p/5087663.html

背景。元素的背景显示区域在内容区和内边距区，并且边框是画在背景之上的。这就是说如果边框的样式是dotted之类的，则边框空隙之间是可以看到背景的。

可以设置背景的声明有：background-color、background-image、background-position、background-repeat、background-attachment、background-origin等等。

首先background-color，这个顾名思义就是设置一个背景纯色，这个背景纯色是放在背景最底层的，若是有个背景图案那么这个背景纯色是 放在背景图案下面的。它接受的值可以是关键字可以是16进制表示也可以是rgba表示。但是更常见的是为背景设置一个背景图片--background- image，背景图片接受url参数，这个参数可以是相对地址也可以是绝对地址。如果引入多个url，那么各个url之间要用逗号隔开，先引入的url总 是在前面。例如background-image：url（1.jpg），url（2.jpg）；background-color和 background-image一样，都可以应用于块级元素和行内元素。如果背景图片比较小，没有完全充满元素的内容区和内边距区域，这种情况下可以为 背景图片设置如何重复效果，相应的样式属性就是background-repeat。background-repeat可以取得值是repeat、 repeat-x、repeat-y、no-repeat。默认情况下，background-repeat的默认值是repeat，也就是在水平方向和 竖直方向上都重复。而重复一定是从某一个图像开始的，这个图像就叫做原图像，它指示出了如果没有repeat的时候这个背景图片所在的位置。它可能在元素 中的背景上下文中的任何位置。设置这个原图像位置的属性就是background-position。这个属性的取值可以是关键字（top、left、 right）可以是数值或者百分数，这些值都是相对于某个参照来实现的，默认情况下，这个参照就是上内边框的边界和左内边框的边界。要修改这个参照的边 界，就要使用background-origin这个属性，这个属性可以取三个关键字的值：content-box|border- box|padding-box，这三个关键字分别说明了背景的显示区域，是在内容区里面还是在内边距区域里面还是在边框区域里面。有了参照的边 界，background-position就可以根据自己的取值计算出原图像所在的位置，这个位置是根据偏移点到左和上的边界距离来定位的，这个偏移点 就是图像上用于计算到边界距离的那个点。在background-position的取值中，数值的偏移点是图像的左上角。关键字没有偏移点，它很简单的 把整个图像完整的放到左上角或者右下角之类的。而百分数的偏移点是不固定的，它的偏移点也是根据自己的百分数取值再计算出来的，也就是说百分数值同时应用 于元素和原图像。background-attachment就很简单了，它就是设置了背景图片会不会随着文档去滚动而已。

浮动。所有元素都可以浮动，一旦元素浮动了，他就会变成一个块级元素，并且它的宽度会尽可能的窄。它是使元素脱离文档流的两种方法之一，可以实现两 个块级元素的同行显示。就像许多其他地方说的一样，当一个元素浮动的时候，它其实是半脱离文档流的。这里的半脱离文档流可以这么理解，首先是脱离文档流， 这个是说这个浮动元素在包含快的内容区域中已经不占用空间了，后续元素和包含块的内容区感觉不到它的存在，所以后续元素会适当的占据它的位置或者父元素的 高度会发生变化。而这个“半”字是说这个浮动元素并不是像定位一样感觉不到其他元素的存在想放哪里放哪里，并且也不是对其他元素没有任何其他影响的。首先 这个浮动元素是不能超出其包含块的（包含块就是其最近的块级祖先元素），其次是其他元素对浮动元素的位置是有影响的（尤其体现在向上浮动的时候），最后浮 动元素和其他元素的内容是相互可以感觉到对方的存在的，所以是半脱离文档流。同时在一个包含块中的所有浮动元素又都是在同一个文档流中的，也就是彼此之间 不会覆盖，他们之间的padding、border、margin是相互之间都有效的并且margin不会合并，

浮动的样式声明为float，它只有两个可以产生作用的值：right、left。这两个值设置了元素水平移动的大方向，向左或者向右。但这并不是 说它在垂直方向上是不移动的，稍微动手写个例子就会发现总觉得浮动元素有往上跑的趋势，这就说明了浮动元素默认总是同时向上移动的，并且不能修改。这也是 浮动元素有些复杂的地方，因为浮动元素对待前面的元素和对待后面的元素是不一样的并且css规范对浮动元素的向上移动也做了很多限制，会有不同的情况。浮 动元素总是能感到前面的元素存在的（这也是半脱离文档流的原因之一），例如一个浮动元素上面有一个块级元素那么它是不会向上移动并覆盖那个块级元素的，相 反，后续块级元素感觉不到浮动的存在会移动过去并且被浮动元素覆盖掉,当然内容是不会覆盖掉的（半脱离文档流的原因之二）。所以浮动元素对于其前面的元素 表现的就好像inline-block一样。若前面没有任何元素，那么浮动元素则向上移动到包含块的内容区顶点为止（半脱离文档流的原因之三）。向上浮动 还需要注意一点就是浮动元素的顶端不能比之前所有浮动元素的顶端更高，

就像3向左浮动，1、2向右浮动，3的顶端不能比之前1、2浮动元素的顶端更高，所以即便3的上面还有空间他也只会和2对齐。

因为毕竟浮动是有些脱离文档流的，父元素的内容区是感觉不到它的存在的，所以父元素的高度可能会变短，而且浮动元素的部分会跑到父元素的外面造成不希望的结果。

这时候就需要用到清楚属性clear了。clear只能作用于块级元素，它的作用就是为了不让内容围绕在浮动元素周围，是使浮动元素对于设置了清楚 浮动的内容来说表现的像一个块级元素一样，是该内容换到浮动的下一行。这样就可以增加父元素的高度是浮动元素完全在父元素之中了。一般的写法是为父元素添 加一个样式 .cleafix::after {content:'.';display:block;visiable:hidden;overflow:hidden;height:0;clear:both;}

 

定位。定位相对于浮动就比较清晰了，它是使元素脱离文档流的两种方法之二，它的作用就是把元素放到你想放的位置上。在css中牵扯到位置定位的一般 就会有一个参照，position也不例外，它的取值有三个：relative|absolute|fixed，这三个中每一个都有一个定位参照物。应用 于定位参照物的配套属性有：top、right、bottom、left、z-index，这些属性如果没有设置position的情况下使用是不会起作 用的。每条属性的含义都是定位元素对应边相对于参照物的对应边的间隔距离，数值可以为负。不同的position不但它的参照物不同，还会有一些自己特有 的性质。

首先position：relative的定位方式，这种定位称为相对定位。当把一个元素设置为相对定位的时候，这个元素仍在在文档流中并没有脱离 文档流，父元素的内容区和其他元素还是像在正常文档流中一样可以感觉到他的存在，唯一的区别就是它的z-index层级比其他元素高了。这个时候，它原来 的位置就是定位参照物，设置的top、right等属性都是相对于原来位置的。当定位的元素相对于原来的位置偏移的时候，它会覆盖其相邻的元素，并且原来 的位置空间还是保留在那里不变的。这种定位一般是作为绝对定位的参照物使用。

position：absolute的定位方式。这种定位成为绝对定位，把一个元素设置为绝对定位的时候，这个元素就完全脱离了文档流，父元素和其 他子元素看不到它的存在，所以父元素可能height会变小，而其他元素会占据他原来的位置，同时自己的宽度也会变为内容宽度。这个时候不论他原来是什么 类型的元素，现在都是块级元素，这点和浮动是差不多的。而它的定位参照物就是第一个定位祖先元素或者根元素，所以要相对于父元素定位的话就把父元素设置为 relative。这种完全脱离文档流的元素是不会和浮动元素一样有所羁绊的，它想放哪里就放哪里。

position：fixed的定位方式和absolute的定位方式是差不多的，只是这个的参照物是浏览器窗口而已。

最后一点就是有时候定位元素没有设置宽或者高，而在定位的时候又同时设置了right、left或者top、bottom这种属性，那么这种情况下会把定位元素拉宽或者拉高。

转载于:https://www.cnblogs.com/momox/p/5087663.html