延安大学：《网页制作基础教程》课程PPT教学课件_第十四章 盒子模型

网页制作基础教程 牛永洁 延安大学计算机学院

网页制作基础教程 延安大学计算机学院 牛永洁

内容提要 ☆本章主要学习内容 豪 margIn 崇 padding m border

内容提要 ❖本章主要学习内容 margin padding border

理解金模型 p margin top borde p padding left left left ight margin, border i padding/ Content, padding: border margin bottom padding bottom border bottom margin

理解盒模型

Boxes tDisable, Cookies·css, Forms· Images.Information,国 Miscellaneous Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure border Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut content laoreet dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ddin commodo consequat Duis autem vel eum iriure 9 ullamcorper suscipit lobortis nist ut aliquip ex ea marain Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam erat volutpat. Ut wisi enim ad minim veniam quis nostrud exerc nonummy nibh euismod tincidunt ut laoreet dolore magna liquan tation ullamcorper suscipit lobortis nist ut aliquip ex ea commodo consequat. Duis autem vel eum iriure. Done

margin 5 padding ◆边距:可以控制一个元素每一边的边距。 令四个边距属性: margIn- right, margIn-left, margin -top marg in -bottom 令四个填充属性: padding-top; padding- right padding-bottom padding-left 令单位:px,em,%,其中px,em很常用 令快速设定: margIn:10p×5pX5pX10pX顺序为 上右下左-顺时针方向) 令如果设置边距的四个边一样: margIn:5pX

margin与padding ❖边距：可以控制一个元素每一边的边距。 ❖四个边距属性：margin-right, margin-left ， margin-top，margin-bottom： ❖四个填充属性：padding-top；padding-right； padding-bottom；padding-left。 ❖单位：px，em，%，其中px，em很常用 ❖快速设定：margin：10px 5px 5px 10px(顺序为： 上 右 下 左---顺时针方向) ❖如果设置边距的四个边一样：margin：5px

边距碰撞 令在CSS中,2+2不等于4。 当一个元素的下边距碰到了另一个元素的上边距 两个元素之间的距离不是两个边距之和,而是应 用两者之中较大的边距作为两者之间的距离 Heading: opx bottom margin 20 pixels aragraph: 15 px top margin Heading: 20 px bottom padding 35 pixels Paragraph: 15 px top margin

边距碰撞 ❖在CSS中，2+2不等于4。 ❖当一个元素的下边距碰到了另一个元素的上边距， 两个元素之间的距离不是两个边距之和，而是应 用两者之中较大的边距作为两者之间的距离

边距折叠 令当一个元素处于另一个元素内部时,会发生边距 折叠问题 ◇解决办法是:添加一个边框,或者在外面的元素 中添加一个很小的填充

边距折叠 ❖当一个元素处于另一个元素内部时，会发生边距 折叠问题. ❖解决办法是：添加一个边框，或者在外面的元素 中添加一个很小的填充

行内元素与块级元素匹 令虽然浏览器把每个元素都看成方框,但是方框有 两种:块级方框(blocκkboⅹ)与行内方框 ( inline box) 令块级元素会在前后增加回车换行。比如:di,p, 表格,列表 令行内元素在前后不会增加换行,比如:a,span g等

行内元素与块级元素 ❖虽然浏览器把每个元素都看成方框，但是方框有 两种：块级方框（block box）与行内方框 （inline box） ❖块级元素会在前后增加回车换行。比如：div，p， 表格，列表 ❖行内元素在前后不会增加换行，比如：a，span， img等

行内元素与块级元素匹 ☆对于块级元素:使用 marg In或者 padding的top、 bottom、lef、 right属性时,没有任何的问题。 令但是对于行内元素: margIn或者 padding的top bottom属性不起作用,因为它被ine- height控制 着 心如何在块级元素与行内元素之间切换 x display: inline i x display block

行内元素与块级元素 ❖对于块级元素：使用margin或者padding的top、 bottom、left、right属性时，没有任何的问题。 ❖但是对于行内元素： margin或者padding的top、 bottom属性不起作用，因为它被line-height控制 着。 ❖如何在块级元素与行内元素之间切换 display：inline； display：block；

添加边框 ☆边框位于 padding与 marg In之间 令每个边框有3个属性: color,wdth,stye(样式) 令边框的宽度可以使用px,em等单位。也可以使 用关键词:thn, mediun, thick 令边框的样式有以下几种:soid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden

添加边框 ❖边框位于padding与margin之间。 ❖每个边框有3个属性：color，width，style（样式） ❖边框的宽度可以使用px，em等单位。也可以使 用关键词：thin，medium，thick。 ❖边框的样式有以下几种：solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden