美文网首页
浮动与定位

浮动与定位

作者: 董二干先生 | 来源:发表于2019-05-11 09:51 被阅读0次

浮动

一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐 如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了
因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(non-positioned)块盒会竖直排列,就像浮动不存在一样。然而,接着(next to)浮动(盒)创建的当前及后续行盒会进行必要的缩短,为了给浮动(盒)的margin box让出空间

float属性最初只用于在成块的文本内浮动图像,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。但是现在它已成为在网页上创建多列布局的最常用工具之一。
浮动float属性有两个值,left和right,分别是左浮动和右浮动。

浮动的例子

当三个盒子浮动时,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。


浮动.PNG

当宽度不够时,放不下就会换行。


浮动2.PNG
被卡住的情况:如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。
浮动3.PNG

清除浮动

使用浮动后,会出现一些问题:

  • 对后续元素位置产生影响
  • 父容器高度计算出问题
清除浮动:

1.应用clear属性,clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
2.使用伪元素,给包含浮动元素的容器设置 clearfix。

.clearfix::after {
  content:'';
  display: block;
  clear: both;
}
用inline-block还是浮动
  • inline-block 优势: 不需要清除浮动,简单,在设置居中时更方便,适合子内容不多的元素水平排列
  • inline-block 劣势: 需要注意缝隙,注意对齐,ie8以下不能用
  • float优势: 兼容性好,没缝隙问题
  • float劣势: 需要清除浮动,适合稍大的布局

定位

定位允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

静态定位

position: static 默认值 默认的布局方式。

相对定位

相对定位就是“相对自己定位”。

position: relative 相对默认的布局位置进行定位。可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

.box {
  position: relative;
  top:20px;
  left:30px;
}

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

绝对定位

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。z-index的值为数值,数值大的覆盖数值低的。

固定定位

position: fixed 相对浏览器窗口进行定位。因此当滚动产生时,固定定位元素依然处于窗口的某个固定位置。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

相关文章

  • 浮动与定位

    主要内容: 浮动的介绍、清除浮动、各种定位、BFC以及外边距合并的介绍。 浮动 什么是浮动元素 浮动元素是floa...

  • 浮动与定位

    1 . 浮动的特征,影响##### 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定...

  • 浮动与定位

    浮动 当我们希望一个盒模型不是按HTML的标准从上到下排列,而是希望它可以从左到右或者环绕时可以借助浮动属性进行设...

  • 浮动与定位

    浮动 浮动元素的特性 浮动元素脱离文档流,遇到父级包含框或者相邻的浮动元素后停下来。 浮动元素在一排显示,没有空隙...

  • 浮动与定位

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 浮动元素的框可以向左或者向...

  • 浮动与定位

    浮动元素的特征 浮动元素的框可以左右移动(根据float属性的值而定),直到它的外边框碰到包含框或者另一个浮动元素...

  • 浮动与定位

    浮动 float属性最初只是用于浮动图像内的文本块,但是现在它已成为在网页上创建多列布局的最常用工具之一。当元素设...

  • 浮动与定位

    一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流是指元素在排列布局中所占用的位置。具体来说就是页面...

  • 浮动与定位

    1.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流是指由块状元素和内联元素按照其在 HTML 中的位...

  • 浮动与定位

    一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...

网友评论

      本文标题:浮动与定位

      本文链接:https://www.haomeiwen.com/subject/myizoqtx.html