1.什么是盒子模型?
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
2.具体属性名对应位置图解:
3.具体属性值组成:
(1)内容区(content):盒子的主题,其他属性都是围绕着这个主体进行修改编辑,它承载者主要的输出信息的功能。使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时,溢出部分将不可见;为visible时,溢出的内容信息可见,只是被呈现在盒子的外部;当为scroll时,滚动条将被自动添加到盒子中,用户可以通过拉动滚动条显示内容信息;当为auto时,将由浏览器决定如何处理溢出部分。
(2)填充(padding):主要是以内容区(content)的边界及长宽为依据向外延伸,延申至边框(border)所包含的区域,可以大致理解为内边距。填充的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时,可使背景色延伸到填充区域。
(3)边框(border):故名思意就是盒子的边框,边框外为空白边(margin)内为填充(padding)。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性,如果没有指定边框样式,其他的边框属性都会被忽略,边框将不存在。CSS规定了dotted(点线)、dashed(虚线)、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度,其属性值可以是长度计量值,也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色,其属性值可以是RGB值,也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时,既可以进行边框四个方向整体的快捷设置,也可以进行四个方向的专向设置,如border: 2px solid green 或border-top-style: solid、border-left-color: red等。
(4)空白边(margin):就是盒子最外围的地方,和外部空间和盒子的缓冲区。空白边使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。空白边的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin,其具体的设置和使用与填充属性类似。对于两个相邻的(水平或垂直方向 )且设置有空白边值的盒子,他们邻近部分的空白边将不是二者空白边的相加,而是二者的并集。若二者邻近的空白边值大小不等,则取二者中较大的值。同时,CSS 容许给空白边属性指定负数值,当指定负空白边值时,整个盒子将向指定负值方向的相反方向移动,以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素,这是CSS 布局技术中的一个重要方法。
4.盒子的定位
浮动
所谓浮动就是让设置的标签产生漂浮效果,脱离原来在页面本应出现的空间位置,不再占用任何文档流空间。元素设置为浮动以后,会生成一个块级元素,而不论它本身是何种元素。且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
Position定位
页面布局使用最多的是相对定位和绝对定位。
相对定位:这种定位方式下元素不脱离文档流,仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物,通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
绝对定位:这种定位方式下元素将脱离文档流,不占据空间,文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果