乐趣区

关于css:CSS浮动与定位详细解析

1. 文档流

文档即一个网页,文档流处在网页的最底层,它示意的是页面中的一个地位,咱们所创立的元素默认都处在文档流当中。通过 浮动和定位 能够脱离文档流。
元素在文档流中的特点

  • 块元素:

1. 块元素会在文档流中独占一行,块元素会至上而下排列。
2. 块元素在文档流中的宽度默认值为 auto(主动),即为父元素的 100%。
3. 块元素在文档流中的高度默认为内容高度,即被内容撑开,没有内容就为 0,有内容的话,内容多少它就多少。

  • 内联元素:

1. 内联元素在文档流中只占本身大小,默认从左向右排列。如果一行中无奈包容所有内联元素,则会换行,持续自左向右排列。
2. 在文档流中,内联元素的宽和高都默认被内容撑开。

2. 浮动 -float 属性

float 属性能够使元素浮动,从而脱离文档流。
可选值:

  • none:默认值,元素默认在文档流中排列。
  • right:元素立刻脱离文档流,向页面的右侧浮动。
  • left:元素立刻脱离文档流,向页面的左侧浮动。

特点介绍:

  • 当一个元素设置浮动后(非 none 值);元素立刻脱离文档流,元素脱离文档流后,它本来的地位将会失去,后边的元素会立刻顶上。
  • 元素浮动后,会尽量向页面的右上(right)或左上(left)浮动,直到遇到父元素的边框或者其余浮动元素,而且在浮动元素的额上边本来有一个块元素,该块元素没有浮动,浮动元素不会超过该块元素,即不会越界上一行。
  • 浮动元素也不会超过它的上一个浮动元素,最多和上一个同一行(地位不够会转行),不会因为上上个浮动元素后还有块地位,因容不下上个浮动元素而空出,却能容下本浮动元素,而跨上一个取上上个边上。

  • 浮动的元素不会笼罩文字,文字会盘绕在元素的四周。所以咱们能够通过设置浮动来做一个文字的成果,就文字所在的块元素不必固定大小,让文字自在撑开。
  • 个别没有设置固定宽度和高度的块元素,其宽度是默认占满一行(父元素的 100%),然而被设置浮动后,它的宽度和高度都会默认被内容撑开。没有内容即为 0.
  • 内联元素脱离文档流后会变成块元素。

3. 高度塌陷问题

在文档流中,父元素的高度是默认(未固定高度即默认)被子元素撑开的。子元素的高度也就是父元素的高度。
然而有一种状况,当子元素设置浮动后,其齐全脱离文档流。这时会导致子元素无奈撑起父元素的高度(子元素脱离文档流后不会保有原来空间),于是父元素高度塌陷。父元素高度塌陷后,其余元素就会向上挪动,导致页面凌乱。

如图:
原来未设置浮动:

设置浮动后:显著父元素边框重合了,父元素高度塌陷

4. 高度塌陷问题解决方案

在开发中要避免出现高度塌陷问题,咱们尽管能够把父元素高度写死以防止高度塌陷问题,然而当父元素高度被写死后,父元素的高度就不能主动适应子元素的高度了。所以不举荐将父元素高度写死。
解决办法:开启 BFC
原理:依据 W3C 规范,页面中的元素都有一个暗藏的属性 Block formatting context(块级格式化背景),简称 BFC。该属性能够关上或者敞开,默认状况下是敞开的,咱们要关上它(无奈间接关上)。
当开启元素的 BFC 当前,元素将会具备如下的个性:

  • 1. 父元素的垂直外边距不会和子元素重叠
  • 2. 开启 BFC 的元素不会被浮动元素所笼罩
  • 3. 开启 BFC 的元素能够蕴含浮动的子元素

开启 BFC 的办法:

  • 设置元素浮动;
       应用该办法开启 BFC,尽管能够撑开父元素,然而会使父元素宽度失落(因为父元素浮动),而且会导致下边的元素上移,无奈解决问题。
  • 设置元素相对定位;

(前面具体说;)

  • 设置元素 display 为 inline-block;
       能够解决问题,然而会使父元素宽度失落。不举荐应用。
  • 将元素的 overflow 设置为一个非 visible 的值。(举荐应用,应用 hidden 副作用最小)

扩大: 在 ie6 及以下不反对 BFC,要兼容 ie6 就要应用另一个 ie6 这些版本的暗藏属性 —–hasLayout;与 BFC 相似,最好的开启办法就是设置 zoom 值,zoom 示意放大元素(只被 ie 反对),值为一就是不放大,其余设置 width 值也能够开启。zoom:1;

5. 革除浮动

元素浮动会导致下一个元素向上移,即下一个元素收到了浮动元素的影响,而革除浮动就是打消上一个元素浮动后对本人的影响。革除元素应用 clear 属性
可选值:
none:默认值;不革除浮动;
left:革除向左侧浮动元素对以后元素的影响,革除浮动后,上一个元素尽管向左侧浮动,本人自身元素也不会向上挪动。
right:革除向右浮动元素对以后元素的影响。
both:革除两侧浮动元素对以后元素的影响(实质就是革除对本人影响最大的哪个浮动元素的影响)。

6. 解决高度塌陷最终计划(应用 clear)

1. 增加 div

