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

MAY的SEO博客
MAY的SEO博客
MAY的SEO博客
582
文章
762
评论
2019年1月4日10:30:52 评论 8,025

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布局大致简单分为浮动布局和不浮动布局。再谈这两种布局之前,我们一定要了解一个概念-盒子模型。 一. 什么是盒子...
CMO是什么职位? SEO资源

CMO是什么职位?

每个公司都需要一个CMO,以通过制定全面的营销计划来提升品牌知名度并促进组织的成长。CMO负责对客户、业务合作伙伴、投资者和客户具有价值的活动。MAY的SEO博客为您分享CMO是什么职位? CMO是什...
VPS是什么? SEO资源

VPS是什么?

如果您已经准备好启动并运行一个网站,那么您需要购买一个服务器或空间,这时候也许您会听到很多声音推荐您选用VPS。也许您会困惑VPS是什么?MAY的SEO博客为您分享:VPS是什么? 为了使网站在线可用...
匿名

发表评论

匿名网友 填写信息

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