CSS 盒子模型（重点）

最新推荐文章于 2023-02-08 10:53:47 发布
最新推荐文章于 2023-02-08 10:53:47 发布
阅读量375 收藏 2
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengyu0726/article/details/106041298
版权
本文详细介绍了CSS盒子模型的组成，包括border、content、padding和margin，强调了它们对盒子大小的影响。还讨论了外边距合并问题，提供了解决方案，并探讨了CSS3新增的圆角边框和盒子阴影特性，及其应用场景。
摘要由CSDN通过智能技术生成

1、组成

  • border：边框
  • content：内容
  • padding：内边距
  • margin：外边框
    在这里插入图片描述

２、border

属性：border-width、border-style、border-color
简写：border:1px solid red; ※
注意：边框在盒子外部，会影响盒子的大小
合并相邻边框：border-collapse:collapse

3、content

内容：可以放文字，也可以放盒子

4、padding

内边距：边框与内容的距离
属性：padding-left、padding-right、padding-top、padding-bottom

属性简写（复合写法）：
padding:10px; //上下左右都有10像素内边距
padding:10px 20px; //上下10像素，左右20px
padding:10px 20px 30px; //上10像素，左右20像素，下30像素
padding:10px 10px 10px 10px; //上右下左顺时针

注意：会将盒子撑大，影响盒子大小 ※
好处：盒子

最低0.47元/天 解锁文章
chengyu0726
关注
专栏目录
超详细的学习笔记：CSS盒子模型（附代码示例）
lbcbjtlhmjq的博客
07-11 2478
盒子的概念1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局2.浏览器在染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子盒子模型CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域 (padding) 、边框区域(border) 、外边距区域(margin)构成，这就是盒子模型记忆:可以联想现实中的包装盒。
CSS——CSS盒子模型（重点※）
流楚丶格念的博客
06-29 1万+
是你的温柔导论看透网页布局的本质盒子模型（Box Model）盒子边框（border）盒子边框写法总结表表格的细线边框圆角边框(CSS3)内边距（padding）外边距（margin）外边距实现盒子居中文字盒子居中图片和背景区别清除元素的默认内外边距外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并content宽度和高度盒子模型布局稳定性盒子阴影盒子基本训练案例导航栏案例※新闻内容布局美化案例※ 导论 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无
CSS盒子模型(重点)
李亚飞的博客
01-17 4798
盒子模型(Box Model) 把HTML页面中的布局元素当做一个矩形盒子，也就是一个盛放内容的容器 组成部分 内容 边框（border） 内边距（padding）内容与边框的距离 外边距（margin） 盒子边框与相邻盒子边框的距离 标准模型 盒子边框（border） 语法： border: border-width || border-style || border-color 属性： ...
CSS 框模型(Box Model)
wuxiaobingandbob的专栏
03-02 543
CSS 框模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了框模型(Box Model)： 不同部分的说明： Margin - 清
盒子模型（CSS重点）
weixin_43887184的博客
04-09 215
css学习三大重点： css 盒子模型 、 浮动 、 定位 主题思路： 目标： 理解： 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能说出外边距合并的解决方法 应用： 能利用边框复合写法给元素添加边框 能计算盒子的实际大小 能利用盒子模型布局模块案例 1.看透...
简述 css 盒子模型
a964564277的博客
09-11 249
css 盒子模型
CSS盒模型简单介绍
m0_64634466的博客
06-22 3079
css盒模型
CSS学习中|CSS盒子模型（重点学习！代码+样例）
weixin_47788265的博客
07-15 3543
1.盒子模型（Box Model） 理解盒子模型： 可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器 如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height） 手机距包装盒的距离为内边距（padding） 包装盒本身的宽度为边框（border） ...
CSS笔记(二) - 页面布局 盒子模型
最新发布
JUN_7777的博客
02-08 2303
行内元素
初识HTML（五）进阶：CSS盒子模型、页面布局
Simple子夜
03-13 1万+
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容（文本、或者图片、或者其它标签）。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 标准的W3C盒子模型： 元素的宽度和高度 重点: 当你指定一个 CSS 元素的宽度和高度属性时
CSS基础：简述CSS盒模型
热门推荐
余光的博客
02-22 1万+
盒模型 问题：简述 CSS 盒模型 一、块级盒子（Block box） 和 内联盒子（Inline box） 在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为，我们这里不细分析如果转换他们的行为，仅做了解。 1.1 块级（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样
前端知识点总结（一）盒子模型你是怎么理解的？
404 not found
06-13 4077
从今天开始打算陆陆续续写一些前端方面的知识点总结，也方便自己巩固和复习。如果有人能看见还帮助了你，那也是极好的hhhh。分析与解答：1.盒子模型有两种，W3C的标盒模型和IE的怪异盒模型（1）W3C定义的标准盒模型包括margin、border、padding、content ，而区别在于标准盒模型元素的width=content的宽度  （2）IE怪异盒模型与W3C的标准盒模型唯一区别就在于元素...
CSS：盒子模型
golden_wheat
12-04 242
盒子模型 CSS padding(内边距) padding会影响元素尺寸
CSS盒子模型
最好的时光里
06-10 1579
前言   小编在学习过程中了解到了CSS的盒子模型，于是去网上搜索了一下相关的知识，以下是小编学习过后所总结的内容。 什么是盒子模型？   CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，HTML中的每个元素都被描绘成盒子，这些盒子通过一个模型来描述其所占空间，通常用四个边界元素来描述，分别为margin（外边距），border（边框，围绕在内边距和内容外的边框）...
CSS基础4-盒子模型
diajiu9420的博客
02-24 235
一、盒子模型 每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。 1.margin外边距 相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ] 如果提供全部四个参数值，将按...
神奇的CSS盒子模型
Eavan_Zhou的博客
08-23 4915
CSS盒子模型：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型都包含有内容（content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。   那这两个盒子模型有什么不同的地方呢？我们先来看看以下两张图：
04 css盒子模型
雨希的博客
09-18 232
1. 盒子模型概述 网页布局的本质：把网页各种元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。 所谓盒子模型就是把HTML页面中的每个元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个盒子都由元素的内容（内容有宽高）、内边距（padding）、边框（border）和外边距（margin）组成。 2. 内容 使用宽度属性width和高度属性height可以对盒...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值