盒子模型及DOCTYPE文档类型

最新推荐文章于 2023-01-26 15:32:25 发布
最新推荐文章于 2023-01-26 15:32:25 发布
阅读量629 收藏 1
点赞数
分类专栏： HTML/CSS 文章标签： 盒子模型 DOCTYPE Quirks Standard
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jaune617/article/details/53129031
版权
1、盒子模型简述

盒子模型是CSS布局中最基本组成部分，在页面上每个元素都以一个矩形的表现形式存在，每个矩形由元素的内容(content)、内补丁(padding)、边框(border)和外补丁(margin)组成。一个元素的盒子模型有多大，那么该元素在页面中所占的空间也将有多大。

盒子模型有两种，分别是W3C标准盒子模型和IE盒子模型。

标准盒子模型

这里写图片描述

盒子模型的宽度=margin-left的值+border-left-width的值+padding-left的值+width的值+padding-right的值+border-right-width的值+margin-right的值；

盒子模型的高度=margin-top的值+border-top-width的值+padding-top的值+height的值+padding-bottom的值+border-bottom-width的值+margin-bottom的值；

IE盒子模型

这里写图片描述

触发Quirks(怪异模式)后的IE浏览器的盒子模型的计算方式是将边框（border）和内补丁（padding）的值归入盒子模型的宽度（width）及高度（height）中，也就是说盒子模型的总宽度及总高度应该为：

盒子模型的宽度=margin-left的值+width的值+margin-right的值；

盒子模型的高度=margin-top的值+height的值+margin-bottom的值；

2、Quirks(怪异模式)和Standard(标准模式)

(X)HTML文件必须有<!DOCTYPE> 声明，默认情况下，Chrome、FF与IE的解释标准不一样，也就是说如果一个网页没有<!DOCTYPE> 声明，它就会以默认的<!DOCTYPE> 解释下面的HTML。

IE浏览器有两种渲染方式：Quirks(怪异模式)和Standard(标准模式)。

在Standard(标准模式)中，浏览器根据规范表现页面；
在Quirks(怪异模式)中，页面以一种比较宽松的向后兼容的方式呈现。
Quirks(怪异模式)通常模拟老式浏览器的行为以防止老站点无法工作。

因此，学习网页标准、浏览器兼容、认识<!DOCTYPE> 标签很有必要的。

3、DOCTYPE文档类型
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
HTML 4.01 与 HTML5 之间的差异
HTML 4.01 中有三种 <!DOCTYPE> 声明，即Strict（严格类型）、Transitional（过渡类型）和Frameset（框架类型）。
HTML5 中只有一种：<!DOCTYPE html>

参考 W3CSchool API 文档
参考 《CSS那些事儿》

