(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、文本显示不全…

CSS中属性的值和单位

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

《走进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;…

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;经典作品与…

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

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

python D29 socketserver以及FTB

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

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

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

4-1 线程安全性-原子性-atomic-1

转载于:https://www.cnblogs.com/ZHONGZHENHUA/p/10026627.html

delphi7 提示注册过期问题

很同情你得经过~ 因为我以前也是经常遇见这个问题~就和你说得一样~ 后来~ 我发现 下载使用的Delphi 7只能使用一个注册码&#xff0c;那就是:6AMD-PKG68E-DB8PP7-9SFE 3QH-9QW所以,你先把C:\Documents and Settings\Administrator\.borland文件夹下的两个文件删除然后用 Progra…

计算机开机引导的结果是,电脑开机显示引导媒体是怎么回事

电脑开机显示引导媒体是怎么回事分类&#xff1a;数据恢复常见问题|最后更新&#xff1a;2020年4月9日开机显示重新启动并选择适当的引导设备或插入1.如果主机上接有可移动存储介质(如光盘、移动硬盘、U盘等),将其拔掉,然后重启。2.如果仍然这样,进入主板设置中,依次检测以下几…

mysql怎样修改my ini_mysql修改my.ini报错怎么办

mysql修改my.ini报错的解决办法&#xff1a;首先将mysql默认编码改成utf8mb4&#xff0c;并修改【my.ini】配置&#xff1b;然后修改变量&#xff0c;并检查是否设置成功即可。更多相关免费学习推荐&#xff1a;mysql教程(视频)mysql修改my.ini报错的解决办法&#xff1a;将mys…

spring-DataSource

spring支持的dataSource有好多&#xff0c; 如&#xff1a;自带的org.springframework.jdbc.datasource.DriverManagerDataSource ibatis、c3p0、JDBC、hibernate等等&#xff1b; 首先看第一种&#xff0c;使用自带的datasource&#xff1a; 1、项目结构 提示&#xff1a;spri…

《Nmap渗透测试指南》—第7章7.8节后台打印机服务漏洞

本节书摘来自异步社区《Nmap渗透测试指南》一书中的第7章7.8节后台打印机服务漏洞&#xff0c;作者 商广明,更多章节内容可以访问云栖社区“异步社区”公众号查看。 7.8 后台打印机服务漏洞表7.8所示为本章节所需Nmap命令表&#xff0c;表中加粗命令为本小节所需命令——后台打…

VSCODE 配置远程调试环境

以下内容为本人的著作&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「englyf」https://mp.weixin.qq.com/s/f1KZOlL92ojes-r2l9rlCw 我的需求是&#xff0c;在Windows桌面环境下&#xff0c;通过 VSCODE 远程调试在服务器(或者其它远程主机)的工程代码。其实就…

html动态网页效果代码_教你制作网页的第一步

Internet中有许多漂亮、美观的网页&#xff0c;要制作出这样的网页&#xff0c;必须先了解什么是网页&#xff0c;网页的基本组成是怎样的。网页又称为Web页&#xff0c;一般都包含图像、文字和超链接等元素。按表现形式的不同&#xff0c;网页可分为静态网页和动态网页。静态网…

Spring Cloud 7:Gateway

Zuul 网关 Zuul 是 Netfilx 开源的一个 API Gateway 服务器&#xff0c;本质是一个 Web Servlet 应用。其在微服务架构体系中提供动态路由、监控、弹性、安全等边缘服务。 使用 Zuul 作为网关&#xff0c;其主要原因有以下几点&#xff1a; 1、Zuul、Ribbon 以及 Consul 客户端…

python基础-第三篇-函数编程

基本数据类型之set set是无序不允许重复的集合set创建&#xff1a;s set&#xff08;&#xff09; 创建空集合 s {11,22,33}转换s set&#xff08;可迭代数据&#xff09;li [11,22,33,44] s set(li) print(s) #结果为{33, 11, 44, 22} 集合元素的添加与清空se {11,22,…

10个 Linux/Unix下 Bash 和 KSH shell 的作业控制实例

Linux 和 Unix 属于多任务的操作系统&#xff0c;也就是说一个系统在同一时间段内能运行多重任务(进程)。在这个新的博客系列&#xff0c;我将会列出相关的 Linux 和 Unix 作业&#xff08;job&#xff09;控制的命令&#xff0c;你可以通过这些命令在 Bash 或 Korn 还有 POSIX…

微信小程序 - 骨架屏

骨架屏 - “与其等待网络加载&#xff0c;不如提前给点暗示” 注&#xff1a;不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中&#xff0c;观看需了解组件使用. 示例下载&#xff1a;微信小程序-骨架屏演示 转载于:https://www.cnblogs.com/cisum/p/10032448.html