(6)css盒子模型(基础下)

一、理解多个盒子模型之间的相互关系

 现在大部分的网页都是很复杂的,原因是一个“给人用的”网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着。

 

html与DOM的关系

详情了解“DOM” :http://baike.baidu.com/link?url=SeSj8sRDE-JZnTdkIQgh-P2nEMvoYdvis19aXaGJrMVCQCV_r3mA1kJ7vaCam4wpPLAsQ9T3WyhRfbP4Bdi6yrZolr5_bf7sLtTeFOWDMBu

DOM 是 Document Object Model(文档对象模型)的缩写。“一个网页的所有元素组织在一起,就构成一颗DOM树。”

(HTML DOM 节点树)

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:

<html><head><title>DOM树与盒子模型的关系</title></head><body><h1>DOM树</h1> 
<a href="****">DOM树结构关系</a></body></html>

上图是把一个html文档的内容组织起来,形成了严格的层次结构。

上面所有的节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。举例,<head> 和 <body> 的父节点是 <html> 节点,文本节点 "DOM树结构关系" 的父节点是 <a> 节点。大部分元素节点都有子节点。
比方说,<head> 节点有一个子节点:<title> 节点。<title> 节点也有一个子节点:文本节点 "DOM树与盒子模型的关系"。
当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1> 和 <a>是同辈,因为它们的父节点均是 <body> 节点。
节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是 <html>节点的后代,而第一个文本节点是 <head> 节点的后代。
节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把 <html> 节点作为先辈节点。

标准文档流(Normal Document Stream),简称:标准流。

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。

HTML文档中的元素可以分为两大类:行内元素和块级元素。

1、行内元素

不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
比如<span>与</span>、<strong>与</strong>标记

2、块级元素
总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
比如:<div>与</div>标记
3、标准流就是css规定的默认的块级元素和行内元素的排列方式

在用css排版的页面中经常使用到<span>和<div>标记,利用这俩个标记,加上css对其样式的控制,可以很方便地实现各种效果。
<span>标记与<div>标记都是视作为容器标记而被广泛应用在html语言中。
<span>标记与<div>标记的区别在于:
        <div>是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等,div包围的元素会自动换行。
<span>是一个行内元素,在SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
代码:
<!doctype html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>div与span的区别</title></head><body><p>div标记自动换行</p><div> 第一章</div><div> 第二章</div><div> 第三章</div><p>span标记同一行</p><span> 第四章</span><span> 第五章</span><span> 第六章</span><hr/><p>div标记自动换行</p><div> <img src="apple.jpg"></div><div> <img src="apple.jpg"></div><div> <img src="apple.jpg"></div><p>span标记同一行</p><span> <img src="apple.jpg"></span><span> <img src="apple.jpg"></span><span> <img src="apple.jpg"></span></body>

效果图:

  

4、盒子在标准流中的定位原则
若想精确地控制盒子的位置,那么必须深入了解margin元素;margin元素是用于调整不同盒子之间的位置关系。
(1)、行内元素之间的水平margin
当两个行内元素紧邻时,他们之间的距离是第一个
行内元素的margin-right加上第二个行内元素的margin-left。
代码:
<!doctype html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>两个行内元素的margin</title><style type="text/css">span{background-color:red;text-align:center;font-family:Arial,宋体 ;font-size:18px;padding:14px;}span.left{margin-right:25px;background-color:green;}span.right{margin-left:35px;background-color:yellow;}
</style></head><body><span class="left">行内元素1</span><span class="right">行内元素2</span></body>
</html>
效果图:

 
(2)、块级元素之间的竖直margin
两个元素的之间的距离不是margin-bottom加margin-top的总和,而是两者中的较大者。
代码:
<!doctype html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>两个块级元素之间的竖直margin</title><style type="text/css">div{background-color:red;text-align:left;font-family:Arial,sans-serif ;font-size:12px;padding:10px;}</style></head><body><div style="margin-bottom:40px;">第一个块级元素</div><div style="margin-top:20px;">第二个块元素</div></body>
</html>

效果图:

(3)、嵌套盒子之间的margin
 当一个<div>块包含在另一个<div>块中时,便形成了典型的父子关系。其中儿子块的margin将以父块的内容为参考。

在标准流中,一个块级元素的盒子水平方向的宽度会自动延伸,直至上一级盒子的限制位置。

