CSS结构布局重点概念——浮动与定位

浮动float

因为块级元素是独占一行的,但是有时候我们需要将多个块级元素显示在一行,这个时候就需要使用到浮动效果。

清除浮动clear

浮动的效果就是将元素漂浮在一行,如果从某个元素开始,不希望它浮动了,就需要清楚该元素的浮动

  • none-允许两面都浮动。 这是默认值
  • 左侧-左侧不允许有浮动元素
  • 右侧-右侧不允许使用浮动元素
  • 两者-左侧或右侧均不允许使用浮动元素
  • 继承-元素继承其父元素的清除值

等宽等高浮动盒子布局案例

如果要将浮动等宽度盒子的高度设置为相同的,可以将他们的高度设置为固定的高度
但是,这不是很灵活。 如果可以保证盒子中始终有相同数量的内容,那是可以的。 但是很多时候,内容是不一样的。 如果您在手机上尝试上述示例,则会看到第二个框的内容将显示在框的外部。 这是CSS3 Flexbox派上用场的地方-因为它可以自动拉伸框使其与最长的框一样长:

Position定位

静态定位

静态位置是定位的默认属性==
任何页面元素的默认值都是静态的。 静态表示该元素将像往常一样适合页面。 显式指定static的情况很少见,可用于摆脱任何继承的位置值。

静态定位的元素不受top,bottom,left和right属性的影响。

相对位置

相对定位的重要特点是会占据原有的位置
相对定位不会更改页面的结构,不会使得元素脱离文档标准流,相对定位的元素还在默认的图层中
相对位置的定位是相对于自身定义移动的的

将元素的位置设置为相对,但不指定其他任何属性(例如top,bottom,left或right),则不会对元素的位置产生特殊影响。 但是指定一个bottom属性为bottom:20px; 会将元素与其正常位置相比向上移动20像素。

绝对位置

绝对定位会使得元素脱离标准流,也就是他占据的位置,别人仍然能够使用,使得看起来有多个图层

此值使您可以将元素精确放置在想要放置的位置。 定位属性top,bottom,left和right用于确定确切位置。
这些元素相对于最后一个父元素放置。 如果没有父元素,则将这些元素设置为相对于页面本身,即滚动时它与页面一起移动。

固定位置

固定位置的特点是固定在浏览器的一个位置就不会有任何的移动
固定位置元素是相对于视口或浏览器窗口本身而不是相对于父元素或其同级元素放置的。
滚动窗口时,视口不会改变,因此固定位置的元素将保持在滚动页面时的位置。

重叠定位

当我们进行大量定位时,可能会出现元素相互重叠的情况。 因此,在重叠的情况下,哪个元素会出现在另一个元素的顶部?

z-index定义元素的堆叠顺序。 具有较高z-index的元素将始终位于具有较低z-index的元素之上。 元素可以具有正或负的z-index值。

决定元素的层叠显示顺序

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注