css之positon：absolute 对行内元素的影响

最新推荐文章于 2021-10-21 23:15:00 发布
最新推荐文章于 2021-10-21 23:15:00 发布
阅读量522 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44706152/article/details/110358379
版权

positon：absolute 可以使行内元素拥有宽高
相当于变成了行内行内块元素！！！！

今天给span 标签添加after伪元素发现附了宽高不显示，必须content有值才显示。深入研究了一下。

铁甲小宝爱编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位的特殊特性，【绝对定位会使行内元素具有行内元素的特点，行内元素的宽高由内容决定】
weixin_43837268的博客
10-09 381
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位.
定位和浮动转化问题 position: absolute；和float浮动可以直接变成行内块元素
Guo_Elleny的博客
03-14 905
隐藏知识点 1.position: absolute;可以将元素转化为block属性 例子如下 : span是行内元素，正常情况下加宽高属性是不会起作用 html <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com
css position 和 块级/行内元素解释
weixin_34336292的博客
03-18 294
一、position 属性： static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的...
【css】absolute实现元素定位
richest_qi的博客
08-05 514
文章目录absolute+margin定位图标图标文本对齐 absolute+margin 定位图标 <body> <span class="icon-box">三十而已<i class="icon-hot"></i></span> </body> .icon-hot{ background:url(./imgs/hot.png) no-repeat center; display:inline-block
深入理解CSS中的vertical-align属性和基线,行内元素布局
weixin_43936704的博客
07-27 1303
开门见山 推荐好文 vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。 基线 要了解vertical-align属性，必须懂得基线，怎么理解基线呢？ 1、我们写网页是在一个矩形的显示屏上，经常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的基线对齐。 2、各种字体、图片、行内html元素等可展示的内容都有各自的基线，要想知道具体内容的基线我们可以找一个简单的参照物：小写
CSS中的position:relative;的作用示例介绍
12-10
然后，对`div#sub`应用`position:absolute;`，并使用`right:10px; top:10px;`来确定相对于`div#demo`的位置。 以下是一个简化的示例： ```css #demo { position: relative; } #sub { position: absolute; ...
前端界面进行自适应布局之positon属性使用
09-25
此外，外部`div`使用`position:absolute`和百分比宽度及高度，确保它们始终占据屏幕的相应部分。这样，无论屏幕大小如何变化，布局都能保持相对一致的结构。 在实际应用中，结合使用`position`与其他CSS属性（如`...
css中position属性使用详解
09-25
positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么...
css sprite
12-19
css精灵图生成软件，自动生成，并给出小图的backgrount-positon的值。比较好用
CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）
热门推荐
我不是水哥
12-10 2万+
在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工...
行内元素和块元素的水平和垂直居中（div与css）
Zhang_Yi_Lan的博客
01-29 2898
 行内元素：  水平居中：text-align:center 块元素：  水平居中： ①margin:0 auto 例： .father{     width:200px;     height:200px;     background-color:red;     } .son{     width:100px;     height:100px;     b
行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·
weixin_30491641的博客
07-01 2159
行内元素进行绝对定位后会变成块级元素· position:absolute; <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* *{ padding: 0; ...
CSS使用绝对定位absolute对Html元素布局的实案
我是Sinlion
09-01 1787
在之前一篇文章已经详细的介绍了相对定位relative，有了相对就有绝对，今天详细的研究下绝对定位absolute，这也是在html布局的时候使用频率最高的几个css属性。 对于相对定位，配合top、left等属性，是以父元素为参考进行的定位偏移的，那么绝对定位又是如何定义的呢？ 首先建立一个基本的布局模型，一个父元素拥有三个子元素的结构： <!DOCTYPE html> <ht...
【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
weixin_34236497的博客
12-11 344
postion:absolute 跳出文本流，不是行内元素，设置宽高有效，我的理解。 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话：position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position：absolute、 float中任意一个，都会让元素以display:i...
行内元素和块级元素&块级元素与行内元素之间的转换
Queen-Shir的博客
11-15 6509
1、行内元素&块级元素 行内元素：指该元素标记的内容不不会对现在的结构造成影响。 块级元素：单独占据一行。 常见的行内元素： 内联元素(inline element)： a - 锚点，abbr - 缩写，acronym - 首字，b - 粗体(不推荐)，bdo - bidi override，big - 大字体，br - 换行，cite - 引用，code - 计算
CSS浮动与定位、块级元素与内联元素
橘猫吃不胖的博客
10-21 1867
CSS浮动与定位、块级元素与内联元素 1 DIV的概念 2 页面布局步骤 3 CSS的定位机制 4 浮动属性 4.1 浮动的含义 4.2 浮动的实现 4.3 常见的浮动布局 4.4 清除浮动 5 定位属性position 5.1 相对定位relative 5.2 绝对定位absolute、fixed 6 visibility、display 7 块级元素与内联元素 7.1 块级元素 7.2 内联元素 7.2.1 内联盒模型 7.2.2 幽灵空白节点
明确指定+两种自动将行内元素变成块级元素的方法
流落凡间敲代码的博客
10-25 6632
1.给行内元素设置  position:absolute/fixted 2.让行内元素浮动，即float 此时便可以对其设置width,heght了，相当于display:inline-block --------------------------------------------------------------------------------------------------
一旦给元素设置position，元素将会自动转成inline-block
Rance_King的博客
09-20 324
如题
positon:absolute
最新发布
05-18
"position:absolute" 是 CSS 属性，它可以让一个元素的位置相对于其最近的非 static 定位祖先元素进行定位。这意味着，如果一个元素的父元素具有 "position: relative" 或 "position: absolute" 的属性，那么这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值