<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 50px;
}
</style>
</head>
<body>
<!-- 什么是标准文档流
我们的web页面和ps等设计软件有本质的区别
web 网页的制作 是个“流” 从上而下 ，像 “织毛衣”
而设计软件 ，想往哪里画东西 就去哪里画
标准文档流下 有哪些微观现象？
1.空白折叠现象，多个空格会折叠，换行会看成一个空格，多个图片之间，换行会有空格，不换行会挨边显示。
2.高矮不齐，底边对齐，比如span姚明里设置字体之后，插入图片之后也是底边对齐
3.自动换行，一行写不满，换行写
-->
<div>
文字文字文字文字<span>姚明</span>文字文字文字文字文字文字
<img src="./images/企业1.png" alt="">
<img src="./images/企业2.png" alt="">
<img src="./images/企业2.png" alt="">
<img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt=""><img src="./images/企业2.png" alt="">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*将块元素转化成行内元素*/
/*display inline 加上之后转化成行内元素此时是不能设置宽和高的，相同class会在一行显示加上inline_block行内块元素
可以设置宽和高*/
display: inline-block;
width: 200px;
height: 40px;
border: 1px solid red;
}
.box2{
margin-top: 20px;
width: 200px;
height: 40px;
font-size: 40px;
border: 1px solid green;
}
span{
/*2、行内元素是不能设置宽和高，加上display转化成块级之后可以设置，但字体没设置*/
background-color: yellow;
width: 100px;
height: 40px;
/*将行内元素转化成块级元素*/
display: block;
/*隐藏当前的标签 不占位置*/
display: none;
/*隐藏当前的标签，占位置*/
visibility: hidden;
}
img{
width: 300px;
height: 300px;
/*隐藏当前的标签*/
/*display: none;*/
}
</style>
</head>
<body>
<!--1\-->
<div class="box1">内容</div>
<div class="box1">内容</div>
<div class="box2">内容</div>
<span>alex</span>
<span>alex</span>
<!-- form表单中 input textarea select都是行内块元素 -->
<img src="./images/企业1.png" alt="">
<img src="./images/企业2.png" alt="">
</body>
</html>
行内元素和块级元素的区别：
行内元素：
- 与其他行内元素并排；
- 不能设置宽、高。
- 默认的宽度，就是文字的宽度。
块级元素：
- 霸占一行，不能与其他任何元素并列；
- 能接受宽、高。
- 如果不设置宽度，那么宽度将默认变为父亲的100%。
从HTML的角度来讲，标签分为：
- 文本级标签：p、span、a、b、i、u、em。
- 容器级标签：div、h系列、li、dt、dd。
因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
从CSS的角度讲
- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
- 块级元素：所有的容器级标签都是块级元素，还有p标签。