HTML&CSS基础-文档流
HTML&CSS基础-文档流
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档流</title> </head> <body> <!-- 文档: 指定的就是网页,每一个页面都是一个文档。 文档流: 文档流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中。 元素在文档流中的特点: 块元素: 1>.块元素在文档流中会独占一行,块元素会自上向下排列; 2>.块元素在文档流中默认宽度是父元素的100%,宽度值是auto,当元素的宽度值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度,以适应内边距; 3>.块元素在文档流中高度默认被内容撑开; 内联元素: 1>.内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右; 2>.内联元素的高度和宽度默认都被内容撑开; --> <style type="text/css"> .box1{ background-color: red; padding-left: 500px; font-size: 100px; } .box2{ width: 100px; height: 100px; background-color: yellow; } span{ background-color: deeppink; font-size: 32px; } </style> </body> <div class="box1">我是box1的div元素</div> <div class="box2"></div> <span>我是一个span标签</span> <span>我是一个span标签</span> <span>我是一个span标签</span> <span>我是一个span标签</span> <span>我是一个span标签</span> </html>
二.浏览器打开以上代码渲染结果
本文来自博客园,作者:尹正杰,转载请注明原文链接:https://www.cnblogs.com/yinzhengjie/p/7906588.html,个人微信: "JasonYin2020"(添加时请备注来源及意图备注,有偿付费)
当你的才华还撑不起你的野心的时候,你就应该静下心来学习。当你的能力还驾驭不了你的目标的时候,你就应该沉下心来历练。问问自己,想要怎样的人生。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步