您的当前位置:首页display&position_CSS/HTML
广告

display&position_CSS/HTML

2023-11-29 来源:酷申汽车网
display:block 将子对象作为块对象呈递。很多内联样式的效果,需要用到display。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]position 内容的尺寸根据布局尺寸确定对象的尺寸。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

小编还为您整理了以下内容,可能对您也有帮助:

css样式中定义display position这两个属性有什么区别?比如经常会用display:block;position:absolute;

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。

默认值:inline

继承性:no

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>)。

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

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

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

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

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

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

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值:static

继承性:no

JavaScript 语法:

object.style.position="absolute"

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

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

CSS中position属性的使用详解

position 这个属性决定了元素将如何定位。它的值大概有以下五种:

  每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示。

  position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。

  而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事:

  把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。

  该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 ,设置 absolute 之后发现它可以设置宽高了)。

  如果该元素是块级元素,元素的宽度由原来的 width: 100%(占据一行),变为了 auto。

  由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。

  下面来看一下插件的'参数用法示例:

  1. position:static

  所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。

  一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。

  CSS Code复制内容到剪贴板

  #P-1 {

  position:static;

  }

  2. position:relative

  如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】

  CSS Code复制内容到剪贴板

  #P-1 {

  position:relative;

  top:20px;

  left:-40px;

  }

  3. position:absolute

  当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。

  CSS Code复制内容到剪贴板

  #P-1a {

  position:absolute;

  top:0;

  rightright:0;

  width:200px;

  }

  4. position:relative + position:absolute

  如果我们给 P-1 设置 relative 定位,那么 P-1 内的所有元素都会相对 P-1 定位。如果给 P-1a 设置 absolute 定位,就可以把 P-1a 移动到 P-1 的右上方。

  CSS Code复制内容到剪贴板

  #P-1 {

  position:relative;

  }

#P-1a {

  position:absolute;

  top:0;

  rightright:0;

  width:200px;

  }

5. 两栏绝对定位

  现在就可以使用相对定位和绝对定位来做一个两栏布局了。

  CSS Code复制内容到剪贴板

  #P-1 {

  position:relative;

  }

#P-1a {

  position:absolute;

  top:0;

  rightright:0;

  width:200px;

  }

  #P-1b {

  position:absolute;

  top:0;

  left:0;

  width:200px;

  }

  6. 两栏绝对定位定高

  一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合,因为一般我们不知道元素中会有多少文本,或者将要使用的精确的字号。

  CSS Code复制内容到剪贴板

  #P-1 {

  position:relative;

  height:250px;

  }

  #P-1a {

  position:absolute;

  top:0;

  rightright:0;

  width:200px;

  }

  #P-1b {

  position:absolute;

  top:0;

  left:0;

  width:200px;

  }

CSS 中 position 和 display 的问题

拿例子说明最好
<body>
<div id="a">
<div id="b"></div>
</div>
</body>

#a{width:500px;height:500px;background:#ccc;}
#b{width:100px;height:100px;background:#f00;}

首先我们设置#a{position:relative;left:30px;top:50px;}
此时浏览效果为,#a距离浏览器 上边缘50px,左边缘30px

接着我们设置#b{position:absolute;left:20px;top:10px;}
此时浏览效果为#b是距离#a内部上边缘10px,左边缘10px,而不是相对于浏览器

一句话,如果要使用absolute,就必须在这个absolute的外面那个层设置relative
如刚刚这个例子的#a和#b这样

而relative不是就是相对于浏览器的边缘的,而是相对于包围他的那个层,不理解,咱继续
如<body>
<div id="out">
<div id="a"><div id="b"></div></div>
</div>
</body>
假如我们的#out此时在距离浏览器上方100px,距离浏览器左边300px
那么我们设置#a{position:relative;left:10px;top:20px;}
此时浏览器显示#a距离#out上边缘20px,左边缘10px

好了,差不多就这样了,自己必须写一下才能知道,看看肯定不行

至于display用a标签来看效果把
<a href="#" id="current">看看字体效果</a>

首先不设置display:block
#current{width:100px;height:300px;background:#f00}
那么浏览器显示a标签根本没有300px高度,只是字体的高度

那么我们设置display:block后
这个链接显示出一个高度300,宽度100的红色点击范围,

而display:none嘛,就是去掉那个display:block效果,

好了,写这么多了,希望自己多多用例子去操作一下,很快就会明白了

CSS 中 position 和 display 的问题

拿例子说明最好
<body>
<div id="a">
<div id="b"></div>
</div>
</body>

#a{width:500px;height:500px;background:#ccc;}
#b{width:100px;height:100px;background:#f00;}

首先我们设置#a{position:relative;left:30px;top:50px;}
此时浏览效果为,#a距离浏览器 上边缘50px,左边缘30px

接着我们设置#b{position:absolute;left:20px;top:10px;}
此时浏览效果为#b是距离#a内部上边缘10px,左边缘10px,而不是相对于浏览器

一句话,如果要使用absolute,就必须在这个absolute的外面那个层设置relative
如刚刚这个例子的#a和#b这样

而relative不是就是相对于浏览器的边缘的,而是相对于包围他的那个层,不理解,咱继续
如<body>
<div id="out">
<div id="a"><div id="b"></div></div>
</div>
</body>
假如我们的#out此时在距离浏览器上方100px,距离浏览器左边300px
那么我们设置#a{position:relative;left:10px;top:20px;}
此时浏览器显示#a距离#out上边缘20px,左边缘10px

好了,差不多就这样了,自己必须写一下才能知道,看看肯定不行

