-
- 素材大小:
- 1.17 MB
- 素材授权:
- 免费下载
- 素材格式:
- .ppt
- 素材上传:
- lipeier
- 上传时间:
- 2019-04-09
- 素材编号:
- 227963
- 素材类别:
- 课件PPT
-
素材预览
这是有关盒子得ppt,包括了认识盒子模型,盒子模型相关属性,元素的类型与转换,块元素垂直外边距的合并,阶段案例—制作音乐盒等内容,欢迎点击下载。
有关盒子得ppt是由红软PPT免费下载网推荐的一款课件PPT类型的PowerPoint.
第四章 盒子模型 盒子模型的概念 元素的类型 4.1 认识盒子模型 盒子模型的概念 4.1 认识盒子模型 以手机盒子为例,更形象地认识CSS盒子模型 4.1 认识盒子模型 多个手机盒子放在一起时,它们之间的距离就是CSS盒子模型的外边距。 4.1 认识盒子模型 结论: 网页就是多个盒子嵌套排列的结果。 内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 如果给元素定义边框属性,边框将出现在内边距和外边距之间。 4.2 盒子模型相关属性 4.2.1 边框属性 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:右边框样式 border-bottom-style:下边框样式 border-left-style:左边框样式 border-style:上边框样式 右边框样式 下边框样式 左边框样式 border-style:上边框样式 左右边框样式 下边框样式 border-style:上下边框样式 左右边框样式 border-style:上下左右边框样式 4.2 盒子模型相关属性 4.2.1 边框属性—设置边框样式(border-style) 例如
只有上边为虚线dashed,其他三边为单实线solid,可以使用border-style综合属性分别设置各边样式: 或综合设置四条边,然后采用上边覆盖: 4.2 盒子模型相关属性 4.2.1 边框属性—设置边框宽度(border-width) border-top-width:上边框宽度 border-right-width:右边框宽度 border-bottom-width:下边框宽度 border-left-width:左边框宽度 border- width:上边框宽度 [右边框宽度 下边框宽度 左边框宽度] 4.2 盒子模型相关属性 4.2.1 边框属性—设置边框颜色(border-color) 4.2 盒子模型相关属性 4.2.1 边框属性—设置边框颜色(border-color) 4.2 盒子模型相关属性 4.2.1 边框属性—设置边框颜色(border-color) 注意: 4.2 盒子模型相关属性 4.2.1 边框属性—综合设置边框 border-top:上边框宽度 样式 颜色 border-right:右边框宽度 样式 颜色 border-bottom:下边框宽度 样式 颜色 border-left:左边框宽度 样式 颜色 border:四边宽度 样式 颜色 4.2 盒子模型相关属性 4.2.1 边框属性—综合设置边框 像border、border-top等这样,能够一个属性定义元素的多种样式,在CSS中称之为复合属性。 常用的复合属性有font、border、margin、padding和background等。 复合属性可以简化代码,提高页面的运行速度,但是如果只有一项值,最好不要应用复合属性,以免样式不被兼容。 4.2 盒子模型相关属性 4.2.2 内边距属性 padding-top:上内边距 padding-right:右内边距 padding-bottom:下内边距 padding-left:左内边距 padding:上内边距[右内边距 下内边距 左内边距] 4.2 盒子模型相关属性 4.2.3 外边距属性 margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 [右外边距 下外边距 左外边距] 4.2 盒子模型相关属性 4.2.3 外边距属性 4.2 盒子模型相关属性 4.2.3 外边距属性 4.2 盒子模型相关属性 4.2.4 背景属性 4.2 盒子模型相关属性 4.2.4 背景属性 4.2 盒子模型相关属性 4.2.4 背景属性 4.2 盒子模型相关属性 4.2.4 背景属性 4.2 盒子模型相关属性 4.2.4 背景属性 4.2 盒子模型相关属性 4.2.5 盒子的宽与高 4.2 盒子模型相关属性 4.2.5 盒子的宽与高 4.3 元素的类型与转换 4.3.1 元素的类型 4.3 元素的类型与转换 4.3.1 元素的类型 4.3 元素的类型与转换 4.3.1 元素的类型 4.3 元素的类型与转换 4.3.2
与标记 4.3 元素的类型与转换 4.3.2与标记 4.3 元素的类型与转换 4.3.2与标记 4.3 元素的类型与转换 4.3.3 元素的转换 4.3 元素的类型与转换 4.3.3 元素的转换 4.4块元素垂直外边距的合并 4.4.1 相邻块元素垂直外边距的合并 4.4块元素垂直外边距的合并 4.4.2 嵌套块元素垂直外边距的合并 4.5阶段案例-制作音乐盒 效果图如下 本章首先介绍了盒子模型的概念,与盒子模型相关的属性,然后讲解了块元素、行内元素,最常用的块元素与行内元素,以及元素类型的转换,最后制作出了一个常见的盒子模型效果。 通过本章的学习,读者应该能够熟悉盒子模型的构成,熟练运用盒子模型相关属性控制网页中的元素,理解块元素与行内元素的区别,掌握标记与标记的使用。潘多拉的盒子ppt:这是潘多拉的盒子ppt,包括了读一读,妙开头,好结尾,精彩展示,击鼓传盒等内容,欢迎点击下载。
绘本喜欢盒子的人ppt:这是绘本喜欢盒子的人ppt,包括了我喜欢的绘本,彩笔娃邀你一起来到“绘本的王国”,这些书为什么叫绘本,绘本的封面上一般会有哪些信息等内容,欢迎点击下载。
半透明3D立体方块盒子PPT图表:跟大家分享一份半透明的3D立体方块盒子PPT图表,透明质感并列关系的PPT图表,不容错过!