1、什么是标准文档流
<!-- 什么是标准文档流 宏观的将，我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流” 从上而下 ，像 “织毛衣” 而设计软件 ，想往哪里画东西 就去哪里画 标准文档流下 有哪些微观现象？ 1.空白折叠现象 2.高矮不齐，底边对齐 3.自动换行，一行写不满，换行写 -->
2、行内元素和块级元素转换
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。 常用的块状元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素 <a> <span> <br> <i> <em> <strong> <label> 行内元素在一行显示，设置宽度，高度无效
常用的行内块状元素：
<img> <input>
-------------------------------------------
<style type="text/css"> .box1{ /*将块元素转化成行内元素*/ display: inline-block; 200px; height: 40px; border: 1px solid red; } .box2{ margin-top: 20px; 200px; height: 40px; font-size: 40px; border: 1px solid green; } span{ background-color: yellow; 100px; height: 40px; /*将行内元素转化成块级元素*/ display: block; /*隐藏当前的标签 不占位置*/ /*display: none;*/ /*隐藏当前的标签，占位置*/ visibility: hidden; } img{ 300px; height: 300px; /*隐藏当前的标签*/ /*display: none;*/ } </style> </head> <body> <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>