HTML行内元素与块级元素的特点及相互转换

MAY的SEO博客
MAY的SEO博客
MAY的SEO博客
614
文章
770
评论
2019年1月4日10:30:52 评论 8,097

May一看到代码就会特别头疼,所以一直在学习代码SEO资源相关知识,以下为个人总结。

一. 行内元素

1. 不能设置宽高

a. 宽度与子级中的内容一样宽;

b. 高度与子级中的内容一样高;

2. 在一行中显示,不能独立成块;

3. 空行或者换行,会多出一个空格;

4. 行内元素转为块级元素:

a. 设置为block

display: block;

b. 设置为浮动

float: left; 或者 float: right;

5. 特殊情况:

img标签支持宽高的设置,但不能单独为一行;img标签默认情况下下方会出现1像素的空行,解决办法是给img添加CSS

display: block;

二. 块级元素

1. 支持宽高的设置

a. 像素px单位,固定布局;

b. 百分比%单位,响应式布局。

2. 不设置宽高

a. 宽度继承直接父级的宽度;

b. 高度由子级的内容撑开。

3.  独立成行

4. 块级元素转为行内元素

设置为inline

display: inline;

 

 

  • 我的微信
  • 扫一扫微信,添加好友
  • weinxin
  • 我的微信公众号
  • 关注公众号,了解最新动态
  • weinxin
MAY的SEO博客
  • 本文由 发表于 2019年1月4日10:30:52
  • 转载请务必保留本文链接:https://may90.com/share/inline-block.html
CSS样式表优化方法与技巧 SEO优化

CSS样式表优化方法与技巧

HTML好比是构建网页的框架,那么CSS样式表就好比是用来美化装饰网页,外在的视觉体验,往往是影响用户体验的一个重要参考因素;那CSS样式表有哪些优化方法与技巧呢? CSS样式表优化方法与技巧 有三种...
CSS属性的优先级与继承性 SEO资源

CSS属性的优先级与继承性

May此刻正泡在培训班学习SEO资源CSS相关知识,以下是今天所学内容的总结。 一. 优先级 父级与子级拥有相同属性时,子级优先。 二. 继承性 子级会继承父级的属性; 不是所有的属性都有继承性; 技...
谈谈Web布局的基本认知 SEO建站

谈谈Web布局的基本认知

May最近周末至少会利用一天的时间泡在培训班。回顾一下老师讲的Web布局的基本认知。Web布局大致简单分为浮动布局和不浮动布局。再谈这两种布局之前,我们一定要了解一个概念-盒子模型。 一. 什么是盒子...
网关是什么? SEO资源

网关是什么?

网关是什么? 网关连接两个网络,因此一个网络上的设备可以与另一个网络上的设备通信。没有网关,您将无法访问互联网,进行通讯和来回发送数据。网关可以完全用软件,硬件或两者的组合来实现。因为按照定义,网络网...
什么是SMART原则? SEO资源

什么是SMART原则?

人生必须要有目标,有了目标才可能建立适合自己的计划。汽车有了目标,才能很好的行驶;人没了目标,就不能很好的计划生活或学习。根据SMART原则制定明确的计划,帮助我们实现这些目标。MAY的SEO博客为您...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: