网张设计第16次课CSS盒子模型课件

1、第三章 使用CSS样式表（中）第4节、CSS盒子模型 CSS中的Box Model具备内容(content)、填充(padding)、边框(border)、边界(margin) 四大属性，这些属性我们可以借用日常生活中的盒子（箱子）来理解，即日常生活中所见的每个盒子（箱子）都有：边界、边框、填充、内容四个属性，所以称为盒子模式。盒子模型主要适用于块级元素。4、盒子模型内容content就是盒子里装的东西；而填充padding就是怕盒子里装的东西损坏而添加的泡沫类抗震辅料；边框border就是盒子自身的轮廓；边界margin则是盒子摆放时留出的与其他盒子或物品的空隙。在网页设计上，内容conte

2、nt常指文字、图片等元素，但是也可以是小盒子（嵌套的DIV）。 商品(内容)缓冲物(填充)盒子外沿(边框)距墙空隙(边界)IE5.X 和 IE6 使用自己的非标准盒子模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 （1）width与height属性 在 CSS 中，width和height 指的仅是（块级元素， 行内元素img也适用）内容content区域的宽度和高度。增加内边距padding、边框border和外边距margin不会影响内容区域的尺寸，但是会增加元素框的尺寸。语法，width / height : auto (默认，根据浏览器窗口自动

3、调节) | px | % (基于父对象素宽度的百分比宽度)（2）最大与最小宽度属性max-width，min-width 在CSS中，最大宽度属性max-width用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。同样的，最小宽度属性min-width用来定义宽度显示的最小值，当拖动浏览器边框使其显示范围小于最小宽度的时候，元素显示最小宽度值定义的宽度。注：以上属性在img标记中也可以使用。语法，max-width / min-width : auto | px | %（3）最大与最小高度属性max-height，min-height cs

4、s中的max-height会对元素的高度设置一个最高的限制值。因此，元素可以比指定值矮，但不能比其高，不允许指定负值。 相反，min-height属性会对元素的高度设置一个最低的限制值。我们有时设置一个没有内容的空容器时会导致不能撑开，但又由于内容多少不能确定所以暂不能固定容器的高度，这个时候可以使用min-height来撑高空容器。注：IE6不支持，以上属性在img标记中也可以使用。语法，max-height / min-height : auto | px | %内容未填满时，容器大小不变容器大小没有上限，拖动窗口会导致容器跟随改变自己的大小。内容未超限定值时容器会自适应调整内容填满时会溢

5、出而容器大小不变化内容超限定值时溢出且容器大小不再改变容器会随超出的内容自适应调整，拖动窗口依然会改变容器的大小。5、边框属性边框有3个属性：一是边框宽度属性，用于设置边框的宽度；二是边框颜色，用于设置边框的颜色；三是边框样式，用于控制边框的样式。 （1）边框样式 border-style：使用边框样式属性可以定义边框的风格样式，这个属性必须用于指定可见的边框。可以分别设置上边框样式border-top-style、下边框样式border-bottom-style、左边框样式 border-left-style 和右边框样式 border-right-style。语法，border-style

6、 : 样式值（顺序是上右下左，只写一个值为设置全部，写两个为分别设置上下和左右的样式，写三个值为分别设置上、右左和下的样式） border-top-style : 样式值（具体参见下一页表格中内容） 取 值含 义none默认值，无边框dotted点线边框dashed虚线边框solid实线边框double双实线边框groove边框具有立体感的沟槽ridge边框成脊形inset使整个边框凹陷，即在边框内嵌入一个立体边框outset使整个边框凸起，即在边框外嵌入一个立体边框（2）边框宽度 border-width：边框宽度用于设置元素边框的宽度。取值中thin表示细边框；medium表示中等边框（默

7、认）；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属

8、性可以同时设置元素的边框样式、宽度和颜色。 语法，border : 边框宽度 边框样式 颜色值 （4个方向统一设置） border-top : 上边框宽度 上边框样式 颜色值 ; 学完就练之4-1（请将源代码复制到页面中，开始练习）：四、盒子模型1-宽高边框属性总结序号属性名含义举例1width，height宽度和高度width:200px ; height:100px; 2max-width， max-height最大宽度与最大高度max-width:400px;max-height:300px;3min-width ， min-height 最小宽度与最小高度min-width:200px

