CSS标准文档流简介
概念
文档流通俗的讲,就是一个web页面中,每一个模块只能从上到下从左往右的方式排列在页面上
特性
(1)空白折叠现象
无论多少个空格、换行或Tab都会折叠为一个空格
例如:
<img src = "C:\Test.png"> <img src = "C:\Test.png">
<!-- 此处空一个Tab键 -->
效果如下
<img src = "C:\Test.png">
<img src = "C:\Test.png">
<!-- 此处空换行 -->
效果如下
另外,如果想要两张图片无缝连接,两个标签必须紧贴在一起
<img src = "C:\Test.png"><img src = "C:\Test.png">
<!-- 此处空无空格 -->
效果如下
(2)高矮不齐,底边对齐
如果标签之间高矮不一却又排在同一行中,标签底边对齐
例如
<p>
七月<span style="font-size:100px;">真的</span>好热
<img src = "C:\Test.png">
</p>
效果如下
(3)一行写满,自动换行
块级元素与行内元素
标准文档流等级森严,标签分为两种等级:
- 块级元素 div、h、dt、dd、li、p
- 行内元素 a、b、em、span、u、i
文本级标签除了< p >都是行内元素,所有容器级标签加上< p >标签全是块级元素
ps:因为< p >里面只能放文字、图片、表单元素,< p >里面不能放< h >和< ul >,也不能放< p>
(1)块级元素与行内元素的特点/区别
块级元素:一个块级元素 独占一整行,可以设置height与width,如果不设置width将默认设为与父级元素一样
行内元素:多个行内元素可以 共享一行,不能设置height与width,只能被其内容填充撑起
例如:给< div >不设置width,给< span >设置height与width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
height: 50px;
background-color:cadetblue;
}
.div2{
height: 50px;
background-color: blue;
}
span{
height: 50px;
width: 50px;
background-color:coral;
}
</style>
</head>
<body>
<div class="div1">NO.1</div>
<div class="div2">NO.2</div>
<span>NO.3</span>
<span>NO.4</span>
</body>
</html>
效果如下
从结果我们可以看到,两个< div >不设置width时宽度与父级元素一致,且独占一整行;两个< span >设置了height与width也同样不起作用
(2)块级元素与行内元素的相互转换
通过display属性可以将块级元素与行内元素相互转化
比如,块级元素转化为行内元素,那么意味着被转化的这个块级元素不再拥有块级元素特点,而是拥有行内元素特点,即该块级元素不能设置height与width,且不再独占一整行,而是和其他元素并排
举个例子:给转化为行内元素的< div >设置height与width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
display: inline;
height: 50px;
background-color:cadetblue;
}
.div2{
display: inline;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">NO.1</div>
<div class="div2">NO.2</div>
</body>
</html>
效果如下:
将行内元素转化为块级元素同理,被转化的行内元素可以设置height与width,且会独占一整行
比如:给被转化的< span >设置height与width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.span1{
display: block;
height: 80px;
width: 200px;
background-color:cadetblue;
}
.span2{
display: block;
height: 80px;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<span class="span1">NO.1</span>
<span class="span2">NO.2</span>
</body>
</html>
效果如下:
总结
认识标准文档流对web页面的搭建有着重要的作用,理清标准文档流的概念与特性,块级元素与行内元素的特点就可以了