网页中有文档流,就是我们所说的块元素和内联元素一般都在文档流中,只要我们不对其做飘出文档流的操作,那么我接下来就给大家,讲解下文档流中的块元素和内联元素的存在方式等。
工具/原料
1
windows记事本(任意一个版本即可)
2
Sublime(也是一 种记事本)
3
任意一个浏览器即可(这里使用Google Chrome浏览器)
方法/步骤
1
1.如图所示,我们新建一个记事本,并将记事本的名字改为“网页中文档流的介绍(38).html”,并回车键确定,以使文件转化为浏览器可以打开的html网页文件。
3
3.如图所示,我们写一个标签用来声明这是一个html5的文档,在写一个,标签用来包含html文档的主主体部分。
4标签用来包含页的标题,再写一个标签来设置文字的编码方式为UTF-8,以次让浏览器更好的显示我们所编写的网页。
4.如图所示,我们写一个
标签用来包含html文档的头部部分,写上5
5.如图所示,我们写上
标签用来包含html的主体,我们再写一个块元素,也就是这个div标签,我们设置这个块元素的颜色为粉色,以便我们更好地看到其存在于文档流中的效果,由于块元素的宽度为父元素的宽度,所以其宽度就是网页的宽度了,高度被内容区撑开,所以其高度为div标签中的这三个字的高度。6
6.如图所示,我们再写上一个span这样的内联元素,同样我们设置其颜色为绿色,以便我们更好地看到其存在于文档流中的效果,由于内联元只占其自身的大小,所以其大小为span标签中,这四个字的大小。
7
6.如图所示,我们鼠标右击,在弹出的下拉列表菜单中,我们选择“在浏览器中打开”这一项。
8
7.如图所示,我们看到第一行的块元素宽度占据了网页的宽度,而高度为文字的高度。而第二行的内联元素其宽度和高度只占其文字的自身大小。
9网页中文档流的介绍(38)
8.如图所示,这是本案例的源代码,以供大家参考哦!
块元素
行内元素注意事项
1
1.欢迎大家有问题时,向本大神进行提问哦!
2
2.没有软件的也可以找本大神。
3
3.教程不只是本篇,而是前端从入门到精通一个系列,欢迎浏览其他教程经验, 祝您早日成为前端大神。