《CSS框模型、显示和隐藏.ppt》由会员分享，可在线阅读，更多相关《CSS框模型、显示和隐藏.ppt（27页珍藏版）》请在三一办公上搜索。
1、第四章 CSS框模型（盒模型）、显示和隐藏,本节课的内容:,块元素和行内元素 块元素和行内元素的转换 HTML常见的块元素和行内元素框模型 网页中的框 框的特点 框的样式属性,显示和隐藏,本节课目标：,理解CSS框模型掌握框模型的样式属性,重点难点：,CSS框模型框模型的样式属性,块元素和行内元素,网页中的元素分为块元素和行内元素。块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示 块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素,块元素和行内元素的转换,使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设
2、置标签的display属性值为inline时，标签就呈行内元素显示,HTML常见的块元素和行内元素,标签,标签是容器标签，可以放置文本、图象等 标签内的元素在一行内显示,标签,标签是容器标签。可以把其他多个标签或内容放入这个容器中，作为一个整体,框模型（盒模型）,内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明,框的特点,外边距和内边距只有宽度属性边框有大小和颜色之分，可以对每一条边框设置不同的样式width和height定义的是内容的宽度和高度，而
3、不是整个框的宽度和高度,内容的属性,widthheight,padding属性,padding属性设置对象四边的内边距如果提供全部四个参数值，将按上右下左的顺序作用于四边。（顺时针）如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下不允许负值,margin属性,设置对象四边的外边距检索或设置对象四边的外延边距。如果提供全部四个参数值，将按上右下左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。,auto:值被设置为相对边的值。上下为0；左右为父对象宽度的50%设置盒模型的margin为auto，可使盒模型居中。外边距可以是负值,border属性,实训1 使用框模型的样式属性,完成如下页面:,目的:,使用margin,padding,border属性,分析:,训练要点:,Margin,padding只有宽度,透明要求:完成时间20分钟,隐藏和显示,总结,这次课学习了框模型以及框模型的属性学习了显示和隐藏通过本节课,你应该要理解什么是框模型,并掌握框模型的属性,并会使用这些属性,为学习css+div布局打好基础,
