css-标准盒模型和怪异盒模型

2023-10-12 17:20

本文主要是介绍css-标准盒模型和怪异盒模型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

盒子模型定义

网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。对于是盒子的元素,如果没有特殊设置,其默认总是占独立的一行,宽度为浏览器窗口的宽度,在其前后的元素不管是不是盒子,都只能排列在它的上面或者下面,即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成,即内容区(content)、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性,通过对这些属性的设置可以丰富盒子的表现效果。

组成

内容区(content)

内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和overflow。

填充(padding)

填充是内容区和边框之间的空间。填充的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。

边框(border)

边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

空白边(margin)

空白边位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。空白边的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin,其具体的设置和使用与填充属性类似。

盒子模型的定位

网页默认的布局方式

文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在,它也是HTML中默认的网页布局模式,在没有特殊要求的情况下,页面中的块状元素呈现自上而下的动态分布形式,内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位,只能有一种方式可以选择,就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。

浮动

所谓浮动就是让设置的标签产生漂浮效果,脱离原来在页面本应出现的空间位置,不再占用任何文档流空间。元素设置为浮动以后,会生成一个块级元素,而不论它本身是何种元素。且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。

Position定位

页面布局使用最多的是相对定位和绝对定位。

相对定位:这种定位方式下元素不脱离文档流,仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物,通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。

绝对定位:这种定位方式下元素将脱离文档流,不占据空间,文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果

百度百科地址:https://baike.baidu.com/item/CSS%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/9814562?fr=aladdin

ie6盒子模型和w3c盒子模型可参考链接:https://www.cnblogs.com/BruceLeey/archive/2010/06/13/1757867.html

标准盒子模型

 

标准盒模型的计算为:标准盒模型的宽度 =  width + 左右margin + 左右padding + 左右border

box-sizing:content-box    //标准盒子模型 

元素宽高=边框+内边距+内容宽高

怪异盒子模型

怪异盒模型的计算为:怪异盒模型的宽度 = width + 左右margin

其中,怪异盒子的内容宽度width包含了左右padding和左右border

box-sizing:border-box   //怪异盒子模型

元素宽高=width属性/height属性

例子

以下为一个怪异盒模型的应用场景

<!DOCTYPE>
<html>
<head><meta charset="utf-8"/><style>*{margin:0;padding:0;}.outer{width:300px;height:300px;background:blue;}.outer .standard{float:left;width:200px;height:200px;background:red;}.outer .specil{float:right;width:100px;height:200px;background:green;}</style>
</head>
<body><div class="outer"><div class="standard"></div><div class="specil"></div></div>
</body>
</html>

 

给右侧添加border

<!DOCTYPE>
<html>
<head><meta charset="utf-8"/><style>*{margin:0;padding:0;}.outer{width:300px;height:300px;background:blue;}.outer .standard{float:left;width:200px;height:200px;background:red;}.outer .specil{float:right;width:100px;height:200px;background:green;border:2px solid black;}</style>
</head>
<body><div class="outer"><div class="standard"></div><div class="specil"></div></div>
</body>
</html>

 

<!DOCTYPE>
<html>
<head><meta charset="utf-8"/><style>*{margin:0;padding:0;}.outer{width:300px;height:300px;background:blue;}.outer .standard{float:left;width:200px;height:200px;background:red;}.outer .specil{float:right;width:100px;height:200px;background:green;border:2px solid black;padding:20px;box-sizing:border-box;}</style>
</head>
<body><div class="outer"><div class="standard"></div><div class="specil">111</div></div>
</body>
</html>

 

这篇关于css-标准盒模型和怪异盒模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/197291

相关文章

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

C++ Primer 标准库vector示例详解

《C++Primer标准库vector示例详解》该文章主要介绍了C++标准库中的vector类型,包括其定义、初始化、成员函数以及常见操作,文章详细解释了如何使用vector来存储和操作对象集合,... 目录3.3标准库Vector定义和初始化vector对象通列表初始化vector对象创建指定数量的元素值

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

SpringBoot快速接入OpenAI大模型的方法(JDK8)

《SpringBoot快速接入OpenAI大模型的方法(JDK8)》本文介绍了如何使用AI4J快速接入OpenAI大模型,并展示了如何实现流式与非流式的输出,以及对函数调用的使用,AI4J支持JDK8... 目录使用AI4J快速接入OpenAI大模型介绍AI4J-github快速使用创建SpringBoot

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl