CSS（二）——盒子模型

最新推荐文章于 2024-03-16 00:30:00 发布
最新推荐文章于 2024-03-16 00:30:00 发布
阅读量3k 收藏 7
点赞数 1
分类专栏： 前端基础 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zg0601/article/details/120794290
版权

目录

一、概念

二、盒子模型的组成

三、设置盒子的大小

四、块级盒子（Block box）和内联盒子（Inline box）

五、相关属性

①外边距（margin）

②边框（border）

③内边距（padding）

④背景属性（background）

⑤阴影属性（box-shadow）

一、概念

盒子模型（box model）是进行网页布局的重要属性。在CSS 中，所有元素都被一个个的“盒子”包围着，理解了这些“盒子”的基本原理我们可以更加准确地实现CSS布局以及处理元素排列。

二、盒子模型的组成

我们目前所学习的知识中，以标准盒模型为准。

标准盒模型的组成：

①外边距（margin）：是指当前盒子模型的边框至其他盒子模型的边框之间的区域。

②内边距（padding）：是指当前盒子内容区至边框之间的空白区域。

③边框（border）：是包含当前盒子内容区和内边距的边界。

④内容区（content）：用来在HTML页面显示内容的区域。

⑤width和height：如下图所示，是指盒子内容的宽度和高度（并不是指盒子的宽度和高度）。

 

IE（替代）盒模型的组成：

①外边距（margin）：是指当前盒子模型的边框至其他盒子模型的边框之间的区域。

②内边距（padding）：是指当前盒子内容区至边框之间的空白区域。

③边框（border）：是包含当前盒子内容区和内边距的边界。

④内容区（content）：用来在HTML页面显示内容的区域。

⑤width和height：如下图所示，是指盒子内容区＋border＋padding的宽度和高度。

 

三、设置盒子的大小

我们所设置的盒子模型的width和height仅仅是盒子内容的宽和高，因此我们在设置时还要对盒子的内边距、边框和外边距进行设计。

下列公式分别是盒子模型总宽度以及总高度的计算公式：

盒子模型的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子模型的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和

四、块级盒子（Block box）和内联盒子（Inline box）

块级盒子的表现：

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width 和 height 属性可以发挥作用
  • 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

内联盒子的表现：

  • 盒子不会产生换行。
  •  width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

五、相关属性

①外边距（margin）

  • 仅使用margin一次控制一个元素的所有边距
    • margin : 按上右下左顺序设置 ;
  • 或者每个边单独使用等价的普通属性控制
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left

②边框（border）

  • 仅使用border属性一次设置所有四个边框的宽度、颜色和样式。
    • 综合设置：border : 四边宽度 四边样式 四边颜色 ;
    • 边框样式：border-style : 按上右下左顺序设置 ;
    • 边框宽度：border-width : 按上右下左顺序设置 ;
    • 边框颜色：border-color : 按上右下左顺序设置 ;
    • 圆角边框：border-radius: 水平半径参数/垂直半径参数;
    • 图片边框：border-images：图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;

  • 或者每个边单独设置
    • border-top-[需要设置的属性]
    • border-right-[需要设置的属性]
    • border-bottom-[需要设置的属性]
    • border-left-[需要设置的属性]

③内边距（padding）

  • 仅使用padding一次控制一个元素的所有边距
    • padding : 按上右下左顺序设置 ;
  • 或者每个边单独使用等价的普通属性控制
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

ps： a、不能有负值

b、不能同时设置相对的两个边距

④背景属性（background）

  • 综合设置：background: 背景色 url("图像") 平铺 定位 固定 ;
  • 背景颜色：background-color
  • 背景图像：background-image
  • 背景图像的平铺属性： background-repeat
    • repeat：默认值,表示沿水平、垂直方向平铺
    • no-repeat：不平铺,只显示一张图片
    • repeat-x：沿水平方向平铺
    • repeat-y：沿垂直方向平铺
  • 背景图像的位置属性：background-position
  • 背景图像的固定属性：background-attachment
    • scroll：默认值,背景图像会随内容一起滚动
    • fixed：背景图像位置固定不动

⑤阴影属性（box-shadow）

  • box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 outset/inset ;
