display 的作用以及 position 的取值的区别_

小白萌萌哒

diaplay取值有：

block :设置元素以块样式显示

inline：设置元素以行内形式显示

inline-block：向行内元素一样显示，但内容向块级元素一样

none：隐藏元素，在页面中不占据空间

list-item：向块级一样显示，但添加列表样式

position的值：

absolute：绝对定位元素，相对于第一个祖先定位，可以脱离文档流

relative：相对定位元素，相对与自身定位，不可与脱离文档流，当进行定位时，所占位置不会消失，仍占据。

fixed：固定定位，绝对定位，相对浏览器窗口定位，脱离文档流，当浏览器滚动时，不会动，是固定的

static静态，没有定位

编辑于 2015-08-26 20:53:49 回复(2)

江小菜

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

table-row 此元素会作为一个表格行显示（类似 <tr>）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

table-column 此元素会作为一个单元格列显示（类似 <col>）

table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

table-caption 此元素会作为一个表格标题显示（类似 <caption>）

inherit 规定应该从父元素继承 display 属性的值。

发表于 2019-08-01 09:01:52 回复(0)

1Gram

display：none block inline inlineblock listline

position：relative相对于父级元素或兄弟元素定位，占据原来的坑；absolute绝对定位相对上一级非static元素定位，没有的话相对浏览器定位

发表于 2020-03-23 16:24:31 回复(0)

[咖啡]陈利浩

diaplay 还有table table-cell flex

发表于 2019-01-14 22:37:38 回复(1)

hahani

display 的值的作用：

1.block 象块类型元素一样显示。

2.inline 缺省值。象行内元素类型一样显示。

3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

4.list-item 象块类型元素一样显示，并添加样式列表标记。

position 的值的定位区别：

1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。

3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

5.inherit 规定从父元素继承 position 属性的值。

发表于 2015-07-27 12:19:12 回复(0)

Marcelo

发表于 2020-12-02 18:39:49 回复(0)

牛客好运好运🙏

display的取值：

1、block 设置元素以块级样式显示

2、inline 设置元素以行内形式显示

3、none 隐藏元素，不占据内存空间

4、inline-block 以行内样式显示，但是内容是以块级样式显示

5、list-item 以块级样式显示，但是添加了列表样式

position的取值：

1、absolute 绝对定位相对于除static以外的第一个祖先元素进行定位

2、fixed 固定定位相对于浏览器窗口进行定位（老IE不支持）

3、relative 相对定位相对于在文档流中的位置进行定位，也是使子元素参照自己进行定位

4、static 默认值没有定位

5、inherit 规定从父元素继承position的值

发表于 2020-10-18 20:00:02 回复(0)

伯爵213

<p>display为none 是从dom移出去该元素</p><p>visibility 是隐藏该元素，不移出dom</p>

发表于 2020-09-11 15:42:16 回复(0)

东东dong

display：

block像块类元素一样显示；inline：像行内元素一样展示；ｉｎｌｉｎｅ－ｂｌｏｃｋ：像行内元素一样显示，但内容像块类元素一样显示；list-item像块类元素一眼显示，并添加样式列表标记

position：

absolute：生成绝对定位的元素，相对于ｓｔａｔｉｃ定位以外的第一个祖先元素进行定位；

fixed：生成固定定位的元素，相对于浏览器窗口进行定位；

relative：生成相对定位的元素，相对于其再普通流中的位置进行定位；

static：默认值，没有定位

inherit：规定从父元素position属性的值

发表于 2020-07-24 15:37:25 回复(0)

milie

<p>position= fixed static absolute relative sticky</p>

display=inline-block block none inline list-item

编辑于 2020-05-13 11:40:03 回复(0)

Twincos

inline-block，block ，inline

发表于 2019-11-12 08:53:09 回复(0)

小鱼酱酱酱~

粘性定位sticky

发表于 2019-10-18 00:01:27 回复(0)

😆😆😆211

position:sticky 粘性定位

发表于 2019-09-30 18:51:09 回复(0)

sunnyww

相对定位相对于元素自己

绝对定位：1如果父亲是静态定位那么子元素以浏览器为基准 2如果父亲是绝对or相对定位那么子元素就以父元素为基准

发表于 2019-09-12 00:34:53 回复(0)

崔丝塔娜橘子君

relative相对于原来的位置进行定位

absolute 相对于第一个非static的父元素进行定位

编辑于 2019-09-04 15:46:30 回复(0)

太阳煮的酒

display的取值：

block：块类型元素显示

inline：行内元素显示

inline-block：行内元素显示内容块类型元素显示

none：隐藏显示不占据空间

position的取值：

static：默认

relative：相对定位相对于自身定位不脱离文档流

absolute：绝对定位相对于其第一个父元素定位脱离文档流

fixed：固定定位相对于浏览器窗口定位

发表于 2019-06-06 21:36:55 回复(0)

Ronychen

回家

发表于 2019-04-24 16:49:18 回复(0)

木函啦啦啦

打算

发表于 2019-04-08 17:34:22 回复(0)

梭梭苏苏

一个元素的 containing block 是由其最近的 position 为 absolute / relative / fixed 的祖先元素决定的。

如果没有找到，则为 initial containing block。需要注意 initial containing block 并不是所谓的以 <body> 或是 <html> 定位的。

对这个 initial containing block 规范前文有描述：

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin ; ...

这就是说，initial containing block 是以整个 canvas (渲染内容的空间, http://www.w3.org/TR/CSS2/intro.ht ml#canvas ) 的坐标原点(左上)为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。

所以平时说的 position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素，或在找不到时基于根元素定位，这后面一半是错误的。

综上，子元素的绝对定位是相对于最近的position为absolute/relative/fixed祖先元素,找不到是就相对于初始块（initial containing block）定位。

发表于 2016-07-26 15:24:41 回复(0)

坏小孩。。爱糖糖

relative 相对于元素自己原本位于文档流的位置定位 absolute 相对于元素已定位的父级元素（不能是static）定位

发表于 2015-09-26 10:48:12 回复(0)

display 的作用以及 position 的取值的区别

问题信息

热门推荐

相关试题