学习小结
今天主要学习了盒模型和元素布局模型。
一,盒模型:如果将盒模型比作一间床的房间,那么床就是这个元素的内容,床到墙壁之间的空间就是填充(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来进行定位了。