《Web前端开发基础》课件——视频10 盒子之间的关系.pptx

下载文档

0
0
约2.03千字
约 13页
2025-03-16 发布于福建
举报
版权申诉
保障服务

《Web前端开发基础》课件——视频10 盒子之间的关系.pptx

此“教育”领域文档为创作者个人分享资料，不作为权威性指导和指引，仅供参考

1、本文档共13页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

盒子模型

--盒子之间的关系;01;;!DOCTYPEhtml

html

head

title盒子模型的计算思考题/title

styletype=text/css

body{

??margin:0000;

??font-family:宋体;

}

ul{

??background:#ddd;

??margin:15px;

??padding:10px;

??font-size:12px;

??line-height:14px;

}

p,li{

??color:black;????????/*黑色文本*/

??background:#aaa;??????/*浅灰色背景*/

??margin:20px20px20px20px;/*左侧外边距为0，其余为20像素*/

??padding:10px0px10px10px;/*右侧内边距为0，其余10像素*/

??list-style:none??????/*取消项目符号*/

}

.withborder{

??border-style:dashed;

??border-width:5px;?????/*设置边框为2像素*/

??border-color:black;

??margin-top:20px;

}

/style

/head

?body

??ul

???li第1个项目内容/li???

???liclass=withborder第1个项目内容，第1个项目内容，第1个项目内容，第1个项目内容，第1个项目内容，第1个项目内容。/li

??/ul

??ul

????li第2个项目内容/li???

????liclass=withborder第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容。/li

???/ul

?/body

/html

;在浏览器里打开开发者工具，chrome浏览器快捷键ctrl+shift+I;一颗树的形式把一个HTML文件的内容组织起来，形成了严格的层次结构。;加深理解：

一个HTML文件并不是一个简单的文本文件，而是一个具有层次结构的逻辑文件。

每一个HTML元素（p、ul、li）都作为这个层次结构中的一个节点存在。各节点反映在浏览器中会有不同的表现形式，具体的表现形式正是由CSS来确定的。

CSS目的是使网页的表现形式与内容结构分离，CSS控制网页的表现形式，HTML控制网页的内容结构。;;如果一个HTML更复杂，层次更多，??么不断地重复这个过程，直至所有的元素都被检查一遍，该分配区域的分配区域，该设置颜色的设置颜色。通过这个过程，样式也就被赋给了每个元素。;;行内元素：

span标签：也是容器标记，也可以容纳各种HTML元素，从而形成独立对象。span标签没有结构上的意义，纯粹是应用样式，当其它行内元素都不合适时，就可以使用span标签。

div与span的区别：div标签是一个块级元素，它包含的元素会自动换行；而span标签仅是一个行内元素，在它的前后不会换行。;html

??headtitle演示div与span区别/title/head

??body

????p使用div标签/p

????div