间接在父元素里的最开端的地位增加一个 div,这个 div 没有设置浮动,就靠这个 div 来撑开父元素,而后对这个 div 设置革除浮动,clear:both;, 就解决了父元素高度塌陷。这个办法根本没有副作用(w3c 举荐)。全浏览器兼容
然而这种办法会向页面中增加多余构造,一个空 div。

2. 应用 css 中的 after 伪类

通过 after 伪类向父元素的开端增加一个空白的块元素,而后对其革除浮动,应用它来解决父元素高度塌陷。和间接增加 div 原理一样,但不会增加多余的构造,十分举荐应用。

.clearfix:after{/* 当前这个 clearfix 类能够增加到任何高度塌陷的元素中解决问题 */
content:"";/* 增加一个空元素 */
display:block;/* 使其变为块元素 */
clear:both;/* 革除两侧浮动 */
}
/* 更加优良的版本(即思考了高度塌陷又思考了父子元素垂直外边距重叠问题)*/
.clearfix:before,.clearfix:after{
content:"";/* 增加一个空元素 */
display:table;/* 使其变为块元素 */
clear:both;/* 革除两侧浮动 */
}
.clearfix{zoom:1;}

毛病:ie6 中不反对 after 伪类,须要 hasLayout 来解决,要兼容 ie6 还要写个.clearfix{zoom:1;}

7. 定位

定位:将指定的元素摆放到页面的任意地位。也就是说通过定位就能任意的摆放元素。

如何设置?
——通过 position 属性来设置元素的定位。
可选值:

  • static:默认值,没有开启定位。
  • relative:开启元素的绝对定位。
  • absolute:开启元素的相对定位。
  • fixed:开启元素的固定定位。(非凡的相对定位)

1. 绝对定位

(输出多个 div 的技巧:div.box$*3——一回车就能生成 class 值 box1 到 box3 的三个 div)
当 position 属性设置为 relative 值后 position:relative; 既是开启了绝对定位。
留神:

  • 但开启了元素的绝对定位后,不设置偏移量元素是不会有变动的。

所以要设置几个无关偏移量的值:
left:元素绝对于其定位地位的左侧偏移量。
right:元素绝对于其定位地位的右侧偏移量。
top:元素绝对于其定位地位的上边的偏移量。
bottom:元素绝对于其定位地位的下边的偏移量。
(通常就只应用两个偏移量就能对元素进行定位,一个程度方向的,一个垂直方向的)

position:relative;
left:200px;
top:200px;
  • 绝对定位是绝对于元素在文档流中原来的地位进行的定位。
  • 绝对定位不会脱离文档流,只是地位变动,原来的地位也还留着。
  • 绝对定位会使元素晋升一个层级,即与其余元素重合后会笼罩对方。
  • 绝对定位不会扭转元素的性质,块还是块,内联还是内联

2. 相对定位

当 position 属性设置了 absolute 值后就开启了相对定位。position:absolute;
相对定位特点:

  • 开启相对定位,会使元素脱离文档流。
  • 开启相对定位后,如果不设置偏移量(其实有默认偏移量,对于真正原点,就是他原来地位的值),元素不会偏移地位,只是下一个元素会因为本元素脱离文档流而往上走。
  • 相对定位是绝对与它最近的先人元素(必须也开启了定位)进行定位的。(个别状况 下咱们开启了子元素的相对定位,都会开启父元素的绝对定位)

如果所有的先人元素都没有开启定位,则会绝对于浏览器的窗口进行定位,例如:左上角的原点(left:0px,top:0px)就是页面窗口的左上角。

  • 相对定位会使元素晋升一个层级。
  • 相对定位会扭转元素的性质(因为脱离文档流的起因),内联元素变成块元素,而后块元素默认被内容撑开。

3. 固定定位

当 position 属性设置 fixed 值后就开启了固定定位。position:fixed;
固定定位也是一种相对定位,它的绝大多数特点都和相对定位一样。
非凡点(不一样的中央):

  • 固定定位仅仅绝对于页面窗口进行定位,不论父元素开没开启定位。
  • 固定定位会固定在窗口的某个地位,不会随着窗口滚动条滚动隐没。

例子:一些视频,随着你往下翻网页始终保留视频窗口播放,还有就是一些广告始终在你背后,你挪动它也动,始终在原来屏幕哪个地位。
ie6 不反对,固定定位在那就和相对定位一样。

8. 层级

1. 层级常识

  • 如果定位的元素层级一样(都被设置定位,但没有设置层级),则上面的元素盖住下面的元素。
  • 通过 z -index 属性能够设置元素的层级,通过向 z -index 设置一个正整数作为值,该值就会作为以后元素的层级,层级越高越优先显示。(没有设置的默认低于设置了的)
  • 对于没有开启定位的元素不能设置层级,设置了也没用。
  • 父元素的层级再高也不会盖住子元素,即子元素永远在父元素下面。

2. 通明设置

opacity:用来设置元素背景的通明属性。
它须要一个 0~1 之间的数值来设置透明度。
opacity:1;不通明;opacity:0;全透明
即:0:全透明;
1:不通明;
0.5:半透明;
留神 :opacity 在 ie8 及以下不被反对。
所以 ie8 及以下要用其余属性代替;
filter 滤镜属性,语法如下:
filter:alpha(opacity=50);半透明
须要一个 0~100 的值;
0:全透明,100 不通明,50 半透明。

本文章只总结了最罕用的办法属性,但足够应用与上手,更多属性可查看文档。
感激浏览,心愿有大佬能指出问题!

退出移动版