《Web前端开发基础》课件-视频10 盒子之间的关系_第1页
《Web前端开发基础》课件-视频10 盒子之间的关系_第2页
《Web前端开发基础》课件-视频10 盒子之间的关系_第3页
《Web前端开发基础》课件-视频10 盒子之间的关系_第4页
《Web前端开发基础》课件-视频10 盒子之间的关系_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

盒子模型

--盒子之间的关系01HTML与DOM树标准流02目录1HTML与DOM树树：树表示的是一种具有层次关系的结构。之前在讲关系选择器时，分后代选择器、子选择器、兄弟选择器等，这个也是因为html中有很典型的层次结构。DOM树：全称为Documentobjectmodel，即文档对象模型。<!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文件的内容组织起来，形成了严格的层次结构。body是浏览器窗口中显示的所有对象的根节点，ul、li都是body的下级节点，而li是ul的下级节点。这棵DOM树上的各个节点都对应网页上的一个区域，比如在DOM查看器中单击某个li节点，立即可在浏览器窗口中看到一个有颜色的矩形框闪烁，该框就是该节点在浏览器窗口中所占的区域。这就是前面所说的CSS盒子。bodyulullililili加深理解：

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

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

CSS目的是使网页的表现形式与内容结构分离，CSS控制网页的表现形式，HTML控制网页的内容结构。2标准流标准流是指在不使用其他与排列和定位相关的特殊CSS规则时各种元素的排列规则。块级元素：总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。比如ul、li、ol、h1-h6、p等标签行内元素：文字这类元素的各个字母之间横向排列，到最右端会自动折行。这种标记本身不占有独立的区域，仅是在其他元素的基础上指出了一定的范围。比如strong、a、i等标签。标准流就是CSS规定的默认的块级元素和行内元素的排列方式。如果一个HTML更复杂，层次更多，那么不断地重复这个过程，直至所有的元素都被检查一遍，该分配区域的分配区域，该设置颜色的设置颜色。通过这个过程，样式也就被赋给了每个元素。在这个过程中，一个个盒子自然地形成一个序列。同级别的兄弟盒子依次排列在父级盒子中，同级别的父级盒子又依次排列在它们的父级盒子中，就像一条河流有干流和支流一样，这就是“流”的含义。放置内容的过程：1、从<body>标记开始，body就是最大的一个块级元素，依次把其中的子元素放到适当的位置，以上代码就是把两个ul块级元素竖直排列。2、分别进入每一个ul中查看它的下级元素，这里是两个li，因此又为它们分别分配了一定的矩形区域；3、进入li内部，里面是一行文字，则按照行内元素的方式排列这行文字。块级元素：div标签：div是divion的缩写，是一个区块容器标记。即<div>标签相当于一个容器，可容纳段落、标题、图片、表格等各种html元素。div作用：是一个通用的块级元素，方便排版。跟ul区别在于ul是具有特殊含义的块级元素，具有一定的逻辑语义。行内元素：span标签：也是容器标记，也可以容纳各种HTML元素，从而形成独立对象。span标签没有结构上的意义，纯粹是应用样式，当其它行内元素都不合适时，就可以使用span标签。div与span的区别：div标签是一个块级元素，它包含的元素会自动换行；而span标签仅是一个行内元素，在它的前后不会换行。<html>

<head><title>演示div与span区别</title></head>

<body>

<p>使用div标签</p>

<div>

<imgsrc="../images/love.png">

</div>

<div>

<imgsrc="../images/love.png">

</div>

<div>

<imgsrc="../images/love.png">

</div>

<p>使用span标签</p>

<span>

<imgsrc="../images/love.png">

</span>

<span>

<imgsrc="../images/love.png">

</span>

<span>

<imgsrc="

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论