案例:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>父子块的margin</title>
<style type="text/css">
div.father{background-color:red;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:20px;border:1px solid green;}
div.son{background-color:gray;margin-top:30px;padding:15px;border:1px dashed #000000;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
</html>
效果图:

 
以上第二节所介绍的是标准流中的盒子排列方式。
以上内容部分来自http://www.artech.cn。
 
 


转载于:https://www.cnblogs.com/KTV123/p/5516677.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

easyui获取下拉框选中的文本值_Word中文本显示不全的常见3种情况及解决方法

在日常工作使用Word文档时&#xff0c;经常会遇到文本显示不全的情况&#xff0c;比如文本框或表格里的文本显示不全等情况&#xff0c;你一般是怎么操作呢&#xff1f;以下这3种常见情况你可能也遇到过&#xff0c;一起看看是什么原因并解决它们吧&#xff01;1、文本显示不全…

企业IT架构转型之道:阿里巴巴中台战略思想与架构实战. 导读

企业IT架构转型之道 阿里巴巴中台战略思想与架构实战 钟 华 编 著 前 言  在过去15年的IT从业经历中&#xff0c;有很长一段时间我都是以软件服务商的身份参与了企业的IT系统建设&#xff0c;对于过去十几年来企业IT的发展有一定的认知和理解&#xff0c;带着对互联网技术…

计算机软件技术大作业报告,多媒体技术大作业报告.doc

多媒体技术大作业报告.doc华南理工大学多媒体技术大作业报告专 业&#xff1a;班 级&#xff1a;学 号&#xff1a;学生姓名&#xff1a;完成时间&#xff1a;目录说 明 ……………………………………………………3第一章概述 …………………………………………………4第二章技…

ES6入门之Generator函数

Generator Generator函数是ES6提供的一种异步编程解决方案&#xff0c;Generator函数是一个状态机&#xff0c;封装了多个内部状态。 执行Generator函数会返回一个遍历器对象&#xff0c;也就是说&#xff0c;Generator函数除了状态机&#xff0c;还是一个遍历器对象生成函数。…

reddit_Reddit如何设计和编码其详尽的愚人节体验,/ r / place

redditHere are three links worth your time:这是三个值得您花费时间的链接&#xff1a; How Reddit designed and coded its elaborate April Fool’s experience, /r/place (17 minute read) Reddit如何设计和编码其详尽的愚人节经验/ r / place( 阅读17分钟 ) These hacka…

CSS中属性的值和单位

CSS中值的单位 1.颜色值 被各种浏览器支持&#xff0c;并且作为 CSS 规范推荐的颜色名称只有 16 种&#xff0c;如下表所示。 百分比表示 color: rgb(100%, 100%, 100%); 这个声明将红、蓝、绿 3 种原色都设置为最大值&#xff0c;结果组合显示为白色。相反&#xff0c;可以设置…

mysql能否在手机端运行_在手机上安装linux并部署mysql,jupyter用于数据探索

因为现在有一台旧手机放在学校,之前使用的软路由内存只有128M,不方便存一些小的数据.手机的好处是可以一直开着,因此在手机上安装linux来替代树莓派做服务器是可行的(由于不需要对外,所以也不用购买服务器).安装linux首先安装busybox1.对于busybox,进入左上角settings,设置inst…

《走进SAP(第2版)》——2.8 SAP的目标是什么

本节书摘来自异步社区《走进SAP&#xff08;第2版&#xff09;》一书中的第2章&#xff0c;第2.8节,作者&#xff1a; 【德】Nancy Muir , Ian Kimbell , 等 更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.8 SAP的目标是什么 走进SAP&#xff08;第2版&#xff09;…

尼康d850相机参数测试软件,尼康 - D850 - 产品介绍

类型数码单镜反光相机镜头卡口尼康F卡口(带有AF耦合和AF接点)有效视角尼康FX格式影像传感器格式FX格式影像传感器类型CMOS传感器有效像素数约4,575万影像传感器约35.9mm x 23.9mm总像素数约4,689万灰尘减少功能清洁影像传感器图像尺寸(像素)-FX (36x24) 影像区域(L) 8256 x 550…

我如何构建Kubernetes集群,以便我的同事可以更快地部署应用程序

by cheungpat通过cheungpat 我如何构建Kubernetes集群&#xff0c;以便我的同事可以更快地部署应用程序 (How I built a Kubernetes cluster so my coworkers could deploy apps faster) How do you encourage your development team to build more projects without being bo…

使用uWSGI部署django项目

先说说什么是uWSGI吧&#xff0c;他是实现了WSGI协议、uwsgi、http等协议的一个web服务器&#xff0c;那什么是WSGI呢&#xff1f; WSGI是一种Web服务器网关接口。它是一个Web服务器&#xff08;如nginx&#xff09;与应用服务器&#xff08;如uWSGI服务器&#xff09;通信的一…

8 包含min函数的栈

0 引言 题目&#xff1a;定义栈的数据结构&#xff0c;请在该类型中实现一个能够得到栈的最小元素的min函数。在该栈中&#xff0c;调用min、push及pop的时间复杂度都是O&#xff08;1&#xff09;. 1 抽象问题具体化 2 具体问题抽象分析 需要解决的两个主要问题如下。 &#x…

《Adobe Illustrator大师班:经典作品与完美技巧赏析》—Svetlana Makarova

本节书摘来自异步社区《Adobe Illustrator大师班&#xff1a;经典作品与完美技巧赏析》一书中的Svetlana Makarova&#xff0c;作者【英】Sharon Milne,更多章节内容可以访问云栖社区“异步社区”公众号查看。 Svetlana MakarovaAdobe Illustrator大师班&#xff1a;经典作品与…

navicat无法连接远程mysql数据库_navicat无法远程连接mysql的解决方法

近日在Ubuntu上安装了一个 MySQL 5.0&#xff0c;因为使用 phpMyAdmin 还必须安装 PHP&#xff0c;所以打算直接使用远程管理工具Navicat for MySQL 来连接。在 Ubuntu 中通过 mysql 命令行创建好一个数据表并分配了权限&#xff1a;代码如下:GRANT ALL ON testdb.* TO usera I…

有关软件测试的证书,软件测试证书有用吗

要想知道证书有什么用&#xff0c;我们就要详细了解软件评测师考试&#xff0c;以及拿到证书的价值。那么下面和小编来看看这篇软件测试证书有用吗&#xff0c;一定会有收获。一、证书考试软件评测师考试是全国计算机技术与软件技术资格考试的一个中级考试。考试不规定学历和资…

计算机科学导论第五版_五月份将开始提供438项免费在线编程和计算机科学课程

计算机科学导论第五版Five years ago, universities like MIT and Stanford first opened up free online courses to the public. Today, more than 700 schools around the world have created thousands of free online courses.五年前&#xff0c;麻省理工学院和斯坦福大学…

python D29 socketserver以及FTB

一、socketserver 基于tcp协议下的socket只能和一个客户端通信&#xff0c;如果用socketserver可以实现和多个客户端通信。 他是在socket的基础上进行封装&#xff0c;也就是说底层还是调用的socket&#xff0c;在py2.7里面叫做SocketServer也就是大写了两个S&#xff0c;在py3…

计算机节电模式不能打开,电脑进入节电模式打不开怎么办

大家好&#xff0c;我是时间财富网智能客服时间君&#xff0c;上述问题将由我为大家进行解答。电脑进入节电模式打不开的原因及解决方法如下&#xff1a;1、显示器和显卡接触不良解决办法&#xff1a;检查显示器和显卡的连接是否正确&#xff0c;接触是否良好&#xff1b;2、显…

sphinx mysql存储引擎_基于Sphinx+MySQL的千万级数据全文检索(搜索引擎)架构设计...

Sphinx&#xff0c;单一索引最大可包含1亿条记录&#xff0c;在1千万条记录情况下的查询速度为0.x秒(毫秒级)。Sphinx创建索引的速度为&#xff1a;创建100万条记录的索引只需3&#xff5e;4分钟&#xff0c;创建1000万条记录的索引可以在50分钟内完成&#xff0c;而只包含最新…

《第一桶金怎么赚——淘宝开店创业致富一册通》一一1.1 创业者需具备的素质...

本节书摘来自异步社区出版社《第一桶金怎么赚——淘宝开店创业致富一册通》一书中的第1章&#xff0c;第1.1节&#xff0c;作者&#xff1a;葛存山&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.1 创业者需具备的素质 第一桶金怎么赚——淘宝开店创业致…