原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
单元6DIV+CSS布局
知识入门
循序渐进
6.1div与span
6.2框模型
6.3浮动与定位
知识拓展
知识入门
1.页面中的层
2.框模型
3.模型框个部分的功能
4.背影样式和边框模型
循序渐进
6.1div与span
6.2框模型
6.3浮动与定位
6.1div与span
6.1.1块元素div标签
6.1.2内联元素span标签
6.1.3元素类型转换
6.1.1块元素div标签
div标签属于块级元素，它类似于一个容器，可以
组合其它的HTML元素。
6.1.2内联元素span标签
span标签属于内联元素也叫行内元素。
span标签本身没有任何固定的格式，只有通过CSS
为其添加样式时才会有外观样式的体现。
6.1.3元素类型转换
display属性用于规定是否显示元素，元素是块元素
还是行内元素。
dispay：属性值;
【任务6-1】制作一个三文鱼商品展
示框
【任务描述】
（1）制作三文鱼商品展示框。
（2）使用div元素划分元素层次。
（3）使用span元素划分行内文本内容。
6.2框模型
6.2.1框模型的边框与边距
6.2.2框模型的宽和高
6.2.3圆角边框
6.2.4边框阴影
6.2.1框模型的边框与边距
1.边框
（1）设置边框的宽度
设置边框四条边的宽度
border-width:上边框宽度右边框宽度下边框宽度左边框宽度;
只写3个属性值
border-width:上边框宽度左右边框宽度下边框宽度;
只写2个属性值
border-width:上下边框宽度左右边框宽度;
只写1个属性值
border-width:上下左右边框宽度;
（2）设置边框的颜色
设置边框四条边的颜色
border-color:上边框颜色右边框颜色下边框颜色左边框颜色;
只写3个属性值
border-color:上边框颜色左右边框颜色下边框颜色;
只写2个属性值
border-color:上下边框颜色左右边框颜色;
只写1个属性值
border-color:上下左右边框颜色;
只想设置某一条边框的颜色
border-方向-color:颜色;
（3）设置边框的样式
分别设置边框四条边的样式
border-style:上边框样式右边框样式下边框样式左边框样式;
只写3个属性值
border-style:上边框样式左右边框样式下边框样式;
只写2个属性值
border-style:上下边框样式左右边框样式;
只写1个属性值
border-style:上下左右边框样式;
只设置某一条边框的样式
border-方向-style:样式;
2.内边距
设置元素的四个方向到边框之间的距离
padding:上内边距右内边距下内边距左内边距;
只写3个属性值
padding:上内边距左右内边距下内边距;
只写2个属性值
文档评论（0）