CSS标准文档流与脱离文档流，前端开发

块级元素与行内元素的相互转换

块级元素可以设置为行内元素；行内元素也可以设置为块级元素。
举个例子：

div {
display: inline;
background-color: pink;
width: 400px;
height: 400px;
}

display是显示模式，用来改变元素的行内、块级性质inline就是“行内”，一旦给一个标签设置display:inline;
那么这个标签立即变为行内元素。

• 此时div和span没有什么区别;
• 此时的div不能设置宽度和高度（即使设置了也并不显示出来);
• 此时div可以和别人并排;

同理

span {
display: block;
width: 300px;
height: 300px;
background-color: green;
}

“block”是“块”的意思;

• span标签变为块级元素，与div无异；
• span能够设置高度和宽度；
• span必须霸占一行，别人不能与之并排；
• 如果不设置宽度，那么将撑满父亲。

脱离标准文档流

三种方法：
1）浮动
浮动的元素会脱离文档流；
新建一个文档在页面上添加两个div给div分别加上class。

给div设置一个宽高及背景颜色 给one左浮动