CSS布局 - 显示属性

显示属性

display属性指定是否/如何显示元素,block或 inline

display属性设置为 来 隐藏元素none,不占据之前的空间

visibility:hidden;还隐藏一个元素,占据之前的空间。

位置属性

position属性指定用于元素的定位方法的类型。

有五种不同的位置值：

• static:静态
• relative:相对
• fixed:固定
• absolute:绝对
• sticky:粘性

z-index属性

z-index属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）

溢出

overflow属性具有以下值：

• visible- 默认。溢出不会被剪裁。内容呈现在元素框之外
• hidden- 溢出部分被剪掉，其余内容将不可见
• scroll- 溢出部分被剪掉，并添加滚动条以查看其余内容
• auto- 与 类似scroll，但仅在必要时添加滚动条

指定是否仅水平overflow-x或overflow-y垂直（或两者）更改内容的溢出：

• overflow-x指定如何处理内容的左/右边缘。
• overflow-y指定如何处理内容的顶部/底部边缘。

浮动且清晰

float属性指定元素应如何浮动。

float属性可以具有以下值之一：

• left- 元素浮动到其容器的左侧
• right- 元素浮动到其容器的右侧
• none- 元素不浮动（将仅显示在文本中出现的位置）。这是默认的
• inherit- 元素继承其父元素的浮点值

clear属性指定哪些元素可以浮动在已清除元素旁边以及在哪一侧

clear属性可以具有以下值之一：

• none- 元素不会被推到左或右浮动元素下方。这是默认的
• left- 元素被推到左浮动元素下方
• right- 元素被推到右浮动元素下方
• both- 元素被推到左右浮动元素下方
• inherit- 该元素从其父元素继承明确的值

 水平和垂直对齐

         水平居中:margin: auto;

         居中对齐文本:text-align: center;

          垂直居中 - 使用行高:   使用line-height具有等于该height属性的值