给行内元素加上绝对定位之后,元素属性的变化

前几天对行内元素<span>进行positon:absolute操作发现margin-top居然生效了,心想难道给行内元素加上这个absolute和display浮动是一样的吗,于是找啊找啊,试啊试啊……

这是在W3C上面看见的对于positon:avsolute之后的变化

块级框?好像是和position有一丢丢相似,那就试吧:

这是没有加absolute的span

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="img"/>
</head>
<body>
<div style="border:1px solid green;margin:30px;height: 25px;position: relative">
    <img src="img/begin-clock.png"/>
    <span style="border:1px solid burlywood;height: 50px;width: 500px;">text</span>
</div>
</body>
</html>

显示效果:

当给span加上absolute之后height还有width居然生效了,哈哈哈(可以看看我以前对行内元素加上display的总结)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="img"/>
</head>
<body>
<div style="border:1px solid green;margin:30px;height: 25px;position: relative">
    <img src="img/begin-clock.png"/>
    <span style="border:1px solid burlywood;height: 50px;width: 500px;position: absolute">text</span>
</div>
</body>
</html>

效果:

时间: 2024-11-05 17:30:13

给行内元素加上绝对定位之后,元素属性的变化的相关文章

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性,例如: p标签 段落标签 h1~6标签 标题标签 hr标签   水平分割线标签 div标签 块级元素 2.行内标签 不会换行可以和其他的标签或文本在一行内显示

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块\行内元素,浮动,层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .

html块级元素与行内元素

我们经常使用的大多数HTML 元素,都被定义为块级元素或内联元素. 块元素,一般都从新行开始,它可以容纳内联元素和其他块元素 内联元素,一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素:还有一种特殊的元素. 可变元素,可变元素为根据上下文语境决定该元素为块元素或者内联元素. 常见的块元素有: 常见的行内元素有: 可变元素: 区别: 块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变

CSS 可视化设计模型(1)块框(Block boxex)和 行内框(Inline boxes)

包含块(Cotaining Blocks) 在CSS2.1中,很多 box 的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算.一般地,生成的 box 会充当其后代 box 的包含块:我们称盒为其后代"创建"了包含块.说"box的包含块"即是说"box所处的包含块",而不是box所产生的包含块. 每个box会被赋予一个相对于其包含块的位置,但它不会被局限在其包含块内:它有可能溢出. <div> &

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

2015-09-22 第四节课 CSS块级元素 行内元素 浮动 盒子模型 绝对定位、相当定位和固定定位

常见的块级元素和行内元素 一.块级元素 1.块级元素的特点: (1).默认显示在父标签的左上角. (2).块级元素默认占满一行(沾满整个文档流). 2.常见的块级元素: <p>.<h1-h6>.<ulli>.<olli>.<div>.<tabl>.<hr> 二.行内元素(内联元素) 1.行内元素的特点: (1).大小受到文字区域的影响,不受到width和height的影响. (2).行内元素不会单独占满一行. 2.常见的行

CSS中块级元素和行内元素

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

块级元素与行内元素(内联元素)的区别和联系

在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element).那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念.块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其 他的四方块,并可以呈现在页面上任何地方.默认情况下块元素,是独占一行的.常见的块元素:div.h1-h6标题.form(只能用来容纳其他块元

HTML 块级元素与行内元素

1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障