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>
二.浏览器打开以上代码渲染结果
