文档详情

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

发布：2025-03-12约2.03千字共13页下载文档

文本预览下载声明

盒子模型

--盒子之间的关系;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