CSS(Cascading Style Sheets)即层叠样式,用于对Web页面进行布局修饰。要用好CSS必须对其定位原理了然于心。本篇从position、float、z-index、vertical-align四个属性进行介绍,着重说明每个标签与其父子元素之间的关系,以此加强对CSS定位的理解。
元素定位(Positioning)
position
共有四个值 默认值为static,没有继承性
- absolute 绝对定位,从内向外查找父亲元素,找到第一个position设置为(fixed、relative、inherit)的父元素,以该父元素的元素空间为参考背景进行定位。通过left top right bottom设置具体位置。在某一父元素中绝对定位,有时候可以追溯到到
<body>
标签。 - fixed 生成绝对定位元素,相对于浏览器窗口进行定位,通过left、top、right、bottom进行定位
- relative 生成相对定位元素,相对于其正常位置进行定位。left:20 会向元素左侧添加20个像素。 文档流中保留该元素原始的位置所占用的空间。
- static 默认值,没有定位。元素出现在正常文档流中(忽略top、bottom、left、right或者z-index设置)
- inherit 规定应该从父元素继承Position属性的值。
注: 绝对定位的元素 独立于文档流外,坐落在自己的独立层。
float
浮动元素 元素将脱离文档流布局进行定位,浮动到相应的位置,该元素所覆盖的 相邻其他元素的内容 将会被挪到周围 填充。 clear属性可以停止当前元素浮动,并取消后续元素的浮动,直到新的元素有float属性
当有float元素存在是 其父元素的 高度 不会变,甚至为0,为了让其正常我们可以将父元素中最底部添加
<div style="clear: both"></div>
clear掉float,那么body的高度就可以确定了
vertical-align
用于inline 或者 table中的单元标签 初始值为 baseline
baseline默认。元素放置在父元素的基线上。sub垂直对齐文本的下标。super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。text-bottom把元素的底端与父元素字体的底端对齐。length %使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。inherit规定应该从父元素继承 vertical-align 属性的值。
z-index
默认值为 auto, 值大的在值小的上面,更接近与用户
参考:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats,