最新第4章-盒子模型ppt课件.ppt

《最新第4章-盒子模型ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、进入夏天，少不了一个热字当头，电扇空调陆续登场，每逢此时，总会想起那一把蒲扇。蒲扇，是记忆中的农村，夏季经常用的一件物品。　　记忆中的故乡，每逢进入夏天，集市上最常见的便是蒲扇、凉席，不论男女老少，个个手持一把，忽闪忽闪个不停，嘴里叨叨着“怎么这么热”，于是三五成群，聚在大树下，或站着，或随即坐在石头上，手持那把扇子，边唠嗑边乘凉。孩子们却在周围跑跑跳跳，热得满头大汗，不时听到“强子，别跑了，快来我给你扇扇”。孩子们才不听这一套，跑个没完，直到累气喘吁吁，这才一跑一踮地围过了，这时母亲总是，好似

2、生气的样子，边扇边训，“你看热的，跑什么？”此时这把蒲扇，是那么凉快，那么的温馨幸福，有母亲的味道！　　蒲扇是中国传统工艺品，在我国已有三千年多年的历史。取材于棕榈树，制作简单，方便携带，且蒲扇的表面光滑，因而，古人常会在上面作画。古有棕扇、葵扇、蒲扇、蕉扇诸名，实即今日的蒲扇，江浙称之为芭蕉扇。六七十年代，人们最常用的就是这种，似圆非圆，轻巧又便宜的蒲扇。　　蒲扇流传至今，我的记忆中，它跨越了半个世纪，也走过了我们的半个人生的轨迹，携带着特有的念想，一年年，一天天，流向长长的时间隧道，袅第4章

3、-盒子模型4.1认识盒子模型4.2盒子模型相关属性4.3元素的类型与转换4.4块元素垂直外边距的合并4.5阶段案例—制作音乐盒4.1认识盒子模型盒子模型的概念所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。4.2盒子模型相关属性4.2.1边框属性设置内容样式属性常用属性值上边框border-top-style:样式;border-top-width:宽度;bo

4、rder-top-color:颜色;border-top:宽度样式颜色;下边框border-bottom-style:样式;border-bottom-width:宽度;border-bottom-color:颜色;border-bottom:宽度样式颜色;左边框border-left-style:样式;border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;右边框border-right-style:样式;border-righ

5、t-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;样式综合设置border-style:上边[右边下边左边];none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线宽度综合设置border-width:上边[右边下边左边];像素值颜色综合设置border-color:上边[右边下边左边];颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)边框综合设置border:四边宽度四边样式四边颜

6、色;4.2盒子模型相关属性4.2.1边框属性—设置边框样式（border-style）边框样式用于定义页面中边框的风格，常用属性值如下：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线4.2盒子模型相关属性4.2.1边框属性—设置边框样式（border-style）既可以对盒子的单边进行设置，也可以综合设置四条边的样式：border-top-style:上边框样式border-right-style

7、:右边框样式border-bottom-style:下边框样式border-left-style:左边框样式border-style:上边框样式右边框样式下边框样式左边框样式border-style:上边框样式左右边框样式下边框样式border-style:上下边框样式左右边框样式border-style:上下左右边框样式使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序。省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。4.2盒子模型

8、相关属性4.2.1边框属性—设置边框样式（border-style）例如

只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式：或综合设置四条边，然后采用上边覆盖：p{borer-style:dashedsolidsolidsolid;}p{border-style:solid;}/*综合设置四边样式*/p{border-top-style:dashed;}/*上边样式覆盖*/边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度