第三章-盒子模型.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,第三章 盒子模型,盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。,所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。,一个页面由很多这样的盒子组成，这些盒子之间会互相影响,，因此掌握盒子模型需要从两方面来理解。一是,理解一个孤立盒子的内部结构,，二是,理解多个盒子之间的相互关系。,第,三,章,盒子模型,CSS,盒子,模型：,包括：,边框,内边距,外边距,元素内容,第,三,章,盒子模型,在,CSS,中，width,和,height,指的是内容区域的宽度和高度,。,增加内边距、边框和外边距,不会影响内容区域的尺寸，但,是会增加元素框的尺寸,。,假设框的每个边上有,10,个像,素的外边,距和,5,个像素的内边,距,。如果希望这个元素框达到,100,个像素,，就需要将内容的,宽度设置为,70,像素,，如图。,第,三,章,盒子模型,第,三,章,盒子模型,盒子模型的总宽度为,盒子实际宽度,=,左边框宽度,+,左内边距,+width+,左内边距,+,左边框宽度,盒子,实际占用,的宽度,=,左外边距,+,左边框宽度,+,左内边距,+width+,右内边距,+,右边框宽度,+,右外边距,盒子模型的总高度为,盒子实际高度,=,上边框宽度,+,上内边距,+height+,下内边距,+,下边框宽度,盒子,实际占用,的宽度,=,上外边距,+,上边框宽度,+,上内边距,+height+,下内边距,+,下边框宽度,+,下外边距,属性,border,border-style,border-width,border-color,border-bottom,描述,简写属性。作用是在一个声明中用来设置四个边框的所有属性。,设置四个边框的样式，可以设置一到四个样式。,设置四个边框的宽度，可以设置一到四个值。,设置四个边框的颜色，可以设置一到四个颜色。,简写属性。作用是在一个声明中用来设置下边框的所有属性。,border-bottom-color,border-bottom-style,border-bottom-width,设置元素的下边框的颜色。,设置元素的下边框的样式。,设置元素的下边框的宽度。,温馨提示：推荐使用简写属性，灰色属性不推荐使用。,第,三,章,盒子模型,-,边框属性,(1),属性,border-left,描述,简写属性。用于在一个声明中设置左边框的所有属性。,border-left-color,border-left-style,border-left-width,border-right,border-right-color,border-right-style,border-right-width,设置元素的左边框的颜色。,设置元素的左边框的样式。,设置元素的左边框的宽度。,简写属性。将所有用于右边框的属性设置于一个声明中。,设置元素的右边框的颜色。,设置元素的右边框的样式。,设置元素的右边框的宽度。,温馨提示：推荐使用简写属性，灰色属性不推荐使用。,第,三,章,盒子模型,-,边框属性,(2),属性,border-top,描述,简写属性。将所有用于上边框的属性设置于一个声明中。,border-top-color,border-top-style,border-top-width,设置元素的上边框的颜色。,设置元素的上边框的样式。,设置元素的上边框的宽度。,温馨提示：推荐使用简写属性，灰色属性不推荐使用。,第,三,章,盒子模型,-,边框属性,(3),border-color,color_name,hex_number,rgb_number,transparent,inherit,描述,规定颜色值为颜色名称的边框颜色（比如,red）。,规定颜色值为十六进制值的边框颜色（比如,#ff0000）。,规定颜色值为,rgb,代码的边框颜色（比如,rgb(255,0,0)）。,默认值。边框颜色为透明。,规定应该从父元素继承边框颜色。,温馨提示：灰色属性不推荐使用。,第,三,章,盒子模型,-,边框宽度,(border-width),元素的内边距在边框和内容区之间。,CSS,padding,属性定义元素边框与元素内容之间的空白区域。,属性,padding,padding-bottom,padding-left,padding-right,padding-top,描述,简写属性。作用是在一个声明中设置元素的所内边距属性。,设置元素的下内边距。,设置元素的左内边距。,设置元素的右内边距。,设置元素的上内边距。,第,三,章,盒子模型,-,内边距,(padding),内边距padding,指文本边框与文本之间的距离，四个值沿顺时针方向,顺序依次是上、右、下、左,第,三,章,盒子模型,-,内边距,(padding),属性,margin,margin-bottom,margin-left,margin-right,margin-top,描述,简写属性。在一个声明中设置所有外边距属性。,设置元素的下外边距。,设置元素的左外边距。,设置元素的右外边距。,设置元素的上外边距。,围绕在元素边框的空白区域是外边距。,设置外边距会在元素外创建额外的“空白”。,设置外边距的最简单的方法就是使用,margin,属性，这个属性接受任何长度单位、百分数值甚至负值。,第,三,章,盒子模型,-,外边距,(margin),外边距Margin,指是元素与元素之间的距离，四个值沿顺时针方向,顺序依次是上、右、下、左,第,三,章,盒子模型,-,外边距,(margin),行内元素之间的水平距离,当两个行内元素并排紧邻时，它们之间的距离为margin-left和,margin-right之和。,第,三,章,盒子模型,-,盒子之间的关系,块级元素之间的竖直距离,两个块级元素之间的距离,不是,margin-bottom与margin-top总和，,而是两者中的较大者。,第,三,章,盒子模型,-,盒子之间的关系,嵌套盒子之间的距离,(高度自适应),两个嵌套盒子上边框的距离为：,padding,+,margin-top,第,三,章,盒子模型,-,盒子之间的关系,嵌套盒子之间的距离,(高度固定),若,父div,高度，小于,子div的,“高度+margin-top”值，此时IE浏,览器会自动扩大,，保持子元素的margin-bottom的空间以及元素,自身的padding-bottom；而Firefox就不会，它会保证父元素的,height高度的完全吻合，而这时子元素将超过父元素的范围。,从CSS的标准规范来说，IE的这种处理方法是不合规范的。,第,三,章,盒子模型,-,盒子之间的关系,Margin可设置为负值,当margin设为负数时，会使被设为负数的块向,相反,的方向移动，甚至覆盖在另外的块上。,第,三,章,盒子模型,-,盒子之间的关系,Thank you!,