南大软院大神养成计划--HTML和CSS基础课程（四）

学习小结

     今天主要学习了盒模型和元素布局模型。

一，盒模型：如果将盒模型比作一间床的房间，那么床就是这个元素的内容，床到墙壁之间的空间就是填充（padding），墙壁就是边框（border），房间周围的空间就是边界（margin）。一个元素的实际大小就是这个盒模型的大小。

  盒子模型的边框就是围绕着内容及补白的线，这条线可以设置它的粗细，样式和颜色（边框的三个属性），如div{border:2px solid red}也可以分开写div{border-width:2px;

                                  border-style:solid; 

                                  border-color:red;}

  border-style(边框常见的样式有dashed（虚线）；dotted（点）；solid（实线）。border-top上边框，border-bottom下边框，border-left左边框，border-right右边框。

 元素实际宽度（盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

二，元素的布局模型，1流动模型（flow)  2浮动模型(float) 3层模型（layer)

      流动模型是默认的网页布局模式。在流动模型下有2个特点：1),块状元素由上到下垂直分布，2），内联元素从左到右水平分布显示。

      浮动模型：用CSS定义  div{border:2px red solid;float:left} 

       层模型：就像PS中图层编辑一样，每个图层都能精确定位。层模型的三种模式：1），绝对定位{position:absolute}(相对于浏览器窗口);2)，相对定位{position：relative}（相对于之前的位置）；3），固定定位{position：fixed}（相对于浏览器窗口，但是滚动条滑动的时候也不发生变化）。

      相对于绝对的组合使用：1，参考定位元素必须是相对定位元素的前辈元素；2，参照定位元素必须加入position:relative;3,定位元素加入position：absolute，便可以使用top,bottom,left,right来进行定位了。