【CSS布局】定位详解（一）

来源：互联网发布：淘宝联盟推广编辑：程序博客网时间：2024/06/05 16:55

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，

阅读全文

0 0