.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
發佈於 2018-07-02
从这一篇开始,将要介绍 CSS 中最重要的两个知识 - 浮动和定位。 前面几篇关于 CSS 的知识,只是讲解了一个元素作为一个个体时的样式,从这篇布局内容开始,将要介绍多个元素放在一起,从总体角度确定每个元素的位置。 布局分类:
我们已经学会了如何操纵盒子的大小及其周围的空间,在默认情况下,页面元素的流方式:
浮动允许您将块级元素并排放置而不是彼此叠加。它允许我们构建各种布局,包括侧边栏,多列页面,网格和杂志样式的文章,文本在图像周围流动等。 在现代网站中,浮动技术已经被 Flexbox 布局所取代,但并不意味我们不需要清楚这一知识,之前的十多年来,浮动一直是建站的基础,所以很可能会在不经意间遇见它。
浮动会改变默认文档流。也就是说,不会再按照默认文档流来布局元素了。浮动的元素会从正常文档流中取出来(即浮动元素的父容器不再包含该浮动元素),然后始终与其父容器的左侧或右侧对齐。也会尽可能的在父容器内向上浮动。而浮动元素之后的第一个非浮动元素则会黏在浮动元素之前的最后一个非浮动元素之下。
块级元素可以使用 float: left; 或 float: right; 来左右对齐,使用 auto-margins 中间对齐。而行内元素使用 text-align 属性来对齐。
如果都是左浮动,则按照在文档流中的先后顺序,从左向右水平排列。如果都是右浮动,则按照在文档流中的先后顺序,从右向左水平排列。
我们使用 clear 属性来清除浮动,有3个可选值:
我们知道,浮动元素已经从正常文档流中移除,父容器已经不包含浮动元素了,可能会造成一些布局问题,这时可能需要父容器仍然容纳浮动元素,我们就需要一些技巧。
2. 让父元素也浮动。(这种做法需要额外设置父容器宽度) 3. 使用::after 在所有浮动元素之后添加一个空的元素 content: “”;,并设置 clear: both; 和 display: block; 常规做法是添加一个名为 clearfix 类,使得需要让父容器仍然容纳浮动元素时,给该元素添加类即可。
.clearfix::after { content: ""; clear: both; display: block; } |
---|
实际使用过程中,使父容器仍然容纳浮动元素最常用第三种方式,前两种方式的原理是触发 BFC(Block Formatting Context)布局规则。
让我们看看有哪些盒子:
BFC(Block formatting context) 直译为”块级格式化上下文”。它是一个独立的渲染区域,只有 Block-level box 参与, 它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。
overflow: hidden 最常使用的地方有三处:
虽然之后我们会谈论 Flexbox 和 Grid,但我们仍需要讨论下 position 属性。他是古老布局的基础。
position 属性有四个可用值:
我们分别谈论一下他们的用处。
static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被 “positioned”,一个 position 属性被设置为其他值的元素表示它会被 “positioned”。
.static { position: static; } |
---|
relative 表现的和 static 一样,除非你添加了一些额外的属性。 在一个相对定位(position属性的值为relative)的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变。
.relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } |
---|
一个固定定位(position 属性的值为 fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom 和 left 属性都可用。 一个固定定位元素会脱离正常文档流。
.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; } |
---|
absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的 “positioned” 祖先元素。如果绝对定位(position 属性的值为 absolute)的元素没有 “positioned” 祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个 “positioned” 元素是指 position 值不是 static 的元素。
.relative { position: relative; width: 600px; height: 400px; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; } |
---|
z-index 属性允许我们控制页面上元素的深度。