CSS的两种盒子模型

于 2022-03-30 18:33:39 发布
阅读量178 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65282357/article/details/123851066
版权

如下图，先建一个高为300px，宽为400px的div，并设置5px的边框和10px的paddingwatermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LuZ5aWz5LiN6K6yLeadjg==,size_20,color_FFFFFF,t_70,g_se,x_16

执行这个代码不会显示出300*400的盒子，而是呈现出了一个330*430的盒子

29f49ad579e0410a851cd96a1ecf2898.png 

如上图所示，在这个盒模型中里面还包括margin,border,padding

而引起上面效果的原因是因为css两种盒子模型的不同

1.W3C的标准盒模型

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LuZ5aWz5LiN6K6yLeadjg==,size_20,color_FFFFFF,t_70,g_se,x_16

 

在标准的盒子模型中，width指content部分的宽度

2.IE的盒模型

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LuZ5aWz5LiN6K6yLeadjg==,size_20,color_FFFFFF,t_70,g_se,x_16 

在IE盒子模型中，width表示content+padding+border这三个部分的宽度 

我们可以借助box-sizing属性来切换盒模型

  • box-sizing：content-box是W3C盒子模型（默认属性）
  • box-sizing：border-box是IE盒子模型

 

 

仙女不讲-李
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两种盒子模型
CSDN
04-05 489
一、什么是盒子模型 CSS盒子模型（Box model）是利用CSS技术进行网页设计时所使用的一种思维模型。 它将网页中的每个元素都看成一个盒子，每个盒子具备以下四个属性： margin(外边距) padding(内边距) border(边框) content(内容) ...
CSS 的两种盒模型
qq_38757174的博客
09-09 622
概念 CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin 盒模型的分类 W3C 盒子模型(标准盒模型) IE 盒子模型(怪异盒模型) 两种盒模型的区别 宽度和高度的计算方式不同 标准盒模型： width = content-width height = content-height 怪异盒模型: width = content-width + padding-wi
什么是盒子模型，盒子模型，标准盒模型，怪异盒模型，两种盒模型的区别，box-sizing属性
，
08-31 3060
什么是盒子模型 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容，内边距，边框，外边距这几个部分。 盒子模型分为两种： 第一种是W3C标准的盒子模型（标准盒模型） 第二种IE标准的盒子模型（怪异盒模型） 标准盒模型与怪异盒模型的表现效果的区别之处： 1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度 W3C标准盒模型下盒子的大小 = width （
css的两种盒模型
weixin_43613849的博客
11-08 61
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 切换盒模型也很简单，这里需要借助css3的box-sizing属性 box-sizing: content-box是W3C盒子模型 box-sizing: border-box是IE盒子模型 W3C的标准盒模型 IE的盒模型 ...
两种盒子模型（W3C盒子 与 IE盒子）
黄大人
11-17 377
盒子模型分两种，一种为W3C盒子，一种为IE盒子。
两种盒模型
weixin_44645309的博客
12-31 268
1、标准盒模型 元素的width=内容的width。 2、IE盒模型 元素的width=内容的width+padding+border。 3、切换两种盒模型方法 box-sizing: content-box;//标准盒模型（默认） box-sizing: border-box;//IE盒模型
CSS盒子模型是什么
01-19
一、什么是CSS？ CSS（Cascading Style Sheet）：层叠样式表是将网页的内容与样式进行分离的一种语言，也就是在aspx或html中设计网页的内容，在CSS中设置网页的样式等。...三、两种盒子模型 1、标准盒
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
CSS面试须知盒子模型、浮动及定位.docx
07-08
"CSS盒子模型、浮动及定位" CSS盒子模型是指将HTML页面中的布局元素看作是一个矩形的盒子，一个CSS盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。盒子的...
IE盒子模型和标准W3C盒子模型
12-09
其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释...
CSS两种盒子模型
LittlePoem的博客
08-04 205
1
Css的两种盒模型
r67686的博客
09-15 1090
在进行网页的搭建时，通常会用到很多的标签，可以形象的把这些标签看成是一个个矩形，这些矩形盒子搭建成了网页。在描述盒子模型前先来介绍一下盒子的一些属性。 盒子通常指的是块元素（但是行内元素在浏览器的查看器内也会出现盒子模型的图片），一个完整的盒子由四个部分组成，它们分别是： margin 外边距 代表盒子四周的区域。相邻元素的边距会合并 border 边框 ​设定介于padding的外边缘与margin的内边缘之间，默认值为0 padding 内边距 ...
盒模型的两种模式
iconhot的博客
08-13 1342
IE5及以下的浏览器对CSS不太友好，而IE6及以上的浏览器对CSS更加友好，这个时候就出现了Quirks 模式与 Standards 模式 Quirks 模式即为怪异模式，Standards 模式即为标准模式；两种模式的出现必然会出现一定的兼容问题，在标准模式下如何兼容怪异模式下书写的CSS呢？在IE6下我们用DTD作为衡量标准，如果有DTD出现，那这个页面将会优先选择Sta...
两种盒子模型的理解
qq_44193064的博客
05-06 2153
一.先用代码和效果图来说明: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css盒模型</title> </head> <style type="text/css"> .content { ...
介绍一下css的盒子模型
最新发布
11-01
CSS盒子模型是网页开发中的一个基本概念，它描述了网页元素的外观和大小。盒模型由内容区域、内边距、边框和外边距四个部分组成，这些部分的大小和位置都可以通过CSS进行控制。其中，内容区域指的是元素内部的实际内容，内边距指的是内容区域与边框之间的距离，边框指的是内容区域和内边距之外的边框线，外边距指的是边框和相邻元素之间的距离。盒子模型的大小计算方式包括两种：标准盒子模型和IE盒子模型。标准盒子模型的大小计算方式是元素的宽度和高度等于内容区域的大小，而IE盒子模型的大小计算方式是元素的宽度和高度等于内容区域、内边距和边框的大小之和。在实际开发中，我们可以通过box-sizing属性来控制盒子模型的大小计算方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值