盒子模型

• 盒子模型

• 组成部分

   从内到外：内容(content)、内边距(padding)、边框(border)、外边距(margin)

•  作用

改善网页布局

• 盒子的内容（content）

默认样式下内容宽度为其父容器的宽度，高度是内容自适应。如图：

• 盒子的内边距（padding）

内容与边框之间的空间。

• 盒子的外边距（margin）

盒子边框与相邻元素之间的空间。

• 盒子模型的定位

        $.浮动(float):
            1.所谓浮动就是让设置的标签产生漂浮效果，脱离文档流,其产生的效果是使后续元素的位置上移。
            2.元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。
            3.另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。        

               正常的文档流效果：div为块级元素，所以一行只排一个

        

               1号浮动,2号不浮动：1号脱离原来的文本流，后续元素往上移

                      

                1,2号都浮动：都浮动时，排在同一行，若浮动空间不够，则换行

                      
      

 $.Position的主要属性和对应的作用如下

            static：默认值。其特点是代码中的前后位置按顺序显示，块元素独占一行，行内元素紧跟着前一个元素水平显示。

            相对定位(relative)：这种定位方式下元素不脱离文档流，相对自己原来的位置进行定位。继续保留它原来所占位置，不影响其后续元素的位置。
                默认的定位情形

         

           2号div相对定位的情形：相对自己原来的位置进行定位

                 
                   2号相对定位，但left与top设为0

                 
                若不设置top、left等位置属性，其在布局中与默认位置相同，那为什么不设置呢？因为其最大的功能是：
                相对定位了的元素可以作为其子元素的定位环境。一般relative用来做参照物(定位环境)，absolute用来做定位 。    

绝对定位(absolute):
                1.相对于最近的有定位的父级进行定位，如果没有，那么相对于body元素来定位。
                2.float属性的设置对绝对定位元素不起作用。
                3.top、left等位置属性值是参照定位环境的。
                3.脱离文档流，其产生的效果是使后续元素的位置上移，完全忽略绝对定位元素的存在。

                   默认的定位情形

           

            1号div绝对定位的情形：相对body进行定位

                 

 

 

菜鸟一枚，若有错误之处，还请大家指出 ^__^