前端学习：元素的类型

我们知道，网页结构就是有许多的元素作为结构组成的。

元素分为三大类：水，火，土。

不好意思，元素分为块状元素（block），行内元素（inline）以及行内块元素（inline-block）。

块状元素的特点是可以直接设置宽高，并且独占一行，呈上下排列。

我们写下两个经典块状元素div，可以看到两个div是分别在两行的。

行内元素特点就是不能设置宽高，元素默认从左至右水平一行排列，经典行内元素span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.z{width: 100px;height: 100px;background-color: aquamarine;}.x{width: 200px;height: 200px;background-color: rgb(165, 127, 255);}.c{background-color: blue;}.v{background-color: cadetblue;}</style>
</head>
<body><div class="z"></div><div class="x"></div><span class="c">世界和平</span><span class="v">世界和平</span>
</body>
</html>

还有一种元素就是行内块元素，兼具了两者有属性，既能设置宽高，又能水平排列，例如input。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.b,.n{width: 200px;height: 50px;}</style>
</head>
<body><input type="text" class="b" placeholder="我是b"><input type="text" class="n" placeholder="我是n">
</body>
</html>

三种元素之间可以使用display属性进行相互转换，但是主要还是块状元素及行内元素转换为行内块元素。

行内块元素有一个独属有的属性：vertical-align 垂直对齐属性。

因为行内块元素的对齐方式是以基线为准对齐，所以与其他元素总是对不齐的。

这个属性经常用于的场景是使图片居中显示。先设置text-align使图片水平居中。

在img图片边上写一个宽度为0px，高度为100%的span标签作为辅助线，使用群组选择器给img标签和span标签同时设置vertical-align：middle。这样图片就能在盒子中居中显示了。

        div{width: 500px;height: 700px;border: 1px solid #000;margin: 100px auto;text-align: center}span{display: inline-block;width: 0;height: 100%;}img,span{vertical-align: middle}<div><img src="" alt=""><span></span></div>

前端学习：元素的类型相关推荐

前端学习-元素显示模式
html元素一般分为块元素和行内元素两种类型块元素: 自己独占一行高度宽度内边距外边距都能自己设置宽度默认是父元素的100% 大容器,可以放任何元素文字类的元素内不能使用块级元素(p标签,h1 ...
【前端学习之HTMLCSS】-- HTML第七篇 -- 图片元素与多媒体元素
[前端学习之HTML&CSS]-- HTML第七篇 – 图片元素与多媒体元素文章目录 [前端学习之HTML&CSS]-- HTML第七篇 -- 图片元素与多媒体元素前言图片元素 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！
https://risingstars.js.org/2019/en 大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年 ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
前端共享桌面_2020 前端学习路线总结，哎呦，不错哦！
2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读. 图下面是我翻译的一个文字版,可以先看 ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...

前端学习：元素的类型

前端学习：元素的类型相关推荐

最新文章

热门文章