CSS 定位属性（Positioning）-KeepStudy

CSS 定位属性（Positioning）

| 属性 | 说明 | CSS |
|-----|-----|-----|
| float | 规定框是否应该浮动 | 1 |
| display | 规定元素应该生成的框的类型 | 1 |
| position | 规定元素的定位类型 | 2 |
| left | 设置定位元素左外边距边界与其包含块左边界之间的偏移 | 2 |
| right | 设置定位元素右外边距边界与其包含块右边界之间的偏移 | 2 |
| bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移 | 2 |
| top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移 | 2 |
| clear | 规定元素的哪一侧不允许其他浮动元素 | 1 |
| clip | 剪裁绝对定位元素 | 2 |
| cursor | 规定要显示的光标的类型（形状） | 2 |
| overflow | 规定当内容溢出元素框时发生的事情 | 2 |
| visibility | 规定元素是否可见 | 2 |
| z-index | 设置元素的堆叠顺序 | 2 |

## float 属性
- JavaScript 语法：object.style.cssFloat="left"
- 属性值
    - left：元素向左浮动。
    - right：元素向右浮动。
    - none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
    - inherit：规定应该从父元素继承 float 属性的值。

## display 属性
- JavaScript 语法：	object.style.display="inline"
- 属性值
    - none：此元素不会被显示。
    - block：此元素将显示为块级元素，此元素前后会带有换行符。
    - inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
    - inline-block：行内块元素。（CSS2.1 新增的值）
    - list-item：此元素会作为列表显示。
    - run-in：此元素会根据上下文作为块级元素或内联元素显示。
    - compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
    - marker：CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
    - table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
    - inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
    - table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
    - table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。
    - table-footer-group：此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
    - flow-root：生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。
    - table-row：此元素会作为一个表格行显示（类似 <tr>）。
    - table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
    - table-column：此元素会作为一个单元格列显示（类似 <col>）
    - table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    - table-caption：此元素会作为一个表格标题显示（类似 <caption>）
    - inherit：规定应该从父元素继承 display 属性的值。
- 实例
```css
/* 预设值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* 生成盒子 */
display: none;
display: contents;
/* 两个值的语法格式 */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* 其他值 */
display: table;
display: table-row; /* 所有表格元素都有一个等价于 CSS  display 属性的值 */
display: list-item;
/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
```
## position 属性
- 属性值
    - absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    - fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    - relative： 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
    - static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
    - sticky：粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
    - inherit：规定应该从父元素继承 position 属性的值。
    - initial：设置该属性为默认值。

## left、right、top、bottom 属性
- 属性值
    - auto：默认值。通过浏览器计算底部的位置。
    - %：设置以包含元素的百分比计的底边位置。可使用负值。
    - length：使用 px、cm 等单位设置元素的底边位置。可使用负值。
    - inherit：规定应该从父元素继承 bottom 属性的值。

## clear 属性
- 属性值
    - left：在左侧不允许浮动元素。
    - right：在右侧不允许浮动元素。
    - both：在左右两侧均不允许浮动元素。
    - none：默认值。允许浮动元素出现在两侧。
    - inherit：规定应该从父元素继承 clear 属性的值。

## clip 属性
- JavaScript 语法:object.style.clip="rect(0px,50px,50px,0px)"
- 属性值
    - shape：设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
    - auto：默认值。不应用任何剪裁。
    - inherit：规定应该从父元素继承 clip 属性的值

## cursor 属性
- JavaScript 语法：object.style.cursor="crosshair"
- 属性值
    - url：需使用的自定义光标的 URL。
    - default：默认光标（通常是一个箭头）
    - auto：默认。浏览器设置的光标。
    - crosshair：光标呈现为十字线。
    - pointer：光标呈现为指示链接的指针（一只手）
    - move：此光标指示某对象可被移动。
    - e-resize：此光标指示矩形框的边缘可被向右（东）移动。
    - ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）。
    - nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）。
    - n-resize：此光标指示矩形框的边缘可被向上（北）移动。
    - se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）。
    - sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
    - s-resize：此光标指示矩形框的边缘可被向下移动（南）。
    - w-resize：此光标指示矩形框的边缘可被向左移动（西）。
    - text：此光标指示文本。
    - wait：此光标指示程序正忙（通常是一只表或沙漏）。
    - help：此光标指示可用的帮助（通常是一个问号或一个气球）。

## overflow 属性
- 属性值
    - visible：默认值。内容不会被修剪，会呈现在元素框之外。
    - hidden：内容会被修剪，并且其余内容是不可见的。
    - scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    - auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    - inherit：规定应该从父元素继承 overflow 属性的值。

## visibility 属性
- JavaScript 语法：	object.style.visibility="hidden"
- 属性值
    - visible：默认值。元素是可见的。
    - hidden：元素是不可见的。
    - collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
    - inherit：规定应该从父元素继承 visibility 属性的值。

## z-index 属性
- JavaScript 语法：	object.style.zIndex="1"
- 属性值
    - auto：默认。堆叠顺序与父元素相等。
    - number：设置元素的堆叠顺序。
    - inherit：规定应该从父元素继承 z-index 属性的值。

顶部

CSS属性

目录

相关推荐