首先区别内联元素和块元素

  • 内联元素不会独自占据一行,其他的内联元素也可以在同一行;块元素独自占据一行。
  • 块级元素可设置宽高,内联元素设置无效。
  • 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
  • 内联元素改变宽高,可以通过设置 display: block;当 display 的值设为 block 时,元素将以块级形式呈现。
  • 当position为absolute、fixed、float的时候,元素脱离原来的文档流。变为块级元素,所以span此时也可以设置宽高。

因此:

span元素是内联元素,但是通过绝对定位或者float之后可以脱离文档流,变成块级元素,,因此可设置宽高。

关于span设置宽高相关推荐

  1. 为什么有些内联(行内)元素可以设置宽高?

    为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...

  2. 行内元素和块级元素的区别,为何img、input等行内元素可以设置宽高??(夯实基础)

    我们习惯将html中元素分类为行内元素和块级元素,如下: ·常见块级元素有:html.body.div.header.footer.nav.section.aside.article.p.hr.h1~ ...

  3. 为什么a标签不能设置宽高?

    给a标签设置了css样式:width:200px;height:50px;,它依然不变.因为a标签是行内元素,所以给它设置宽高的时候,首先要把它转换为块元素,代码如下: <!DOCTYPE ht ...

  4. 如何给行内元素设置宽高

    我们都知道行内元素直接设置宽高是无效的.当我们在面试中遇到这个问题的时候,很容易想到给它设置 display:block或者display:inline-block就可以了,但是面试官来了句" ...

  5. gridcontrol值为0时设置为空_CSS设置宽高的小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  6. [css] img标签是行内元素,为什么却能设置宽高

    [css] img标签是行内元素,为什么却能设置宽高 原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...

  7. RN设置宽高100%

    RN 中如何设置宽高为100% 在组件中引入Dimensions,调用get方法 import React from 'react' import{Dimensions, View, Text} fr ...

  8. 行内和块级元素区别?如何让行内元素设置宽高?

    行内和块级元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素 ...

  9. 如何让行内元素可以设置宽高

    行内元素可以通过 1:浮动 2:定位 3:display 变成块级元素或者行内块元素 然后可以设置宽高.

最新文章

  1. Delphi中使用IXMLHTTPRequest如何用POST方式提交带参
  2. python3实现四元数到普通角度的转换程序
  3. js简单的条件语句判断
  4. uniapp 页面下次渲染完成后执行:this.$nextTick
  5. 深入解析:Row Movement 的原理和性能影响与关联
  6. install java 8_Install Java 8 on Ubuntu
  7. 数据库扩容 mysql_mysql数据库怎么扩容
  8. k8s上安装并初始化Helm。minikube
  9. python和excel的优缺点_Excel不好吗?为什么非要学python?
  10. 服务器显示器指示灯不亮,电脑显示器指示灯不亮怎么办
  11. linux iptable 使用指南
  12. MySQL学习笔记[学习资料来源于B站黑马测试]
  13. 【安全脚本】 centos 下的病毒木马查杀脚本
  14. 为什么HDMI连接显示器无信号?
  15. LED 流水灯与闪烁
  16. OpenGL ES EGL eglCreatePbufferSurface
  17. 我们开发了一款待办事项分享平台——待办库(Todo Store)
  18. Google翻译接口(PHP API)
  19. chatbot_我如何通过帮助我的ChatBot理解意图来使其变得更聪明
  20. CSS(列表+表格+链接+自定义鼠标光标)样式

热门文章

  1. 评法国和瑞士之比赛郁闷篇
  2. 2013年6月英语四级真题听力短文原文及重点词汇整理
  3. 【BZOJ】3007 拯救小云公主 最短路径
  4. 机械革命z3pro笔记本U盘重装win10系统教学
  5. IPHONE手机知识大全(上)
  6. android 自定义popupwindow,自定义通过PopupWindow实现通用菜单
  7. 现代计算机之父—冯·诺依曼
  8. 《把时间当作朋友》第0章读后感
  9. 爬壁机器人外文文献_自动化专业外文翻译--Alicia3爬壁机器人的粘着控制
  10. iOS 数据库-SQLite3 CoreData FMDB