Jaune617
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOCTYPE 文档类型声明(网页爱好者必看)
09-28
档类型声明与不声明，将会导致你的css或js都无法正常安装要求显示。所以好多网站都声明了文档类型。这样做有什么好处大家可以看看下面的文章。
什么是盒子模型
热门推荐
yang114544的博客
07-29 2万+
1.什么是盒子模型 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性 首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height 2.盒模型能够给我们解决什么问题： 盒子模型主要是针对页面布局的时候来使用，他规范了我们页面的所有所有元素的一个布局规范是由外向内进行布局。 盒模型由外向内：margin（外边距）border（边框）
盒模型概述
qq_56008371的博客
03-27 742
1.基本概念 任何一个元素都能生成一个盒子，不同的元素产生的盒子类型可能不同，一个元素产生什么样的盒子取决于它的display属性。 2.分类 元素是什么盒子看他的属性display 属性，该属性为不可继承 display:none （不生成盒子） dispaly:block(块盒，独占一行) display：inline （行盒，在一行显示） display:其他取值 3.基本组成 盒模型由四部分组成，从外到里依次为： margin (外边距) border(边框) padding(内边距
盒子模型介绍
qindayong
04-14 782
1、盒子模型介绍 元素在页面中显示成一个方块，类似一个盒子，CSS 盒子模型就是使用现实中盒 子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下： 把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。 2、设置边框 border-top-color:red;/* 设置顶部边框颜色为红色 *...
什么是盒子模型？
leezh_123的专栏
01-26 5961
什么是盒子模型？ 盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框 盒子模型有 2 种:标准盒子模型与怪异盒子模型 标准盒子模型=content(内容)+border(边框)+padding(内边距) 怪异盒子模型=content(内容)(已经包含了 padding 和 border) css3 种可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换,怪异盒子模型:box-sizing: border-box;标准盒子模型:box-sizing
DOCTYPE类型详细介绍
09-28
我们在HTML里面声明DOCTYPE一般会有以下几种：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE ...
IE盒子模型和标准W3C盒子模型
09-27
网页制作Webjx文章简介：盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的...
doctype:HTML文档类型的信息
05-06
有关HTML / XHTML / MathML / SVG文档类型的信息。 安装 该软件包仅适用于ESM：需要使用Node 12+才能使用它，并且必须将其import而不是require d。 ： npm install doctype 用 import { doctype } from 'doctype'...
深入理解CSS中的盒子模型
11-30
很多人对盒子模型搞晕头了，下面通过一个简单的代码来分析盒子模型的结构！ 为了方便方便观看！在第一个div中画了一个表格，并将其尺寸设置成与div内容大小一样！且设置body的margin和padding的属性都为0px； 本例子...
什么是盒模型？盒模型的组成都有哪些
weixin_46501637的博客
04-22 7634
盒模型概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区) 作用：控制元素和元素之间，或者元素和内容之间的位置关系。 不同部分的说明： content(内容)：盒子的内容，显示文本和图像。 border...
HTML5学习之盒子模型概念分析
weixin_34409703的博客
05-10 1491
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。　　(1)盒模型的概念：　　CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：　　border:元素的边框(可能不可见)，用于将框的边缘与其他框分开;　　marg...
盒子模型是啥？？简述一下标准盒模型、怪异盒模型的区别。
qq_31906983的博客
08-07 5657
在网上查了很多关于盒子模型的资料，下面进行一个总结。。 首先，盒模型一共有2种模式，分别是 符合W3C标准的‘标准盒模型’ 和 在IE下的‘怪异盒模型’。 我们知道无论是哪个模型，一个盒子的    总宽度 = content(内容) + padding + border 。 在html的首部，我们经常会看到一个&lt;!Doctype html&gt;的声明，浏览器根据这个声明来判断这个文件...
盒子模型简述
dongaokyamo7970的专栏
01-15 376
盒子模型：盒子模型分为4个板块，分别是：margin,border,padding,content。 margin:可以设置盒子的外边框与其他盒子之间的距离。 border:可以设置盒子边框的属性，例如边框的高度之类的。 padding:可以设置盒子里的内容与盒子内边框的距离，也就是content与内边框的距离。 content:这个就是盒子里边的内容区域，例如可以放<a&...
盒模型详解
langmanboy的博客
04-07 1万+
盒模型 1. 盒模型 CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素 CSS 中组成一个块级盒子需要: Content box（内容）: 这个区域是用来显示内容，大小可以通过设置 width 和 height Padding box（内边距）: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置 Border box（边框）: 边框盒包裹内容和内边距。大小通过 border 相关属性
盒子模型
yangyingjian123的博客
01-18 1143
1、盒子模型 什么是盒子模型: 盒子模型是一个概念，外面一个大的容器，里面装有不同的一个个的小的容器。比如说你买一套化妆品,把里面的水乳霜洗面奶等不同的东西,放在一个包装盒里面 是一种设计思路，按照这样的思路来设计我们的网页 优点:利于后期的维护 2、边框 ①四条边框同时设置 border; 边框宽度 边框样式 边框颜色 边框样式: solid 实线 dashed虛线 double双实线 dotted点状虚线 例子: border:1 px solid red; 3、边框分开设置
HTML文档与盒子模型
weixin_30632089的博客
05-24 91
　　关于HTML 　　百度百科里是这么说的：超文本标记语言，即HTML(Hypertext MarkupLanguage)，是用于描述网页文档的一种标记语言。 　　为什么叫用于“描述”网页文档的“标记”语言呢? 　　简单地说，它不像Java，C++等程式语言，而是通过标记(也称标签)来表示一个网页的结构与内容，它的语法非常简单，只是由各种不同的标记组合而成，因此这类语言的学习方式主要靠积累...
DOCTYPE声明、显示模式（标准模式、怪异模式）、盒子模型
qq_35936643的博客
01-22 1121
DTD文档模型及显示模式（标准模式、怪异模式） DTD（Document Type Defination）文档模型由DOCTYPE声明称为文件类型定义，浏览器会通过识别DTD采用相对应的渲染模式（标准模式、怪异模式），声明HTML版本，让浏览器解析器知道应该用哪个规范来解析文档。 标准模式和混杂模式 标准模式（又称严格模式，Standards模式）：是指浏览器按照 W3C 标准解析代码
关于DOCTYPE
weixin_34419321的博客
02-01 148
轉自:http://www.blueidea.com/tech/web/2007/5172.asp DOCTYPE不可怕，但把它拿走，会让你怕了又怕。 最近在蓝色理想转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocT...
盒子模型实验环境搭建
最新发布
05-26
盒子模型是Web前端开发的基础概念之一，它用于描述HTML元素在浏览器中的布局和排列。为了搭建盒子模型的实验环境，您需要做以下几个步骤： 1.安装浏览器：您可以选择任何一款主流浏览器，如Google Chrome、Firefox、Safari等。 2.安装代码编辑器：您需要选择一个适合您的代码编辑器，如Visual Studio Code、Sublime Text等。 3.创建HTML文件：在您的代码编辑器中创建一个HTML文件，命名为“index.html”。 4.编写HTML代码：在HTML文件中编写HTML代码来创建一个盒子模型的实例，如下所示： ``` <!DOCTYPE html> <html> <head> <title>盒子模型实验环境</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: #f2f2f2; border: 1px solid #ccc; padding: 10px; margin: 10px; box-sizing: border-box; } </style> </head> <body> <div class="box">这是一个盒子模型实例</div> </body> </html> ``` 在上面的代码中，我们定义了一个类名为“box”的div元素，并为其设置了宽度、高度、背景颜色、边框、内边距和外边距等属性，以形成一个盒子模型的实例。 5.在浏览器中打开HTML文件：在您的浏览器中打开“index.html”文件，即可看到盒子模型的实例。 通过以上步骤，您已经成功搭建了一个盒子模型的实验环境。您可以进一步尝试修改CSS属性，来了解盒子模型的布局和排列方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值