CSS之盒模型box-sizing

已于 2023-02-27 09:43:05 修改
阅读量86 收藏
点赞数
分类专栏： CSS 文章标签： css 前端 html
于 2023-02-27 09:38:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43483787/article/details/129235552
版权

#盒模型
即确定元素的宽度和长度具体包括哪些部分。
在这里插入图片描述
##box-sizing : contet-box;
元素的width = 内容所占宽度
元素的height = 内容所占高度
##box-sizing: border-box;
元素的width = 内容所占宽度 + padding-left + padding-right + border + margin-left + margin-right
元素的height = 内容所占高度 + padding-top + padding-bottom + border + margin-top + margin-bottom

简单来讲，从字面意思来理解，border包括: padding、border、margin三部分，由此理解便很简单了。

nao-nao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 ...
深入了解盒子模型
F_eve的博客
11-15 283
不管是行盒还是快盒，具体由以下几个结构组成。 1:内容盒（content-box） 主要设置宽，高。 2:内边距(padding)，还有一种说法是填充 padding-top padding-right padding-bottom padding-left 简写：padding。顺序是顺时针（上右下左） 内容到盒子边框的距离。 这里我们举例说明： 同样在页面上画个盒子，内容写上“盒子”， div{ width: 100px; height: 100px; background-color: blue; }
css中的盒模型box-sizing
weixin_39889465的博客
11-17 1884
css中设置盒模型的属性是box-sizing，其属性值最常用的是content-box以及border-box。其中属性值为content-box的元素，又称为标准盒模型，其中google即使用的是标准盒模型；IE使用的是怪异盒模型border-box。 一. content-box 当box-sizing值为content-box时，设置元素样式的width,height即为元素内容的宽度和高度；而元素的宽度（高度）则是元素内容的宽度（高度）+元素的上下padding（左右padding）+元素的上下b
从box-sizing:border-box属性入手，来了解盒模型
热门推荐
qq_26780317的博客
06-20 13万+
从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。 背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框...
CSS：盒子模型和box-sizing属性-前端不看后悔系列
碉堡飞哥的博客
08-17 3899
盒子模型（分2个而已嘛）：IE盒子模型和W3C盒子模型 相关box-sizing的属性。 box-sizing: border-box; width = content+padding+border (横向相关) box-sizing: content-box; width = content (横向相关) 这两个模型的唯一区别是计算width和height时，IE盒子模型包含...
css3 盒模型以及box-sizing属性全面了解
09-24
下面小编就为大家带来一篇css3 盒模型以及box-sizing属性全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准的盒子...
浅谈CSS3 box-sizing 属性 有趣的盒模型
12-13
盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. ...这里用到了CSS3 的属性 box-sizing(默认值：content-box) /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; co
css3 box-sizing属性使用参考指南
12-01
取值： content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content} border-box:此值改变css2.1盒模型组成模式，content|border|padding {element width=content}...
CSS3 box-sizing属性
12-11
说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 ...这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，
谈谈对css属性box-sizing的了解
12-13
在了解box-sizing之前，让我们来稍稍回顾一下盒子模型，模型分为：标准盒模型+IE盒模型。那这有什么区别呢？见图所示： 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content...
解决CSS 中box-sizing与background-clip解决背景显示范围的问题
12-11
过去在学习CSS的时候，首要任务就是要理解“box model”，因为box model是CSS里头很重要的模型概念，描述了padding、margin、border与content的空间定位，今天的项目竟然卡在一个简单的小问题，因此就用一篇文章做个...
bjgc-liuhuan#bhg-blog#35.从box-sizing属性入手，了解盒子模型1
07-25
背景先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即占窗口宽度的100%，但边框border和内边距padding
CSS3盒子模型详解
12-13
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让...css2.1追加了一个盒类型：inline-block，他属于block类型之一
前端开源库-tachyons-box-sizing
08-30
前端开源库-tachyons-box-sizing超光速管盒尺寸，CSS模块，更智能的默认盒模型。
learning-box-model:用于教授盒子尺寸的 Angular 应用程序
06-16
##Learning 盒子模型： box-sizing ###运行/开发： 要求： bower, gulp, sass (ruby) npm install -g bower gulp gem install sass 设置 克隆回购 安装节点模块和凉亭组件/依赖项 npm install && bower install...
css 盒模型 文档流 几种清除浮动的方法实例详解
01-21
盒模型 1、box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode 2、box-sizing:border-box 以盒子边框为...
01-HTML-CSS个人听课笔记
最新发布
10-13
内容概要：HTML5 新特性、语义化、CSS 选择器及优先级、position 属性：relative，absolute，sticky，Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局：...
深入理解css布局之定位与浮动
12-03
上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。这篇我们继续… 一、定位与浮动 上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是...
css的盒子模型box-sizing
09-21
box-sizing是用来改变CSS盒子模型的属性，它可以改变元素宽高的计算方式。box-sizing有三种取值：content-box、padding-box和border-box。其中，content-box是默认值，对应CSS2.1规范中的标准盒子模型；padding-box和border-box是CSS3中新增的两种盒子模型。content-box对应的是标准盒子模型，而border-box对应的是怪异盒子模型，也是在IE中使用的盒子模型。 回答完问题后，我还可以提供一些

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值