为什么span设置float浮动或position:absolute定位后可以设置其width height宽高？

最新推荐文章于 2022-05-25 10:38:10 发布
最新推荐文章于 2022-05-25 10:38:10 发布
阅读量4k 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhixiangcopy/article/details/82681959
版权

span元素为行级元素，其display默认属性为：inline；
当将span设置浮动float：left/right;或position:absolute;后就可以设置宽高，
原因是：span设置float：left/right;或position:absolute;后内部会将display属性变成：inline-block行级块元素；
这里写图片描述
效果是这样的：
这里写图片描述

wangzhixiangcopy
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
未知宽高元素绝对定位居中产生的一系列问题和思考
我不是水哥
09-05 1407
  在使用绝对定位实现未知宽高元素的时候产生了一些问题，具体问题是什么，把下面的代码拷到本地一起来玩吧。 <div class="father"> <div class="son clearfix"> <!-- 可能这是一张图片 --> <i></i> <!--
【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
weixin_34236497的博客
12-11 337
postion:absolute 跳出文本流，不是行内元素，设置宽高有效，我的理解。 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话：position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position：absolute、 float中任意一个，都会让元素以display:i...
css之浮动
weixin_30359021的博客
10-02 144
标准文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 标准流的微观现象 空白折叠现象 图片也是一样，图片和表单元素可以看成是文字 高矮不齐，底边对齐 自动换行，一行写不下，换行写 块级元素和行内元素 块级元素 霸占一行，不能与...
html怎么使span float,恼火啊，span不是内联元素吗？加了个float：right，怎么就成块元...
weixin_42376118的博客
06-16 170
该楼层疑似违规已被系统折叠隐藏此楼查看此楼能帮看下代码吗？body {margin:0;}#all{width:960px;}#head{width:960px;height:27px;background-color:#999999;}#head a{float:left;text-decoration:none;color:white;background-color:#999999;pad...
div的float:left与span标签
abcdcba_的博客
02-18 2683
我是div span span 上述代码中div是float:left，span没有float:left，但是span标签还是显示在div标签的右边，而不是被div标签覆盖。这是因为span标签是一个行内元素不是块级元素。 ​接下来附上它们两个 的区别： div与span区别 区别在于，div​是一个块级(block-level)元素，它包围
浮动与清除浮动
qq_57215961的博客
04-14 450
浮动的出现主要是解决水平布局的问题 对于块标签来说，
html之CSS设计（float定位和position定位详细分析）
01-20
它可以设置为`static`（默认值，遵循文档流）、`relative`（相对定位，相对于其正常位置移动）、`absolute`（绝对定位，相对于最近的非`static`祖先元素定位）和`fixed`（固定定位，相对于浏览器窗口定位）。...
第十三课 css元素、定位与浮动-011
08-03
2. **相对定位**（Relative Positioning）：元素相对于其原来在正常文档流中的位置偏移，`position`属性设置为`relative`。元素仍然占据原有的空间，可以通过`left`、`right`、`top`和`bottom`调整位置。 3. **绝对...
前端开发与实践- DIV与SPAN.pptx
10-29
`position` 属性可以设置为 `static`、`absolute`、`relative` 或 `fixed`，分别对应不同的定位方式。 - `static`：默认值，元素按照正常的文档流排列。 - `absolute`：元素相对于最近的非 `static` 定位的祖先元素...
lab1-resume:267965
03-30
6. 定位：`position`属性（static, relative, absolute, fixed）用于精确定位元素。 7. CSS选择器：根据元素名、类、ID、属性等选择要应用样式的元素。 8. CSS3新特性：如阴影、渐变、过渡、动画、响应式设计（媒体...
span与float结合
weixin_44543129的博客
01-28 1028
                                                            span与float结合 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：DW 作者：李继金 撰写时间：2019年1月28日   ~~~~~~~...
css------float样式属性
My_liuying0901
05-20 627
HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。设置元素浮动方向， 该属性有多个值： 代码为了后期维护，需要缩进换行，换行后在HTML中，浏览器默认将多个空格视为一个空格，为了消除空格，可以使用浮动float： 代码和显示效果如下： &...
一次*定 vue3的 路由 + 菜单 + tabs
QIWEIscrm的博客
05-25 3875
做一个管理后台，首先要设置路由，然后配置菜单（有时候还需要导航），再来一个动态tabs，最后加上权限判断。 这个是不是有点繁琐？尤其是路由的设置和菜单的配置，是不是很雷同？那么能不能简单一点呢？如果可以实现设置一次就全部搞定的话，那么是不会很香呢？ 我们可以简单封装一下，实现这个愿望。 定义一个结构 我们可以参考 vue-router 的设置 和 el-menu 的参数，设置一个适合我们需求的结构： ./router.js import { createRouter } from '@n...
css知识总结
qq_67263268的博客
03-10 98
float浮动 造成标签“浮动”，影响“文档流”的空间 float:left;“左浮动” float:right;”右浮动” 有bug加overflow hidden 对span元素添加一个float:left，span元素已经“块”化 border-radius圆角 vertical-align: middle居中适用于图片 jpg像素图，色彩表现丰富 常用来做产品图banner png支持透明 图标banner gif支持透明 支持动图 图标 webp支持有损压缩与无损压缩 支持压缩 同质量的图...
span 加上float:left的必要性
飞翔的熊blabla
11-14 3057
Akame ga Kill! 4.82 代码是这样的 p里的 分数icon和 分数是同一行 但是span 图片却顶到了div的顶部 怎么解决 #mangalist .list li .manga_text p span { float: left; } 这样就好了
css position属性定位详解
weixin_45111619的博客
12-07 339
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: absolute position: relative position: fixed position: static position: inherit static static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。 inherit inherit 值如同其他 css 属性的 inher
HTML中span中文字下移,解决css给span加float:right-右浮动后内容下移
weixin_39869043的博客
06-03 4079
貌似有不少网友遇到过这样一个问题，在做新闻列表页(有标题和发布时间的那种)时，自己对发布日期用了float:right后，日期跑到下面去了，这个问题，我也遇到过，在此分享一下解决办法。关于这个问题我们先来看一个例子：-//W3C//DTD XHTML 1.0 Transitional//EN “ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...
span可以设置宽高吗
最新发布
06-01
但是，你可以通过设置 display 属性为 inline-block 或者 block，来将 span 元素转换为块级元素或行内块级元素，从而可以设置宽高。例如： ``` <span style="display: inline-block; width: 100px; height: 50px;">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值