9、; min-height:100px; 4border-style边框样式 border-style:solid;border-top-style: dotted5border-width边框宽度 border-width:5px;border-top-width:10px;6border-color边框颜色 border-color:red;border-top-color:#FF0000 7border边框复合属性 border:solid 10px gray;border-top:solid 20px red华丽的分割线任务 7任务名称：CSS盒子模型1低头者任务要求：建立一个文件夹，用

10、于放置网页和素材文件，使用学习过的CSS技术设计出一个如效果图中显示的网页。文件夹命名为：“任务7 *的CSS盒子模型1低头者”）任务参考图：见下一页幻灯片网页完成整体效果图细节说明：1、完成后的页面中，每一张图片都可以点击进入大图展示。2、图片要有类似与相框的装饰，且四个角有棱，如左侧图片。网页局部效果图华丽的分割线6、边距与填充属性使用边距属性margin可以设置元素周围的边界宽度，包括上、下、左、右4个边界的距离。填充属性padding用于设置边框和元素内容之间的间距，同样包括上、下、左、右4个方向的填充值。（1）上边距 margin-top：上边距也叫顶端边距，使用上边距可以设置元素的

11、上边界， 设置值为数值，单位可以是长度单位（如像素、厘米等，默认值是 0px），也可以是百分比单位（表示基于父元素的宽度的百分比）。 语法，margin-top : auto | px | %50px此高度为父元素宽度（在这里指窗口）的10%（2）其他边距 margin-bottom、margin-left、margin-right： 底边边距用于设置元素下方的边距值；左侧边距和右侧边距则分别用于设置元素左右两边的边距值。其语法和用法与顶端边距类似。（3）边距复合属性 margin： margin的值可以取1-4个，如果只设置1个值，则应用于所有的4个边界；如果设置 2个或3个值，则省略的值与

12、对边相等；如果设置4个值，则按照上、右、下、左的顺序分别对应其边距。语法，margin : auto | px | % （1*4）。（4）顶端填充 padding-top： 顶端填充属性padding-top用于设置上边框和选择内容之间的间隔。语法，padding-top : auto | px | % 。其他填充属性padding-bottom、padding-right、padding-left 分别用于设置底端、左、右两侧的间隔，其语法和用法与顶端填充类似。（5）填充复合属性 ：padding padding的值可以取1-4个，如果只设置1个值，则应用于所有的4个方向的填充；如果设置 2

13、个或3个值，则省略的值与对边相等；如果设置4个值，则按照上、右、下、左的顺序分别对应其填充。语法，padding : auto | px | % （1*4）。原始大小填充后容器大小改变五、盒子模型2-边距与填充属性总结序号属性名含义举例1margin-top， margin-right， margin-bottom，margin-left上边距右边距下边距左边距margin-top:50px;margin-right:0px;margin-bottom:10px;margin-left:0px;2margin边距复合属性 margin:50px 0px 10px 0px;margin:20px

14、 10px;margin:20px;3padding-top，padding-right， padding-bottom，padding-left 顶端填充右边填充底部填充左边填充padding-top:10px;padding-right:5px; padding-bottom:0px;padding-left:0px;4padding填充复合属性 padding:10px 5px 0px 0px;padding:10px 0px;padding:10px;特别注意： 在盒模型属性的表现上，行内元素与块级元素有所不同：因为行内元素（内联元素）属于行布局，其特性是在一行里进行布局，所以行内元素

15、设置width无效，height无效，可以设置line-height、border；另外，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效。学完就练之6-1（请将源代码复制到页面中，开始练习）： 我是块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽和高，常见的块级元素有div, p ,h1h6等。 我是行内元素：行内元素不可以设置宽和高，但可以与其他行内元素位于同一行。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有span,a, i ,b,strong等。华丽的分割线任务 8任务名称：CSS盒子模型2朝鲜与美国任务要求：建立一个文件夹，用于放置网页和素材文件，使用学习过的CSS技术设计出一个如效果图中显示的网页。文件夹命名为：“任务8 *的CSS盒子模型2朝鲜与美国”）任务参考图：见下一页幻灯