网页设计第次课CSS盒子模型概论.pptVIP

第三章 使用CSS样式表（中） 第4节、CSS盒子模型; CSS中的Box Model具备内容(content)、填充(padding)、边框(border)、边界(margin) 四大属性，这些属性我们可以借用日常生活中的盒子（箱子）来理解，即日常生活中所见的每个盒子（箱子）都有：边界、边框、填充、内容四个属性，所以称为盒子模式。盒子模型主要适用于块级元素。;内容content就是盒子里装的东西；而填充padding就是怕盒子里装的东西损坏而添加的泡沫类抗震辅料；边框border就是盒子自身的轮廓；边界margin则是盒子摆放时留出的与其他盒子或物品的空隙。在网页设计上，内容content常指文字、图片等元素，但是也可以是小盒子（嵌套的DIV）。 ;商品(内容);;IE5.X 和 IE6 使用自己的非标准盒子模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 ;（1）width与height属性;;（2）最大与最小宽度属性max-width，min-width ;（3）最大与最小高度属性max-height，min-height ;;内容未填满时， 容器大小不变;内容填满时会溢出 而容器大小不变化;5、边框属性 边框有3个属性：一是边框宽度属性，用于设置边框的宽度；二是边框颜色，用于设置边框的颜色；三是边框样式，用于控制边框的样式。 （1）边框样式 border-style： 使用边框样式属性可以定义边框的风格样式，这个属性必须用于指定可见的边框。可以分别设置上边框样式border-top-style、下边框样式border-bottom-style、左边框样式 border-left-style 和右边框样式 border-right-style。 语法，border-style : 样式值（顺序是上右下左，只写一个值为设置全部，写两个为分别设置上下和左右的样式，写三个值为分别设置上、右左和下的样式） border-top-style : 样式值（具体参见下一页表格中内容） ……;取 值;;;（2）边框宽度 border-width： 边框宽度用于设置元素边框的宽度。取值中thin表示细边框；medium表示中等边框（默认）；thick表示粗边框；length为像素值或其他单位表示的长度。语法， border-width : medium | thin | thick | px（定义顺序和其他规则同上） border-top-width : 宽度值（同上） ; ……;;（3）边框颜色 border-color： border-color属性用来设置边框的颜色，可以用颜色关键字或RGB值来设置，默认取值transparent，表示边框颜色为透明。语法， border-color : 颜色值 （定义顺序和其他规则同上） border-top-color : 颜色值 （同上） …… ;;（4）边框复合属性 border： 使用border属性可以同时设置元素的边框样式、宽度和颜色。 语法， border : 边框宽度 边框样式 颜色值 （4个方向统一设置） border-top : 上边框宽度 上边框样式 颜色值 ; ……;;学完就练之4-1（请将源代码复制到页面中，开始练习）：;四、盒子模型1-宽高边框属性总结;华丽的分割线;任务 7 任务名称：CSS盒子模型1——低头者 任务要求：建立一个文件夹，用于放置网页和素材文件，使用学习过的CSS技术设计出一个如效果图中显示的网页。文件夹命名为：“任务7 **的CSS盒子模型1—低头者”） 任务参考图：见下一页幻灯片;网页完成整体效果图;细节说明： 1、完成后的页面中，每一张图片都可以点击进入大图展示。 2、图片要有类似与相框的装饰，且四个角有棱，如左侧图片。;华丽的分割线;6、边距与填充属性 使用边距属性margin可以设置元素周围的边界宽度，包括上、下、左、右4个边界的距离。填充属性padding用于设置边框和元素内容之间的间距，同样包括上、下、左、右4个方向的填充值。 （1）上边距 margin-top： 上边距也叫顶端边距，使用上边距可以设置元素的上边界， 设置值为数值，单位可以是长度单位（如像素、厘米等，默认值是 0px），也可以是百分比单位（表示基于父元素的宽度的百分比）。 语法，margin-top : auto | px | %;;50px;（2）其他边距 margin-bottom、margin-left、margin-right： 底边边距用于设置元素下方的边距值；左侧边距和右侧边距则分别用于设置元素左右两边的边距值。其语法和用法与顶端边距类似。;;（3）边距复