现认知盒模型的基础概念

最新推荐文章于 2024-10-13 22:58:41 发布
原创 最新推荐文章于 2024-10-13 22:58:41 发布 · 251 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css #html

本文深入解析了标准盒模型的四个组成部分：margin、border、padding和content的特性及它们如何影响元素的尺寸和布局。特别强调了在不同盒模型设定下，padding和margin值对盒子尺寸的影响。

1、基本概念

标准盒模型由一下4个值组成
1、margin(外围区域)
2、border(边框区)
3、padding(内填充区)
4、content(内容区)
在这里插入图片描述

2、各属性的特点

1、padding值：

它的设置会影响盒子尺寸
占用空间
不同盒模型下的特点也不一样
标准盒模型设定下，影响盒子自身尺寸

怪异盒模型设定下，影响盒子内部内容的区域尺寸
怪异盒子，本身不会影响盒子设定好的外部尺寸
如图：
在这里插入图片描述

2、 margin值：
占用空间
影响同辈元素之间的距离
需要注意的是
上边元素的 margin-bottom 与 下边元素的 margin-top
取两者之间最大值, 不是相加关系
如图：
在这里插入图片描述

Dog is goD
关注
大数据与计算模型
fzq0625的博客
09-08 789
摘要当前，人工智能持续升温，大语言模型吸引了众多人士的关注，并在全球范围内掀起了一股热潮。人工智能的成功本质上不是大算力“出奇迹”，而是改变了计算模型。首先，肯定了数据对于人工智能的基础性作用，指出合成数据将是未来数据的主要来源。然后，回顾了计算模型的发展历程，重点介绍了神经网络模型与图灵模型的历史性竞争；指出了大模型的重要标志是机器涌现智能，强调大模型的本质是“压缩”；分析了大模型产生“幻觉”的原因。最后，呼吁科技界在智能化科研中要重视大科学模型。关键词： 人工智能 ; 大数据 ; 计算模型 ; 神经网络
ELPO: 基于集成学习的提示优化深度研究
最新发布
步子哥的博客
11-26 49
ELPO（Ensemble Learning Based Prompt Optimization）的核心理念在于克服现有自动提示优化（APO）方法普遍存在的两大根本性难题：单一优化算法的脆弱性与候选提示池的低效管理 。传统的APO方法，无论是基于反馈驱动的迭代、进化算法还是轨迹探索，往往依赖于单一的生成或搜索策略。然而，根据优化领域的“没有免费午餐”（No Free Lunch）定理，没有任何一种单一的优化策略能够在所有任务中都保持最优表现，这导致这些方法在面对复杂多变的任务时表现出固有的脆弱性 。此外，现
CSS盒模型基础概念
Emma946的博客
03-20 783
CSS盒模型 以下是我整理的一些内容 盒模型是HTML+CSS中最核心的基础知识。它规定了网页元素如何显示以及元素间相互关系。Css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 它是由什么组成的呢 content(内容区)：盒子里的内容 padding(填充区)：盒子与内容之间的距离 border(边框区)：盒子的厚度...
盒模型基本概念
weixin_30384031的博客
09-11 153
盒模型 规定了元素框处理元素内容、内边距、边框距和 外边距的方式。 1、内边距 元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。 Padding：简写属性。 Padding-bottom：设置元素的下内边距。 Padding-top：设置元素的上内边距。 Padding-left：设置元素的左内边距。 Padding-right: 设置元素的右内...
盒模型的基础
Yotocy_mst的博客
02-23 187
1：什么是盒模型， 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。 2：盒模型的组成， 即：由content +padding +border+margin组成基本的框架 3：padding 1.padding是在盒子里面，在盒子与内容之间 2....
盒模型概述
qq_56008371的博客
03-27 843
1.基本概念 任何一个元素都能生成一个盒子，不同的元素产生的盒子类型可能不同，一个元素产生什么样的盒子取决于它的display属性。 2.分类 元素是什么盒子看他的属性display 属性，该属性为不可继承 display:none （不生成盒子） dispaly:block(块盒，独占一行) display：inline （行盒，在一行显示） display:其他取值 3.基本组成 盒模型由四部分组成，从外到里依次为： margin (外边距) border(边框) padding(内边距
CSS盒模型知识整理与理解（1）--- 基本概念
Yuval的博客
01-06 1556
CSS-盒模型知识整理与理解： CSS盒模型知识整理与理解（1）--- 基本概念 CSS盒模型知识整理与理解（2）--- 边距重叠问题详解 CSS-盒模型知识整理与理解（3）--- BFC详解   CSS盒模型知识整理与理解 --- 盒模型的基本概念 本文涉及知识： 盒模型的概念 标准模型和IE盒模型的区别 JS获取盒模型宽高的方法 盒模型的边距重叠问题 BFC的理解（概念、...
公开课 | 2024最新清华大模型公开课 第3课 神经网络与大模型基础 Part 2
ys707663989的博客
10-13 727
本文深入探讨了神经网络、大模型及其在语言任务中的应用，分析了大模型的发展历程、认知能力和多领域应用。
杨歌：金融电路与 Web3 经济模型原理
qq_32193015的博客
10-13 723
金融电路与 Web3 经济模型原理
阿里巴巴云计算基础设施实践--读后感
qq_51098044的博客
05-09 908
这是博主工作闲时的一些日常学习记录，有些之前很熟悉的，但工作中不常用，慢慢就遗忘了，在这里记录，也是为了激励自己坚持复习，如果有能帮到你，那我将感到非常的荣幸~
盒模型-深入理解盒模型及相关概念
weixin_33802505的博客
03-15 470
Created By JishuBao on 2019-03-15 12:38:22 Recently revised in 2019-03-15 12:38:22   欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址    文章简介： 1、盒模型基本概念 2、何为border-box? 3、盒模型的其他属性 4、JS获取宽高 5、边距重叠 6、BFC（...
盒子模型基础知识
你好牛蛙！
10-23 378
盒子模型又叫做框模型 要点： 1.css处理网页时，他认为每个元素都包含在一个不可见的盒子里面 2.如果我们把所有的元素都想象成盒子，我们对网页中进行布局就可以看作是在网页页面中摆放盒子 3.我们只需要把盒子摆放在相应的位置我就能完成网页的布局 盒子的组成部分： 内容区(content) 最里面是内容区(content)，即放东西的区域，放子元素 边框(border): 最外层是边框(border) 内边距(padding): 内容区跟边框的距离叫做内边距(padding) 外边距(margi
盒模型的概念及使用
qq_46578091的博客
03-16 1089
首先，我们要先了解什么是盒模型。盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)，如下图： 我们先在H5中定义一个元素 查看代码之后，如下： 可以看见实际内容去变小了，但是元素实际所占区域还是没变，这就是怪异盒模型，而我们的按钮标签就是一个典型的怪异盒模型，例子如...
一些常见的CSS基础概念 + 盒模型
weixin_43986955的博客
04-29 298
笔记一篇，备查。 盒模型： margin：外边距 border：边框 padding: 内边框 块元素（block） 占行(自动换行， 可设置高宽)，例如：<div>，<p>,<h1>，<h1-h6>,<pre>,<label>,<table>,<form>,<li>,<ol>...
什么是盒模型
热门推荐
wenqianqian1的博客
03-01 1万+
盒模型 1、什么是盒模型？ 盒模型的作用：规定了网页元素如何显示以及元素间的相互关系 盒模型的概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。 2、盒模型是怎样组成的？ 盒模型的组成部分=content（内容区）+padding（填充区）+bord...
盒模型概念
weixin_41534129的博客
03-01 2058
盒模型的概念 盒模型是CSS布局的基石，规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（内填充）、边框、边界(外边距)这就是盒模型。 3.盒模型的组成 盒模型组成 = content(内容) + padding(内填充) + border(边框) + margin(外边距) 内填充：padding,在设定页面中一个元素内容到元素的边缘(边 框) 之间的距离。 也称补白。padding不可以写负值！ 4.paddi..
盒模型与BFC
田兴的博客
08-26 9629
1. 什么是盒子模型？ 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。 2.盒子模型有哪两种 标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器
盒子模型的基本概念
weixin_45746803的博客
11-07 4336
简介 CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通...
css盒子基础笔记
HXGNMSL的博客
03-03 689
盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。 语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值） ​ solid：边框为单实线(最为...
Web程序设计基础课程教学大纲概述
学生将学习内联样式、内部样式表和外部样式表三种引入方式，掌握选择器（元素、类、ID、后代等）、盒模型、浮动、定位、弹性布局（Flexbox）等关键概念，能够实现复杂的页面布局与视觉效果。结合HTML结构与CSS表现...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值