前端女娲补天 CSS（一） 什么是CSS盒模型

已于 2022-05-28 22:31:01 修改
阅读量112 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css
于 2022-05-28 22:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiXenon/article/details/125024391
版权

什么是CSS盒模型

css的元素都可以被看成是一个盒子，这就叫盒模型。
一般情况下盒模型由margin border padding content组成。

图源：langmanboy 盒模型详解

盒模型的两种类型

盒模型分为标准盒模型和IE盒模型两种。

标准盒模型（默认）的width和height是content的宽高
而IE盒模型的width和height是content + padding + border的宽高

box-sizing

box-sizing是指盒模型的类型
标准盒模型box-sizing:content-box
IE盒模型box-sizing:border-box

LiXenon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子概述
m0_63029399的博客
05-04 2799
盒子的概念 1.页面中的每一个标签,都可以看作一个盒子，通过盒子的视角更方便的进行布局。是 2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的 称之为盒子。 3. 盒子组成 css中规定每一个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域 (border)、外边距区域(margin)构成,这就是...
CSS盒模型（详解）
qq_44171586的博客
03-06 5194
什么是CSS盒模型 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，
CSS 盒子模型
山水子农
06-19 610
1、CSS 盒子模型(Box Model)    所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：   不同部分的说明：    Margin(外边
浅谈CSS盒模型
m0_58875326的博客
04-27 1734
简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人，如有错误求大佬指出~求教💝 情景复现 大佬提问：“你知道CSS盒模型是什么吗？” 我的回答：“ 盒模型主要分为4部分：内容、外边距、内边距。Css3盒子模型可以通过box-sizing来改变。目前是有两种盒模型。 第一种是w3c标准盒模型，默认也是content-box，也就是默认标准盒模型，标准盒模型width设置了内容的宽，所以盒子实际宽度是width=内容+padding+border。 ...
CSS盒子的三种类型（border-box、content-box）
Erya Programming learning
06-01 3万+
文章目录一、CSS盒子1.1 盒子的四个区域二、CSS盒子的类型1.content-box 内容盒子content-box盒子的宽高计算公式2.border-box 边框盒子3.特殊的盒子：替换元素 一、CSS盒子 一个盒子通常包括四个区域，让我们先写一个设置好width和height属性的div。 1 示例1： <style> .box { width: 100px; height: 200px; } </style> <div class = "box"&
女娲补天第一课时课件.ppt
10-18
《女娲补天》是中国古代神话故事之一，讲述了女娲如何拯救人类于危难之中的英勇事迹。在第一课时的课件中，主要涉及了故事的起始部分以及一些重要的词汇和概念。 故事背景是在一系列灾难性事件之后，如嫦娥奔月、...
女娲补天故事flash动画
07-24
女娲补天故事flash动画是一款新人教版三年级下册语文动画课件下载。
2女娲补天——学生学习课件
11-23
- **女娲补天**：这是一个流传于中国古代的著名神话故事。女娲是中国古代神话中的创世女神之一，被视为人类的母亲。 ### 二、故事情节概述 #### 1. 故事起源 - 在遥远的古代，水神共工与火神祝融发生了一场激烈的...
女娲补天说课 (3).ppt
10-27
《女娲补天》是北师大版二年级下册语文第十四单元的一篇课文，主要讲述了中国古代神话故事中的女娲如何用智慧和勇气拯救人类的故事。这篇课文旨在通过生动的神话情节，培养学生的语言能力、思维能力和想象力，激发...
1女娲补天——学习ppt课件
11-23
### 女娲补天——学习PPT课件知识点总结 #### 一、课程背景及目标 本课程通过介绍中国古代神话故事《女娲补天》，旨在帮助学生了解中国古代文化的精髓，同时培养学生的语言能力和想象力。具体目标包括： 1. **识字...
css的两种盒模型
热门推荐
zwkkkk1的博客
03-24 6万+
前言 初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题，这里做一个关于css盒模型的分享。 问题 下面的代码可以直接复制出去运行哦 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl
CSS初入门：CSS盒模型简单介绍
lalala_dxf的博客
03-17 1318
盒模型
网站基本布局CSS
m0_46608027的博客
07-24 792
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 787
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 257
【代码】TS如何处理js模块的类型？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 349
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 344
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 1005
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 977
CTFWP，ctfshow-web42
"中国古代神话故事学习PPT
其中，后羿射日是一个被人们传颂的英雄故事，而女娲补天则是一个关于创世女神的传说。夸父逐日讲述的是一个不知满足的狂妄神祇，而精卫填海则是一个讴歌奋斗的故事。嫦娥奔月的故事则是关于爱情与牺牲的传说。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值