文档流
程序员文章站
2022-04-25 16:30:29
...
<!DOCTYPE html>
<html>
<head>
<title>文档流</title>
<style>
.box1{
background-color:pink;
}
.box2{
background-color: red;
}
.box3{
background-color: purple;
}
</style>
</head>
<body>
<!-- 文档流(normal flow)：
-网页是一个多层的结构
-通过css可以为每一层来设置样式
-作为用户来讲只能看到最顶上一层
-在这些层，最底层中的一层称为文档流，文档流是网 页的基础。我们所创建的元素默认都是在文档流中进行排列。
-对于我们的元素主要有两个两个状态，
在文档流中
不在文档流中(脱离文档流)
-元素在文档流中的特点：
-块元素：
-在页面独占一行
-默认宽度是父元素的全部(会把父元素占满)
-默认高度是被内容撑开(子元素)
-行内元素：
-行内元素不会独占页面的一行，只占自身的大小。
-行内元素在页面中从左向右水平排列，如果排列一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列(和书写习惯一致)
-行内元素的默认宽度和高度都是被内容撑开。
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span class="box3">我是span1</span>
<span>我是span2</span>
</body>
</html>
上一篇： Spring Data JPA 查询
下一篇： Django中的Form表单