网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
边框(border):
1、边框是围绕在内容区和padding区的一条线,border有三个特征可以指定:样式(style)、宽度(width)、颜色(color);
2、边框画在元素的背景之上;
3、可替换元素的边框将影响行高。
元素的浮动;
float属性的取值包括:none(不浮动)、left(向左浮动)、right(向右浮动)
注意:float属性可以应用于任何元素,而不仅仅是图像。
浮动的行为;
1、如果元素向同一方向浮动,每个后续的浮动元素必须向该方向移动,直到碰到父级元素的内边缘或者碰到前面的浮动元素。这将导致多个浮动元素集聚在目标边缘。
2、如果没有足够的空间让浮动元素并肩出现,第二个浮动元素将向下浮动,直到有足够的空间来显示他而不覆盖第一个浮动元素。
清除浮动的影响;
clear属性的取值包括;
none:允许元素的两边都有浮动元素
left:不允许左边有浮动元素
right:不允许右边有浮动元素
both:不允许有浮动元素
定位类型:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)