至于display用a标签来看效果把
<a href="#" id="current">看看字体效果</a>

首先不设置display:block
#current{width:100px;height:300px;background:#f00}
那么浏览器显示a标签根本没有300px高度,只是字体的高度

那么我们设置display:block后
这个链接显示出一个高度300,宽度100的红色点击范围,

而display:none嘛,就是去掉那个display:block效果,

好了,写这么多了,希望自己多多用例子去操作一下,很快就会明白了

css样式中定义display position这两个属性有什么区别

它们两个代表的意义都不一样,你觉得它们没有区别吗?
首先,display的意思是展示的状态,行级,块级,行内块,显示,隐藏
position是定位,相对,绝对,浮动定位,还有静态(默认状态)

css样式中定义display position这两个属性有什么区别

它们两个代表的意义都不一样,你觉得它们没有区别吗?
首先,display的意思是展示的状态,行级,块级,行内块,显示,隐藏
position是定位,相对,绝对,浮动定位,还有静态(默认状态)

CSS中position属性详解

根据W3C的解释为:position 属性规定元素的定位类型,把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

可能的值

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative:生成相对定位的元素,相对于其正常位置进行定位。

static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

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

我们用的最多的absolute和relative,接下来可以通过具体例子来更加直观地体现。

举例

一:绝对定位

position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body)。

绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序。

#box_relative {

position: absolute;

left: 30px;

top: 20px;

}

二:相对定位

position: relative;相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

#box_relative {

position: relative;

left: 30px;

top: 20px;

}

注意

position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。这时,即使故意设置display:inline; display:block都是无效的。

但是float在IE6下的双边距bug就是用display:inline; 来解决的。position:relative不会隐式改变display的类型。

css的position怎么使用

我们常常使用position来用于层级的绝对定位,那么怎样才能熟练的掌握用CSS来操作position这个属性呢?今天我们来和大家好好研究一下。

position语法与结构

position语法:

position : static absolute relative

position参数:

static : 无特殊定位,对象遵循HTML定位规则

absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框

relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

position说明:

设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确。

position实际用处

绝对定位position用于定位盒子对象,有时一个布局中几个小对象,不易用css padding、css margin进行相对定位,这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局,这个时候我们使用position绝对定位非常方便布局对象。

绝对定位position示范适用图、不规律布局,为即可利用position:absolute;position:relative进行绝对定位

绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。

绝对定位使用条件

position:absolute;position:relative绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。

.div{position:relative} 定义,通常最好再定义CSS宽度和CSS高度

.div-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px,距离父级上边距离为10px

.div-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px

对应HTML结构

<div class="div">

<div class="div-a"></div>

</div>这样就绝对定位了“div-a”在父级“div”盒子内。

注意的是,left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义。

position应用案例

这里为大家实例应用position绝对定位,我们设置一个最外层盒子css边框为红色,css width为400px,css height为200px,内部包含了2个盒子,为就用绝对定位这2个盒子,第一个盒子CSS命名为“div-a”,其宽度为100px,背景颜色为黑色,高度为100px,定位距离父级上为10px,距离左为10px;第二个盒子CSS类命名为“div-b”,其宽度和高度分别为50px,css背景颜色为蓝色,距离父级下距离为13px,距离父级右边为15px。

1、css代码如下

<style>

.div{ position:relative;width:400px;height:200px;

border:1px solid #000}

/* 定义父级position:relative 为就认为是绝对定位声明吧 */

.divc-a{ position:absolute;width:100px;height:100px;

left:10px;top:10px;background:#000}

/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */

.div-b{ position:absolute;width:50px;height:50px;

right:15px;bottom:13px;background:#00F}

/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */

</style>html代码片段

<div class="div">

<div class="div-a"></div>

<div class="div-b"></div>

</div>CSS的position属性的使用方法就这么多,需要的朋友可以保存一下,也请大家持续关注本站的其他更新。

相关阅读:

几种纯css制作的小功能实例

HTML里常用的链接标记注解

为什么有时候DIV CSS加载失败

酷申汽车网还为您提供以下相关内容希望对您有帮助:

...有什么区别?比如经常会用display:block;position:absolute;

display 属性规定元素应该生成的框的类型。说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML ...

CSS中position属性的使用详解

1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。CSS Code复制内容到剪贴板 P-...

CSS:position+居中

position 的四个属性:static、absolute、relative、fixed static:默认值 absolute:脱离文档结构,导致父元素坍塌;相对于最近的非static元素进行定位;使得inline元素被“块”化;使得元素已有的float失效。多个悬浮元素,后来者在...

css的position怎么使用

position语法与结构position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通...

css样式中定义display position这两个属性有什么区别

它们两个代表的意义都不一样,你觉得它们没有区别吗?首先,display的意思是展示的状态,行级,块级,行内块,显示,隐藏 position是定位,相对,绝对,浮动定位,还有静态(默认状态)...

CSS 中 position 和 display 的问题

那么我们设置#a{position:relative;left:10px;top:20px;} 此时浏览器显示#a距离#out上边缘20px,左边缘10px 好了,差不多就这样了,自己必须写一下才能知道,看看肯定不行 至于display用a标签来看效果把 &lt;a href="#"...

CSS中position属性详解

position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度...

css中display怎么做显示或隐藏

display:block可以显示一个块元素,或者display:inline是显示一个内联元素。display主要用的CSS样式有以下三个:display:block——显示为块级元素。display:inline——显示为内联元素。display:inline-block——显示为内联块元素...

如何理解CSS的display属性

第一部分:display:none none这个值表示此元素将不被显示。比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top