山地人

课16.CSS的盒子模型

山地人
山地人
2021-05-13

Float 浮动布局

float属性用来创建浮动元素,有两个属性left让元素向左浮动,right让元素产生向右浮动,none取消元素浮动。

float: left|right|none;

使用float属性,可以让元素脱离文档流,让元素浮动到文档之上,其占据文档流的高度变为0,所以底下橙色元素贴到了紫色浮动元素的底部。

  • AB都设置了左浮动,所以会往左侧浮动并相互排列。
  • C为右浮动,所以浮动到了右侧。

但是元素内部的文字依然会收到浮动元素的影响,所以被挤到了中间。

清除浮动

使用clear可以清除浮动元素。让后面的普通元素不再占据浮动元素底部的空间。

clear: none|left|right|both;

我们先设置clear:both;将左右两侧的浮动效果都清理掉,看看会有什么样的效果。

使用clear:both;后,float:leftfloat:right元素的影响都会清理掉,因此普通元素二,就不会再次占据浮动元素底部的高度。

说到这,你可能还是会有疑惑。那clear:leftclear:rightclear:both到底有什么区别?

这里我把上面的例子稍微做了一下改动,去除了有浮动元素,只留下了一个左侧浮动元素。然后把clear改成了right。你应该可以发现现在的普通样式二有一次占据了A底部的空间。

clear:right对左浮动元素的清理失败了,你可以做一下下面几个步骤,等你做完这几步,就会对clear有更为深刻的认识。

  • clear的值分别改成leftboth,观察普通样式二占据位置的变化
  • A设置为float:right,再次修改clear的值,体会清除浮动的机制。

绝对布局

position: absolute;

指定元素位置属性为absolute后,再次调整 下面的A、B、C、D四个元素使用了绝对布局的方式固定到了父级元素可视区域的四个角上,但元素的位置还是会随着你拖动滚动条而改变位置。

拖动右侧滚动条,观察四个元素位置的变化。

固定布局

position: fixed;

和绝对布局不同,固定布局会将元素固定到屏幕的固定位置,因此也就得名为固定布局。当使用固定布局后,拖动滚动条不会改变固定元素的位置。

Relative-Absolute布局

position:relative;

绝对布局可以配合相对布局一起使用,使用绝对布局的元素,会寻找最近一层的使用了position:relative;的元素作为布局的父元素。

你可以为.banner添加一个position:relative;,看看四个紫色元素的位置发生了什么变化。

.banner{
...
position:relative;
}

课后练习

学习了这么多CSS的排版知识,那么这次留给你的小练习是:

利用所学的排版知识,排版一份你觉得还不错的HTML小报。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。