前端第二十天

理解CSS盒模型：content-box与border-box
原创 已于 2022-03-05 16:44:15 修改 · 291 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #前端

于 2022-03-04 19:39:56 首次发布
本文深入探讨了CSS盒模型的两种类型——content-box（标准盒模型）和border-box（怪异盒模型）。content-box模型中，元素的实际尺寸只包含内容，不包括内边距和边框；而在border-box模型中，元素的宽度和高度则包括内容、内边距及边框。了解并正确使用这两种模型对于前端布局至关重要。

学习了盒子模型。

box-sizing属性

  • content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框 【标准盒模型】

  • border-box： 盒子的实际高度和宽度包括元素内容、边框和内边距 【怪异盒模型】

反射狐
关注
自学前端第二十天:圆角border-radius属性和盒子阴影boxshadow和linear-gradient颜色渐变
weixin_47592060的博客
04-30 1282
一.css3 新增样式(美学特效) CSS3概念: 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。 二.border-radius 圆角属性 ①(一个PX值(最常用)： 四个圆角值相同(4px , 8px ,50%全圆形,最常用)) ②(四个PX值(设置宽2高1上侧半圆最常用): heightPX, heightPX,0 ,0;
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
学习前端第二十二天（Switch语句，函数）
xggfdf的博客
04-16 830
返回值：返回一个确定值，中断程序执行。函数名命名规则和变量名一样。局部变量（函数的参数）共享同一段代码的几个。分支可以被分为一组。
2025年前端面试题汇总
热门推荐
sun_qqq的博客
02-08 13万+
最近面试被打击的体无完肤，于是把面试题记录下来分享一下。vue真是必问框架，八股文该背的还是得背！
中级前端进阶方向 框架篇第二十三步) 并发（Concurrency）
DeppBing的博客，全栈修炼记｜记录一个开发者的进化轨迹
09-23 1994
前端并发模式是在单线程环境下，通过调度策略和异步编程技术提升应用性能的实践方法。文章系统介绍了并发基础（事件循环、WebWorker等）、常见模式（并发请求、限流、节流等）及实现示例（Promise.all、AbortController等），并着重分析了React的并发特性。同时指出网络优化要点和常见陷阱（竞态条件、内存泄漏等），最后给出实战建议：关键路径高优先级、控制并发数、大任务拆分等。通过合理运用这些技术，可以在不阻塞UI的情况下最大化资源利用率。
学习前端的第二十一天——function函数
Robergean的博客
06-18 3783
function函数的介绍及用法
前端的第二十五天（事件、其他方法）
m0_56901161的博客
12-06 595
前端的第二十五天（事件、其他方法） 一、事件 1.jQuery 事件注册 2.jQuery 事件处理 3.jQuery 事件对象 二、其他方法 1.jQuery 拷贝对象 2.多库共存 3.jQuery 插件
前端常用第三方库
Litt_White的博客
12-12 6273
常用的第三方插件
前端学习第三天
weixin_43805192的博客
11-29 3957
第三天学习 今天是学习前端的第三天，准确的可以说是第四天因为第三天是自习，用来巩固前两天所学的前端知识，今天一上课老师就找同学上去进行例行检查，我也被叫上去了，结果就是20遍单词的抄写，接下来就是今天的教程了。 css选择器 1.后代选择器 空格 sel1 sel2 sel1里面的所有sel2 2. 子选择器 > 右括号 sel1>sel2 sel1下一目录下所有sel2 3. 兄弟选...
前端开发实习生的第一天
weixin_33763244的博客
07-09 2305
我今年大三，6月初找到了一份前端开发的实习工作，公司是北京某家A轮公司。约定好今天入职，我比规定报到时间的早到了半小时，到公司后被安排在人力资源部等我的入职联系人，大概20分钟之后到了指定办入职手续的办公室。同时办入职手续的还有8个人，其中也有一个实习生，后来跟她聊才知道她也是大三，是做产品的，也刚出来实习，居然跟我还是老乡，大学在中北大学读的，只想说我们俩缘分真的不浅，当然这是后话了。接着填写完...
微前端实战：打造高效、灵活的前端应用架构
程序边界
12-03 6510
微前端（Micro Frontends）是一种将大型单页应用拆分为多个独立的小型应用的技术方案。每个小型应用都可以独立开发、部署和运行，它们之间通过共享公共资源（如样式、组件等）来实现数据和状态的同步。微前端的核心思想是将前端应用分解为一组可独立维护、独立部署的子应用，从而提高开发效率、降低维护成本，同时保证系统的灵活性和可扩展性。将多个独立的应用程序组合成一个统一的前端应用程序将基于不同框架的代码组合在一起浏览器端组合、服务端组合以及路由高效的开发团队实践和项目工作流。
精选资源
大四学生前端实习的第六周周记
07-26
test方法接受两个参数，第一个参数是描述，第二个参数是函数，执行的判断方法。expect方法是另一个重要的概念，它传入的值是函数根据某个例子运行的结果，再利用匹配器进行判断是否一致。 在编写单元测试时，render...
精选资源
大四学生前端实习的第二周周记
07-26
通过这篇实习周记，我们可以看到作者在第二周的实习经历中，积累了许多宝贵的经验和知识点。下面，我们将对这些知识点进行详细的分析和总结。 React 框架 在这篇实习周记中，作者主要使用 React 框架来编写 Demo，...
精选资源
大前端面试小册（第二版本）.pdf
06-03
非常详细的前端面试手册，从js基础到vue，讲解的也非常深入，我反复看了好几遍值得购买
学习离线处理 [CSP-J 2022 山东] 部署
SHOJYS的博客
12-09 593
所谓离线, 就是等你操作完了后再问你问题, 每一次操作时间复杂度可能很大, 我们可以把操作堆起来最后一遍完成.我们记录完之后, 就是要统计答案了. 我们不妨先思考操作二该怎么统计., 而对于其子节点和祖先而言, 兵力都要增加。我们不妨记录两个内容, 一个是操作一在节点。最后展示总代码, 当然肯定与上述有部分出入.. 但问题来了, 它的子树都要增加。要求增加的兵, 不妨将其设为。要求增加的兵, 不妨将其设为。我们再思考操作一该怎么统计.而言, 其增加的兵力就是。而言, 其兵力增加就是。我们首先记录所有操作,
学习笔记095——Ubuntu 安装 lrzsz 服务？
最新发布
code__bee的博客
12-10 295
lrzsz是一款基于协议的文件传输工具集，专门用于在终端环境下实现本地与远程服务器之间的文件上传和下载，是 Linux/Unix 运维和开发场景中常用的轻量级工具。
周学习记录
qq_61434514的博客
12-08 290
看了三篇论文，准备对RDD进行复现。下周计划继续看一定论文数，对RDD进行复现。
防爆标识学习
qincjun的博客
12-08 283
设备保护等级:Equipment Protection Level 其实是指设备能应用在哪一个区域；防爆:指这个设备可以在有或可能有可燃或爆炸性的气体蒸气、粉尘等环境中使用。粉尘用G表示，矿井用M表示，气体用G表示。a.b.c.用于表示零区，一区，二区.Ga:比设备可用于爆炸性气体零区；
KM-ViPE 论文学习
calvinpaean的博客
12-08 1033
本文提出了一个名为 KM-ViPE（知识映射视频姿态引擎）​ 的新系统。传统 SLAM 的局限内容单一：传统SLAM（基于点、线、面等几何基元）只能重建几何结构，缺乏语义信息（不知道物体是什么）。场景脆弱：在动态环境中，运动物体会破坏帧与帧之间的数据关联，导致系统性能严重下降甚至失效。KM-ViPE 旨在克服这些限制。KM-ViPE 的核心创新与特点如下输入要求极低：​ 仅需单个普通RGB摄像头的原始视频流，无需深度传感器，也无需事先对相机进行参数标定。
前端获取当月第一天
06-04
### 前端 JavaScript 获取当前月份第一天的方法 在前端开发中，可以通过多种方式使用 JavaScript 获取当前月份的第一天。以下是几种常见的实现方法： #### 方法一：基于 `Date` 对象直接设置日期为 1 通过创建一个 `Date` 对象，并将其日期部分设置为 1，可以轻松获取当前月份的第一天[^1]。 ```javascript function getCurrentMonthFirst() { var date = new Date(); date.setDate(1); // 将日期设置为本月的第一天 var month = ("0" + (date.getMonth() + 1)).slice(-2); // 格式化月份 var day = date.getDate(); // 获取日期 return date.getFullYear() + "-" + month + "-" + day; } console.log(getCurrentMonthFirst()); ``` #### 方法二：格式化输出日期 为了确保输出的日期符合常见的格式（如 `YYYY-MM-DD`），可以对月份和日期进行零填充处理[^3]。 ```javascript function getCurrentMonthFirstFormatted() { var date = new Date(); date.setDate(1); var year = date.getFullYear(); var month = ("0" + (date.getMonth() + 1)).slice(-2); var day = ("0" + date.getDate()).slice(-2); return year + "-" + month + "-" + day; } console.log(getCurrentMonthFirstFormatted()); ``` #### 方法三：简化版实现 如果不需要额外的格式化操作，可以直接返回 `Date` 对象[^4]。 ```javascript function getCurrentMonthFirstSimple() { var date = new Date(); date.setDate(1); return date; } console.log(getCurrentMonthFirstSimple()); ``` --- ### 注意事项 - 在 JavaScript 中，`getMonth()` 返回的值是从 0 开始的（即 0 表示一月，11 表示十二月），因此需要加 1 来获取正确的月份[^2]。 - 如果需要将日期格式化为字符串形式，建议对月份和日期进行零填充处理，以确保输出符合标准格式（如 `YYYY-MM-DD`）[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值