《CSS盒子模型》PPT课件.ppt

1、第10课、CSS框模型的网页使用、审查、CSS中背景属性的缩写形式是如何编写的？CSS如何实现图片而不是文本？滑动门技术通常在哪里使用？实现方法、确定框模型的定义确定框模型的特性确定框的位置确定框的margin嵌套问题使用框的浮动使用框模型获取版面设计、目标、新知识：CSS的框模型、框模型是CSS的基石之一，指定如何显示元素以及如何(在一定程度上)进行交互。页面上的每个服务器在浏览器中都被视为由元素内容、填充、边框和边距间隔组成的矩形框。网页是许多箱子徐璐通过不同的排列方式(上下排列、并行排列、嵌套排列)堆积起来的。CSS的框模型，CSS的框模型，每个HTML元素都可以看到包含东西的框中的内容

2、和框的边界之间的距离是填充，框本身是边界，框的边界外和其他框之间的距离，然后我们就可以看到边界元素实际宽度=左边框左边框左填充内容宽度右填充右边框右边框、IE quirk模式框宽度、删除文档宣言DOCTYPE后，IE 6的网页解释进入quirk模式。牙齿时，不要在使用框属性后删除DOCTYPE，CSS框模型计算问题，因为框的宽度等于左边界宽度的右边界。如果长方体内嵌套了长方体，并且两个长方体都有边界，则两个长方体边界之间的距离等于外部长方体填充值内长方体的边界值。例如，边界border属性、框模型的margin和padding边界border可以设置宽度、颜色和样式。分别为“宽度”、“颜色”和

3、“样式”。其中border-style属性将边框设置为实线，框边框到内容的距离，类似于表的填充属性(cellpadding)。填充属性为0时，框的边框就在内容旁边，因此通常不好看。如果在框中设置背景颜色或背景图像，背景将复盖padding和内容的范围，默认情况下，背景图像将相对于padding的左上角在框中平铺。方块模型的性质，边界值margin可以为负，填满padding不能为负边界border。默认值为0。也就是说，不会显示内嵌元素。定义上下边界不会影响行高。盒子模型的思考，边框是现实。可以看到实际边界。填充和边界都是虚拟的。在元素影响框模型中，只能设置两种茄子类型的颜色。换句话说，边界颜

4、色和背景颜色框模型可以设置三种茄子类型的距离：边界距离毛利、填充距离padding和边界值border。方法是按指定顺序提供2、3或4个属性值。其含义如下：给定两个属性值后，前者表示上边框和下边框的属性，后者表示左边框和右边框的属性。给定三个茄子属性值后，前者表示上边框的属性，中间值表示左边框和右边框的属性，后者表示下边框的属性。给定四个属性值后，将按顺时针方向上、右、下、左边框的属性对齐。各种元素框属性的默认值，大多数html元素框属性(margin、padding)的默认值为0。某些html元素(margin、padding)浏览器的默认值不是0牙齿(例如，body、P、ul、Li、for

5、m标签等)，因此有时需要先将这些属性设置为零。默认情况下，Input元素边框属性不是0牙齿，因此可以将其设置为0以美化表单中的输入框和按钮。长方体模型的应用节目，1 .西餐网页中的西餐控件美化基本上背景是灰色，文本框边框有粗线和立体感，看起来不太好。下面的代码通过CSS更改表单的边框样式、颜色和背景颜色，使文本框、按钮等变得更漂亮：所有框都将置于标准流中，除非您设置了框的位置、框的三种茄子位置格式、“标准流”下“位置浮点属性”下“位置浮点属性”下的位置浮点属性或位置属性。顾名思义，元素框在标准流中的位置由元素在HTML中的位置确定。标准流、HTML元素标准状况下的定位方法行内元素同一行内块级别

6、元素水平对齐整行、页面内垂直对齐元素移动渡边杏、嵌套元素框内的嵌套关系、标准流下框对齐分析、* border: 2px dashed # FF0066Padding: 10pxMargin: 2px:网页banner(块级元素)行内元素1行内第2行内的3这是未命名块。这是框内的框、行内的元素框、行内的元素框始终只能从浏览器获取行高的空间(行高由line-height属性确定，如果未设置牙齿属性，则此高度为内容的默认高度)，因此建议不要直接为行内元素设置框属性。通常，将内嵌元素显示为块级元素，然后设置框属性。在添加行内元素边框和填充时，行内元素a不占用浏览器的高度，如下所示：以下div块保留在其

7、原始位置，内嵌元素框的上下部分重叠，左右部分不受影响：display属性可以控制是否显示元素(作为内嵌元素或)，或display : block | inline | none | list-item、block元素、显示block元素渡边杏：始终从新行开始；可以控制高度、行高、上边距和下边距。宽度默认为容器的100%，除非使用width设置宽度、和块元素示例。随文元素、随文元素：和其他元素都不能在一行中更改高度、行高、上边距和下边距。宽度是文字或地物的宽度，不能更改。和是行内元素的示例。在列表项目元素display: list-item，html中，只有Li元素默认值是牙齿类型；如果将元素设

8、置为列表项目元素，将按列表元素显示；如果设置了列表选项，元素左侧将出现一个小黑点。隐藏元素display: none，如果其中一个元素设置为元素隐藏，浏览器将完全忽略牙齿元素，不显示牙齿元素，不占用文档中的位置。标题元素之类的基本上是牙齿类型。比较Visibility: hidden:要创建下拉菜单、选项卡式面板等，有时需要使用显示器： none隐藏菜单或面板。必须使用切换属性在inline牙齿的新行上元素启动。保持块元素和其他元素线路。控制Inline元素的宽度。控制内嵌元素的高度(对导航条特别有用)。无需设置宽度，即可在一个块元素中设置与字符相同宽度的背景颜色；标准流下定位应用程序的垂直导

9、航菜单；# nava font-size 3360 14px；Color: # 333333text-decoration : none；background-color : # cc CCC；Display:块；Width:140pxpadding 3360 6px 10px 4px:border : 1px solid # 00000；margin : 2px:# nava : hover color : # fffffff；background-color : # 666666；长方体的margin嵌套问题、“标准流”中长方体的margin计算、实验1:内嵌元素之间的水平Margin span . left Margin-Right 336030 px；background-color : # a9d 6 ff；sp