html-css2(盒子模型，RESET CSS，浮动，定位)

 

盒子模型的组成：

            盒子模型由内容，内边距，边框和外边距组成

 

边框：  border       border   边框颜色    border-width  边框宽度   border-style   边框样式   

             border-left   左边框    border-right  右边框   border-top   上边框   border-bottom 下边框

    的效果

   的效果 

    double  双线   dotted  点线    dashed   虚线    solid  实线

内边距 ：  padding-top  上内边距   padding-right    右内边距

                 padding-bottom  下内边距     padding-left   左内边距

   如果有四个值  顺序为  上  右  下  左 

 

  的效果  

 

外边距和内边距差不多 参考上边

margin： auto  左右居中

如果存在两个模块的话

            垂直方向：margin-bottom，margin-top 取两者之间的较大值

            水平方向：margin-left ， margin-right 取两者的和

  overflow：hidden；解决内边距重叠的问题  超出隐藏 border（加边距但是会扩大这个模块）

的效果

也可以这样用   border-top-style/color  等

RESET CSS：

 

浮动：就是让元素脱离正常的文档流（在页面里不占位置）

 

浮动后

          float： left 左浮动 /right  右浮动

解决浮动的方法：

      1：父元素设置

              

      2.添加一个空div

         

        

    3.使用伪元素（常用）

        

       

 

定位: position

         static    默认值静态定位（没有定位）

         relative   相对定位   相对于原来的位置进行定位，还要占据位置，不会脱离文档流 以自身元素为参考 可以给 top/right/bottom/left     （若不加方位词，则相当于这个没有发生变化。）

         absolute   绝对定位      没有占据位置，脱离文档流 默认以整个文档为参考， 有定位父级，则父级参考 可以给top/right/bottom/left        （会使margin：auto 失效）

         fixed      固定定位   ，脱离文档流 默认以窗口为参考， 可以给top/right/bottom/left 窗口滚动，依然不会变

 一般父级相对定位，子集绝对定位。

例：

相对定位，不脱离文档流

  效果图   

 

效果图

固定定位，脱离文档流

效果图

定位父级，父级

效果图

 

z-index：8；  这个就是几个元素重叠之后那个z-index大那个显示