网页设计css盒子模型.pptx

第三章 使用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 : 样式值（顺序是上右下左，只写一个值为设置全部，写两个为分别设置上下和左右的样式，写三个值为分别设置上、右左和下的样式）