盒子模型的知识点

已于 2022-02-21 22:52:44 修改
阅读量164 收藏
点赞数
分类专栏： html+css 文章标签： css3 css html
于 2022-02-20 22:20:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zimingyo/article/details/123036875
版权
本文详细介绍了CSS中的盒子模型，包括内边距padding和外边距margin的使用方式，以及如何通过box-sizing属性来控制元素尺寸计算。同时，讨论了如何消除默认的内外边距，并强调了在设计中考虑padding对于盒子尺寸的影响。
摘要由CSDN通过智能技术生成

盒子模型的介绍

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

内边距padding

写法：padding:1px 2px 3px 4px;
这些数值依次是表示盒子上，右，下，左（顺时针）
拓展写法：padding:1px 2px 3px；（上，右左，下）
padding:1px 2px；(上下，右左)
如图 在这里插入图片描述
注意：padding会撑大盒子，所以我们在设计盒子的宽高时，需要将padding的这部分减掉；
1.直接手动减掉，虽然可以解决问题，但是太麻烦了
2.另外还有一种自动减掉多出的尺寸的方法：box-sizing:border-box;

外边距margin

在这里插入图片描述
用法类似padding

消除默认内外边距

在这里插入图片描述

问题

在这里插入图片描述
在这里插入图片描述

例如
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

zimingyo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子模型知识点总结
易始的博客
07-20 586
index，边框,边框宽度，边框颜色，盒子模型，盒子模型尺寸，盒子阴影，内边距，圆角边框，利用圆角边框制作半圆，扇形，圆形，拯救盒子布局
css盒子模型实验报告总结_前端知识点总结——盒子模型
weixin_39876514的博客
12-19 1163
1、盒子模型盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。标准盒子模型 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。IE盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin、bo...
盒子模型基础知识点整理
licuculi的博客
01-27 302
盒子模型 border border-style solid 实线 dotted 点线 Dashed 虚线 连写： border: 1px solid #006600; border-left | right | bottom | top 边框合并： border-collapse:collapse; 内边距(padding) padding: left | right | bottom | top 内边距连写 padding: 0 12px 13px
第六章CSS3盒子模型知识点
qq_41882685的博客
06-21 295
1，盒子模型的使用:边框(border-color,border-width,border-style)2，内边距：padding3，外边距：margin4，盒子总尺寸： border+padding+margin+内容宽/高5，box-sizing:(content-box,border-box)6，圆角边框:border-radius语法    border-radius制作特殊图形7，盒子阴...
盒子模型重点知识
梁恒嘉的博客（https://blog.crazymen.cn/）
12-15 623
学习前端里面的盒子模型，主要记录元素的浮动以及定位相关知识。
盒子模型的知识点汇总
weixin_42834788的博客
07-19 523
一、盒子模型 1.什么是CSS盒子模型? CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子 结论 1.在HTML中所有的标签都可以设置 宽度/高度 == 指定可以存放内容的区域 内边距 == 填充物 边框 == 手机盒子自己 外边距 == 盒子和盒子之间的间隙 <style> span,a,b,strong{ di...
css盒子模型（基础知识整理）
qq_56532050的博客
11-23 310
垂直格式化和水平格式化类似，也有7个相关属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性。水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来往往是父级元素的width值。
盒子模型总结
鹿蹊zz的博客
05-04 2785
一、定义 盒子模型 ：盒模型、框模型（box model） css将页面汇总所有的元素的都设置为一个个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置，每一个盒子，都有以下几个部分。 内容区（content）：元素中所有的 边框（border）：元素设置边框 内边距（padding）：指的是盒子的内容和边框之间的距离 外边距（margin）：决定是盒子和盒子的距离（盒子可见框大小） 盒子模型内盒总尺寸=...
【CSS3】一文搞懂盒子模型（知识点加案例）
qq_49900295的博客
02-08 3233
看透网页布局本质 行内元素比如文字类似牛奶，需要一个盒子把他们装起来，我们所学过的双标签都是一个盒子。有了盒子，我们就能任意的，自由的摆放位置了。 看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。 比如我们打开小米的官网： 显而易见，他就是由一个个大小不一功能不同的盒子组成。 盒子模型组成 上面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的 Border(边框) - 围绕在内边距和内容外
HTML基本知识——盒子模型
qq_45854518的博客
07-15 120
HTML基本运用——盒子模型
CSS3盒子模型详解
09-25
CSS3盒子模型是Web开发中用于布局的基础概念之一，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）...掌握这些知识点，能够帮助开发者更有效地创建出响应式和适应不同浏览器环境的Web界面。
DIV CSS 盒子模型PPT演讲.zip
02-27
这个PPT演讲将深入探讨这一核心知识点，帮助初学者掌握网页设计的基础。 首先，我们要了解什么是盒子模型。在HTML和CSS的世界里，每个元素都被视为一个矩形的“盒子”，它包含内容(content)、内边距(padding)、边框...
盒子模型1.doc
11-13
加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学者会带来一定的帮助。 ``` 以上代码展示了如何通过CSS来...
CSS3模拟windows加载效果
u011626414的专栏
08-14 282
Windows加载效果
css之flex布局
qq_37011724的博客
08-14 310
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。，即如果存在剩余空间，也不放大。属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。默认情况下，项目都排在一条线（又称"轴线"）上。
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
08-12 1043
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
初识CSS（二）
weixin_68441705的博客
08-12 253
xpos ypos //像素（不是响应式布局，是一种绝对位置，有可能超出背景)backgroud-repeat: //背景图片是否平铺以及平铺样式。backgroud-attachment: //背景图片滚动。//左上角是0%0%，右下角是100%100%bckgroud-position: //背景图片位置。/行高，p中自动有设置。backgroud-image: //背景图片路径。line-height: //行高，直接设置值即可。//穿过文本的一条线。text-shadow: //阴影，设置艺术字。
页面布局-1
weixin_59868842的博客
08-13 605
static：不定位，默认值。relative：相对定位。absolute：绝对定位。fixed：固定定位。
CSS3 圆角
最新发布
lly202406的博客
08-15 205
在网页设计中，圆角矩形是一种常见的设计元素，它们为页面带来了柔和的视觉体验。随着CSS3的推出，实现圆角矩形变得异常简单，无需依赖图片或复杂的JavaScript代码。本文将详细介绍CSS3中用于创建圆角矩形的属性，包括其基本用法、高级技巧以及在不同浏览器中的兼容性。
css盒子模型知识点
12-06
CSS盒子模型的知识点包括以下内容： 1. 盒子模型的四个部分：内容区域、内边距、边框和外边距； 2. 盒子模型的属性：width、height、padding、border、margin等； 3. 盒子模型的标准盒模型和IE盒模型； 4. 盒子模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值