CSS文档流

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>
~                                                                      
~
笨鸟先飞