非早起选手
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS面试题】盒子模型的宽度如何计算？
Milk~每天分享一点点，技术进步一点点
07-16 2549
盒子模型的宽度如何计算？ offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。 它们的大小取决于元素的宽高、padding以及边框border，有无滚动条都没有影响，下面是他们的计算方式。 offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距 因此，答案是122px 补充：如果让offsetWidth等于100px,该如何做？ 做法：添加属性：box-sizing:border-box; 这个的意思就是：加了b
CSS——盒子模型
s310040799的博客
08-11 361
在我学习CSS视频的时候，发现所有的元素都是由一个个的盒子模型包围着的，它们是我们使用CSS实现准确布局，处理元素排列的关键，因此今天就来写篇博客总结下。 盒子模型分为两种——块级盒子模型（Block box）和 内联盒子模型（Inlinebox） 为什么要这么区分呢，是因为这两种盒子模型会在页面流和元素之间的关系上表现出不同的行为 块级盒子模型（Block box） 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
CSS3盒子模型（CSS3）
...
08-16 239
CSS3盒子模型（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
盒子模型的计算
不积硅步，无以至千里，不积小流，无以成江海。
12-28 1263
盒子尺寸计算 红盒子尺寸：红盒子内容区+margin(左右)+padding(左右)+border(左右） 黑盒子尺寸：黑盒子内容区+margin(左右）+padding（左右）+border（左右） 蓝盒子：蓝盒子内容区+margin(左右）+padding（左右）+border(左右) 如果是上面的结构，正常的文档流，设置margin，如果有叠加部分，qu叠加部分
【CSS】盒子模型的计算
derud7050的博客
06-20 738
1、标准盒子的尺寸计算 盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框 盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
盒子模型
Andy·Wu的专栏
05-25 618
一、提出问题 什么是盒子模型？ 盒子模型的两种计算方式是什么？ 块级元素和行内元素使用盒子模型的注意事项。 二、什么是盒子模型？ 盒子模型就是浏览器看待元素的方式。当我们打开浏览器查看元素时，会显示如下图所示的盒子模型： 三、盒子模型的两种计算方式是什么？ 盒子模型有两种计算方式，区别在于盒子的 width 和 height 的值是怎么计算得到的。可以通过 CSS 的 box-sizing ...
CSS--盒子模型
weixin_43879167的博客
02-02 419
文章目录一、开发者工具1.1 打开方式1.2 位置调整1.3 选择箭头1.4 Elements1.5 Console1.6 Sources1.7 Network二、盒子模型2.1 位置2.2 应用2.3 外边距合并三、 Style中的样式关系3.1 解读顺序3.2 样式位置3.3 删除线3.4 Style中的快速调整 一、开发者工具 1.1 打开方式 浏览器菜单---->工具---->开发者工具或者是按快捷键F12 1.2 位置调整 点击右上角三个点，位置依次对应分离、左、下、右 1.3
CSS篇十六——盒子模型之边框
Regina_Cai的博客
11-16 3806
* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。边框有三部分组成：边框宽度、边框样式以及边框颜色。/* border-width 边框的粗细，一般情况下都用 px *//* 利用层叠性，上述写法可以实现但过于麻烦 *//* border-color 边框颜色 *//* 边框的复合写法 简写： *//* 注意 不能颠倒顺序 *//* 合并相邻的边框 */
CSS——盒子模型,元素的类型和转换
hi_Celia的博客
12-02 1561
进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同 1、盒子的特性： (1)外边距(margin)：盒子与其他元素之间的额距离 (2)内边距(padding)：也称为填充距离,内容和边框之间的距离 (3)边框(border) ...
CSS基础——盒子模型
qq_24679307的博客
02-23 221
CSS基础——盒子模型 在接触HTML 的过程中，除了各种标签、属性、声明之外，必不可少的还需要对页面的排版布局来考虑。此时盒子模型就显得尤为重要了。 ​ 顾名思义，盒子模型就是在CSS中可以将HTNL标签当成一个个的盒子，通过盒子的内外边距，边框和内容，来协调控制各内容的排版。 标准盒模型组成： 内容区content + 填充补白（里面的)padding + 边框 border+外边距（m...
css基础(3)——盒子模型，标签分类
qq_51913153的博客
05-16 675
1.盒子模型 css处理网页时，会认为每个标签都包含在一个不可见的盒子中 把每个标签看做一个盒子，那么定义布局实质上就是将每个盒子摆放到网页中相应的位置种，即可完成布局 一个盒子分为四部分，假如将一个教室看做一个盒子 ——内容区：存放标签中的内容与标签,width与height的实际设置的区域（就相当于教室中桌椅的位置） ——内边距：内容区与边框之间的距离（可看做教室过道） ——边框：内边距与外边距之间的距...
用盒子模型的html代码,HTML/CSS基础课程笔记————盒子模型篇
weixin_39530838的博客
06-07 1467
——————————————————————————盒子模型———————————————————————————————盒子模型=网页布局的基石( 文本，图像，音频，视频等)，还能控制盒子与内容还要盒子与盒子之间的距离盒子模型由4个部分组成：边框(border)外边距(margin)内边距(padding)边框，外边距，内边距是盒子模型的特性也就是盒子模型的属性盒子中的内容(content)盒子...
CSS两种盒模型详解：计算公式+代码示例
最新发布
大剑师兰特的GIS世界
03-16 1101
CSS3 引入了 `box-sizing` 属性，可以切换这两种盒模型的行为。默认情况下，大多数元素遵循标准盒模型，但可通过设置 `box-sizing: border-box` 改为怪异盒模型。这对于解决跨浏览器的盒模型兼容问题非常有用。
CSS盒子模型
阳光下的冷静的博客
12-25 274
CSS盒子模型： 不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。   解释一：  标准的css盒子模型：宽度=内容的宽度+边框的宽度+加上内边距的宽度 网页设计中常...
CSS盒模型宽度
lulalahappy123的专栏
04-13 446
盒模型--宽度和高度 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。 比如： css代码： div{ width:200px;
CSS知识点：盒子模型的计算方法
规律生活
04-03 6155
盒子模型的计算方法(box-sizing)div{ box-sizing:content-box;/*默认值*/ box-sizing:border-box;/*推荐使用*/ } 1.content-box: 盒子的总宽度=margin+border+padding+width 2.border-box: 盒子的总宽度=margin+width
CSS | 盒模型的宽度如何计算
恰排骨芸豆包嘛的博客
10-27 453
盒模型的宽度如何计算 如下代码，请问div1的offsetWidth是多大？ <style> #div1 { width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; } </style> <div id="div1"></div> offsetWidth = (内容宽度 + 内边距 + 边框)， 无外边距 因此答案是122px 如果让
css 盒子模型以及盒子相关尺寸基本的计算
qq_41304029的博客
01-27 961
因为历史原因，我们往往将盒子模型分为盒子模型分为两类，分别是IE盒模型（怪异模型，IE8以下）以及w3c的标准盒模型（主流浏览器遵循的一种盒子模型），他们在width和height的作用方式上面有区别。IE 盒模型：设置的width/height其实就是content的宽度/高度+padding宽度+border的宽度。在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE低版本使用的是IE盒模型。2、对于普通流中的则包含块为直接父级的content-box。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值