1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 background:yellow; 10 } 11 .box2{ 12 width:100px; 13 background:red; 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 19 文档流 20 -网页是一个多层的结构，一层摞着一层 21 -通过css可以分别为每一层来设置眼样式 22 -作为用户只能看到最顶上的一层 23 -在这些层中，最底下的一层成为文档流，文档流是网页的基础我们 所创建的元素默认都是在文档流中进行排列 24 -对于我们来说，元素主要有两个状态 25 -在文档流中 26 -不在文档流中(脱离文档流) 27 -元素在文档流中有什么特点 28 -块元素 29 -块元素在页面中独占一行 30 -默认宽度是父元素的全部(会把父元素撑满) 31 -默认高度是被内容撑开(子元素) 32 -行内元素 33 -行内元素不会独占页面的一行，值占自身的大小 34 -行内元素在页面中从左向右水平排列，如果一行之中容乃 所有的行内元素，则元素换到第二行继续自左向右排列 35 -行内元素的默认宽度和高度都是被内容撑满 36 37 38 --> 39 <div class="box1">我是div一</div> 40 <div class="box2">我是div二</div> 41 <span>我是span1</span> 42 <span>我是span2</span> 43 </body> 44 </html> ~ ~