借助display属性可转换行内元素及块元素

display值 说明
inline 元素会被显示为内联(行内)元素
block 元素会被显示为块级元素
inline-block  行内块元素

 范例:

<html><head><title>块级元素与行内元素的转变</title><style>span{/* span由行内元素转为块元素 *//*display: block;*//* span由行内元素转为行内块元素 */display: inline-block;}div{/* div由块元素转为行内元素 */display: inline;}</style></head><body><span>第一个span</span><span>第二个span</span><div>第一个div</div><div>第二个div</div></body>
</html>

HTML块级元素与行内元素的转变相关推荐

  1. css标签显示特性(块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例)

    HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...

  2. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...

  3. CSS样式----块级元素和行内元素

    块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table  行内元素:s ...

  4. [HTML/CSS]盒子模型,块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  5. CSS块级元素和行内元素

    1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...

  6. 5、HTML块级元素及行内元素

    在 HTML 中,标签(tag)通常又被称作元素(element).例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素. HTML ...

  7. 块级元素和行内元素的区别

      块级元素和行内元素的区别:    1.块级元素会独占一行,其宽度自动填满其父元素宽度         行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的 ...

  8. 继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...

    内容总结: 1.继承性和层叠性继承性: 像 一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...

  9. 22 块级元素和行内元素

    学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素 块级元素 比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: 行内元素和块级元素的区别:(非常重要) 行内 ...

  10. css块元素与行内元素特点,CSS区分块级元素和行内元素

    块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...

最新文章

  1. 异构智能吴韧:物联网是“伪命题”?智联网才是未来
  2. 百度推ACE交通引擎:不仅是无人车,车路协同新基建我也包了
  3. Android5.0新特性:主题样式
  4. Java之JSON数据
  5. c语言 typedef的用法
  6. Linux查看内置命令和非内置命令帮助的几种方法(man、help、info)
  7. 【优秀文章保存】webcollector抽取新闻正文
  8. 【NOIP】提高组2013 积木大赛
  9. Java中的垃圾回收器的类型概述 《对Java的分析总结》(六)
  10. java中13%(-3)_Java面试题汇总(十三)《算法分析及手写代码661-675》
  11. java treeset 重复_TreeSet判断重复元素解析及代码示例
  12. nginx与IIS服务器搭建集群实现负载均衡(三)
  13. 小分子php蛋白,如何研究小分子抑制蛋白降解途径? - 分子生物 - 小木虫 - 学术 科研 互动社区...
  14. 中专考的计算机一级b有用吗,白城计算机一级B资格证真实可查么
  15. Light OJ Dynamic Programming
  16. C++_弱引用 强引用_weak_ptr/share_ptr
  17. C++进阶 —— 哈希
  18. python爬虫—爬取taptap游戏的评论信息(通过fiddler抓包)
  19. 123457123457#0#-----com.cym.YuErBaiKe02--前拼后广--育儿百科
  20. 原理分析:安卓手机桌面长按分享,安卓发送软件apk,qq发送软件apk 原理

热门文章

  1. “很抱歉,出现错误,word不能启动”超简单解决方法
  2. matlab如何处理矩阵中的NaN
  3. 计算机显卡有辐射吗,电脑的显卡辐射大吗
  4. 【leetcode】快乐数
  5. android自带下拉阻尼动画,Android实现简单的下拉阻尼效应示例代码
  6. Codeforces 1428E Carrots for Rabbits
  7. Idea import导包去掉*
  8. 米拓模板:财务公司网站模板推荐
  9. 解决问题备忘:Http头Authorization值格式错误,请参考《微信支付商户REST API签名规则》
  10. 平面和网站设计师应该去的网站