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

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

一. 行内元素

1. 不能设置宽高文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

a. 宽度与子级中的内容一样宽;文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

b. 高度与子级中的内容一样高;文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

2. 在一行中显示,不能独立成块;文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

3. 空行或者换行,会多出一个空格;文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

4. 行内元素转为块级元素:文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

a. 设置为block文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

display: block;

b. 设置为浮动文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

float: left; 或者 float: right;

5. 特殊情况:文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

img标签支持宽高的设置,但不能单独为一行;img标签默认情况下下方会出现1像素的空行,解决办法是给img添加CSS文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

display: block;

二. 块级元素

1. 支持宽高的设置文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

a. 像素px单位,固定布局;文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

b. 百分比%单位,响应式布局。文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

2. 不设置宽高文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

a. 宽度继承直接父级的宽度;文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

b. 高度由子级的内容撑开。文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

3.  独立成行文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

4. 块级元素转为行内元素文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

设置为inline文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

display: inline;

 文章源自MAY的SEO博客-https://may90.com/share/inline-block.html

 

  • 我的微信
  • 扫一扫微信,添加好友
  • weinxin
  • 我的微信公众号
  • 关注公众号,了解最新动态
  • weinxin
  • 本文由 发表于 2019年1月4日
  • 转载请务必保留本文链接: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资源

微信公众号主页链接地址如何获取?

如何快速获取微信公众号主页链接地址? 方法一: 1. 使用电脑登录个人微信,找到要推广的公众号,点击右上角人物图标: 2. 在弹窗中点击查看历史消息图标: 3. 点击右上角复制链接图标,成功复制公众号...
评论  0  访客  0

发表评论

匿名网友 填写信息

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

确定