今日学习:CSS中的定位和布局的学习和使用。学习时长:3h
CSS设置定位
float 属性定义元素在哪个方向浮动。
值 | 说明 (索引中有详细介绍) |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
left | 元素向左浮动。 |
right | 元素向右浮动。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
position 属性规定元素的定位类型。
值 | 说明 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
z-index 属性设置元素的堆叠顺序。
值 | 说明 |
auto | 默认。堆叠顺序与父元素相等。 |
number | 设置元素的堆叠顺序。 |
inherit | 规定应该从父元素继承 z-index 属性的值。 |
BFC:
overflow 属性规定当内容溢出元素框时发生的事情。
值 | 说明 |
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
实例:
多列布局
column-count属性指定某个元素应分为的列数。
column-gap的属性指定的列之间的差距。
column-rule属性设置列之间的宽度,样式和颜色。
column-span属性指定某个元素应该跨越多少列。
column-width属性指定列的宽度。
columns属性设置列宽和列数。
实例: